:: Seribu _ Dunia ::: 2010

Jumat, 31 Desember 2010

Cara Membuat Scrol Box pada Arsip Blog Kamu

Ada sebagian teman-teman yang mengeluh saat menambah postingan di blog karena pada arsip blog-nya jadi panjang turun kebawah. Namun sebenarnya bisa aja tampilan tersebut diganti dengan melalui pengaturan blog itu sendiri seperti membuat tampilan menu dengan bentuk dropdown ataupun dengan tampilan flat.

Hierarchy

Flat List

Dropdown Menu

Namun bagaimana kalau kita tetap menggunakan pilihan menu Hierarchy namun tidak kepanjangan? Salah satu caranya yaitu dengan membuat widget arsip blog tersebut dengan fungsi scrol. Langsung aja ddeh ke TKP :

• Log In ke blogger
• Klik Tata Letak
• Klik Elemen Halaman
• Tambahkan sebuah elemen halaman=> Tambah elemen Arsip Blog
• Tapi Anda harus pilih gaya Hierarki
• Setelah itu, klik Edit Html
• Beri tanda centang pada tulisan Expand Widget Template
• Lalu Anda cari kode seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

Kemudian tambahkan code ini <div style='overflow:auto; width:ancho; height:100px;'> persis dibawah code <div class='widget-content'> jadi hasilnya akan berbentuk seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

Setelah itu cari code ini tidak jauh kog dari code diatas

<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

Dan terakhir tinggal menutup code tersebut dengan perintah </div> jadi hasilnya akan seperti ini

<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>

Dan bentuk script keseluruhan akan seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>

<div style='overflow:auto; width:ancho; height:100px;'>
100 px adalah tinggi dari bidang tersebut jadi tinggal rubah nilainya sampai anda sudah merasa cocok dengan template anda.

Terakhir simpan template anda dan selamat sekarang anda sudah mempunyai widget arsib blog yang mempunyai fungsi scrol .

Sumber Inspirasi : IAB

Membuat daftar isi otomatis dengan bantuan spoiler

Membuat daftar isi otomatis dengan bantuan spoiler
Sebelumnya kita harus mengenal dulu daftar isi di blog itu seperti apa, kalau mau lihat silahkan klik spoiler disebelah kiri yang tulisannya daftar isi.
Trus mengenal juga apa itu spoiler dan bagaimana fungsinya, untuk fungsinya saya rasa agan2 sudah tahu keuntungan menggunakan spoiler sangat bermanfaat sekali. selain bisa menghemat ruang pada blog kita spoiler juga bisa membuat tampilan blog kita seperti profesional.. nah... lalu bagaimana cara membuatnya ???
Okelah... saatnya tuk berbagi dan kali ini saya usahakan segampang mungkin tanpa mengganggu body template kita alias edit html,tapi hanya menambahkan beberapa script pada gadget saja.

1.Script daftar otomatis seperti ini

<div style="border: 1px solid rgb(51, 255, 51); overflow: auto; height: 220px;" margin="1px" ;>
<script style="text/javascript" src="http://www.srbekasi.org/daftar-isi.txt"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://iananakbone.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>

2.Script spoiler seperti ini

3.gabungkan script daftar otomatis dengan script spoiler,contohnya seperti ini

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: 60px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;"><div style="border: 1px solid rgb(51, 255, 51); overflow: auto; height: 220px;" margin="1px" ;>
<script style="text/javascript" src="http://www.srbekasi.org/daftar-isi.txt"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://seribudunia.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div></div></div></div>

Keterangan... tulisan yang dicetak warna putih diganti dengan alamat blog sobat , border1px adalah ketebalan dari list dinding gadget,tulisan open serta close bisa gan agah ganti seperti BUKA /TUTUP atau apa saja ,selebihnya tinggal paste saja soalnya script diatas auto mengikuti body template gan agan semua . ok sob... ??? Happy blogging yah !!

Sumber : IAB

Kamis, 30 Desember 2010

Cara Buat Kota Blogroll Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar (yg biasanya disebelah kanan trus ditarik keatas kebawah itu lho). Link-link ato isi didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal. Nah gini nih cara buatnya:
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

Keterangan :
- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right (udah mudeng to artinya, gak usah dijelasin ya).
- Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode <br />.
- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

OK SELAMAT MENCOBA.....

Sumber : TTB

Cara Buat Kota Blogroll

Trik kali ini aen mau jelasin cara bagaimana membuat kotak blogroll yang mempunyai rollbar di samping kanan kotaknya ( yang bisa ditarik atas bawah ) contohnya bisa kamu liat di sini.

Langsung aja ya :

1. Login ke blogspot

2. Masuk ke Tab Rancangan

3. Pilih Elemen Halamana

4. Tambah Gadget

5. Pilih HTML/Javascript

6. Pasang kode dibawah ini ke dalam kotak yang muncul

Catatan :
- Kode width: 125px; dan height: 150px; adalah ukuran lebar dan panjang kotak, kamu bisa merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link kamu, oh ya itu juga bisa diisi dengan banner link.
- Jika kamu pingin daftar link-linknya berjajar , maka hilangkan saja kode <br />

Nah udah selesai deh trik kali ini.
Selamat Mencoba.

Cara Posting Kode HTML di Blog

Mungkin ada beberapa dari blogger pemula yang masih bingung bagaimana sih mencantumkan kode html di halaman posting mereka. Tapi sebenarnya caranya sangatlah mudah yaitu dengan mem-parse dahulu kode html tersebut sebelum dimasukkan ke halaman posting.

Langsung saja ya kita belajar mem-parse kode html kamu :

1. Buka Link ini

2. Ketikkan kode html kamu ke kotak Encode Input Text atau lebih gampang copy paste aja:)

3. Klik saja tombol ENCODE

4. Copy dan Pastekan Kode yang muncul pada kotak Encoded Output ke halaman posting kamu

5. Jadi Deh... :D

Selamat Mencoba

Mungkin rekan blogger pernah melihat tutorial ini, memang setau saya ada yang lebih rumit menggunakan banyak kode, tapi disini saya coba memberikan tips yang lebih mudah dan sangat simple bahkan bagi anda blogger yang baru mengenal pengkodean pasti bisa melakukannya, ok saya "Kang Yasin" akan segera memberikan tutornya, nih ikutin saja langkahnya :

1. Login Ke Blogger.com dengan Akun anda masing-masing Pastinya

2. Masuk ke Tab Tata Letak

3. Pilih Elemen Halaman

4. Tambah Gadget Pilih HTML / JAVASCRIPT

5. Dan Copy kode di bawah ini kedalamnya yah

<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Q7h-vBF-xnq74ZV6jKpZ12A-dHNZfWSRlO-eGSsvBmax3umE2AblpM5whBHSPAzaDVAtFHLRS1VNqUCPttLsSy2H7fYtdTuibme-NbnEOT5i6gYdrTrvsc7UEx4bL5pXCakHWz5KDhQ/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Q7h-vBF-xnq74ZV6jKpZ12A-dHNZfWSRlO-eGSsvBmax3umE2AblpM5whBHSPAzaDVAtFHLRS1VNqUCPttLsSy2H7fYtdTuibme-NbnEOT5i6gYdrTrvsc7UEx4bL5pXCakHWz5KDhQ/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

Masukan Kode iklan atau Gambar yang anda inginkan di sini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>

6. Simpan

Semoga BERHASIL :)

Sumber Asli : OOM

Membuat Widget Twitter Conversation

Cara Membuat Widget Twitter Conversation

Cara Membuat Widget Twitter Conversation - Anda termasuk blogger yang suka main twitter. Berikut tutorial Membuat Widget Twitter Conversatio

Masuk ke akun twitter Anda

Buka http://twitter.com/about/resources/widgets

lalu, pilih My Website

Kemudian pilih profil widget

Nah, sekarang sesuaikan kostumisasinya

Jika sudah, klik pada Finish & Grab Code

pada bagian bawah

Terakhir, copy kodenya

Demikian tutorial singkat tentang Cara Membuat Widget Twitter Conversation. Semoga bermanfaat

Sumber : PRA

Setting Domain di co.cc

Seperti yang sudah kita ketahui, bahwa co.cc adalah top level domain yang bisa kita dapatkan secara gratis. Kita bisa mengganti nama blog kita dari "http://namadomain.blogspot.com" atau "http"//namadomain.wordpress.com" (dll) menjadi "http://namadomain.co.cc" . Dengan co.cc kita bisa mengontrol DNS Records, A, MX, dan CNAME records, sehinga domain co.cc bukan hanya sekedar "URL Forwarding".
Berikut ini akan saya coba mengungkapkan tentang cara setting domain di co.cc:

Ada 3 tipe pengaturan di co.cc. Ketiganya memiliki fungsi tersendiri. berikut ini penjelasanya:

1. Managed DNS
Ini biasanya digunakan untuk sebuah web yang memerlukan web hosting dan mengharuskan untuk mengarahkan Name Server-nya ke hosting tersebut. Misal untuk membuat web di 000webhost, atau bisa juga untuk blog wordpress yg menggunakan hosting dari luar. Metode ini tidak cocok digunakan untuk blogger/blogspot yang menggunakan hosting default dari blogger/blogspot.
Cara setting untuk metode ini yaitu dengan mengisi pada kolom "Name Server 1 dan Name Server 2 dengan name server yg sesuai dengan hosting yang digunakan. Misal, bagi yang menggunakan hosting dari 000webhost maka untuk kolom "Name Server 1" disi dengan "ns01.000webhost.com" dan kolom "Name Server 2" disi dengan "ns02.000webhost.com". Kemudian klik tombol "Setup". Selesai

2. Zone Records
Zone records cocok digunakan bagi para pengguna blogger/blogspot. berikut ini cara setting untuk Zone Records

Pada kolom "Host" isikan dengan nama domain yg sudah km daftarkan, misal "www.namadomain.co.cc" (jangan lupa dikasih "www")
Untuk option "TTL" biarkan saja, gak perlu dirubah2
Pada option "Type" pilih yang "CNAME"
Untuk kolom "Value" isikan "ghs.google.com"

Langkah selanjutnya yaitu merubah settingan di blogger/blogspot caranya begini:

Login ke blogger/blogspot kemudian masuk ke menu "Setting-->Publishing"
Kemudian pilih "Switch to: • Custom Domain
Setelah itu klik pada "Already own a domain? Switch to advanced settings"
Kemudian isikan nama domain kamu yang baru pada kolom "Your Domain".

Selanjutnya klik tombol "Save Setting"

Selesai. Kalau berhasil (Settingnya sudah benar) maka domain kamu yang baru akan aktif dalam waktu antara beberapa jam sampai 2 hari. Jadi sabar aja menunggunya. Blog kamu akan tetap bisa diakses dengan melalui domain yang lama.

3. URL Forwarding
URL forwarding bisa digunakan untuk apa aja, bisa web ato blog. Tapi URL Forwarding ini hanya memforward domain yg baru (yang di co.cc) ke domain lama. Jadi domain lama akan 100% seperti semula tanpa ada perubahan apapun, cuma kita bisa mengakses web/blog kita dengan mengetikkan nama domain baru kita di browser. Jika menggunakan URL Forwarding maka yang terindex di google atau Search engine yang lain adalah tetap Domain kita yang lama.
Untuk setting URL Forwarding sangat mudah, kita hanya mengisikan data-data yang diminta dan disesuaikan dengan web/blog kita, seperti "Redirect to:, Page Title, URL Hiding, Meta Description dan Meta Keywords". Kita tidak perlu lagi mensetting domain di web/blog kita lagi.
Note: Metode ini tidak dianjurkan jika tidak terpaksa

Jadi kesimpulannya adalah:

Jika kamu memakai layanan blogger/blogspot maka gunakanlah "Zone Records"
Jika domainnya digunakan untuk web yg memerlukan hosting atau untuk wordpress maka gunakanlah "Manage DNS"
Jangan menggunakan "URL forwarding" jika tidak terpaksa. Misal untuk untuk blog dari multiply yang tidak support custom domain.

Sumber : TTB