Cara Mudah Membuat Scroll Pada Label/Widget Blog

Cara Mudah Membuat Scroll Pada Label, Kategori Blog, Widget Blog | Share kali ini mengenai Cara Membuat Scroll Pada Label/Widget Blog, mungkin judul artikel ini tidak asing lagi buat para blogger, dan banyak sekali yang sudah mengetahui trik membuat scroll pada label atau widget di sidebar, namun banyak puka yang belum mengenalnya sama-sekali, tutorial kali ini yang gunanya untuk tampilan jadi menarik, ringkas dan kelihatan rapi pada widget sobat, dan juga supaya tidak kelihatan berantakan widget yang sobat pasang, dengan memakai scroll, blog akan terlihat rapi, dan pengunjung juga akan betah lama-lama di blog sobat. Untuk template yang biasa scroll pada table tentunya tidak ada, kecuali template yang sudah dimodif sedemikian rupa. Tapi sobat jangan kwatir semua itu bisa sobat miliki sekarang dengan mudah. Sudah jelas bukan penjelasannnya? Untuk demonya sobat bisa lihat sendiri di bagian sidebar saya yang memakai scroll, contohnya seperti Link Exchange (di sidebar), untuk lebih memperjelas tujuan tutorial saya kali ini, lihatlah gambar di bawah ini :

 Nah gk pake lama langsung simak dibawah ini. Cekidot….

Berikut ini langkah-langkah Cara Membuat Scroll Pada Label, Kategori Blog, tau widget blog:
1. Masuk ke Blogger.com
2. masuk ke Template --> edit HTML
3. Kemudian Cari kode ]]></b:skin> (Gunakan tombol CTRL+F, untuk mempercepat, dan memudahkan proses pencarian)
4. Copy paste kode dibawah ini, tepat di atas kode ]]></b:skin>

#Label1 .widget-content{ height:150px; width:auto; overflow:auto; } /* Scroll pada Label */

5. Simpan template, dan semoga berhasil

Nah tutorial di atas sudah berhasil, lalu bagaimana ya cara membuat scroll pada widget yang lainnya ?, langsung saja simak, penjelasannya dibawah ini :
1. Masuk seperti tutorial di atas masuk ke edit HTML -->
2. Lalu cari nama widget sobat yang mau menggunakan scroll, untuk memperjelas lihat gambar dibawah ini :

Pertama sobat ambil nama judul widget yang mau menggunakan scroll, contohnya seperti di atas ambil nama "Popular Posts" nya saja.

3. Jika sudah di copy judul widget yang mau menggunakan scroll, selanjutnya masuk ke edit HTML, jika sudah, tekan tombol CTRL+F lalu copy judul widget yang mau menggunakan scroll tadi, jika sudah ketemu, simaklah gambar dibawah ini :

Sekarang sobat sudah ada gambaran kan ?,  pada tutorial di gambar di no 3. ambil nama kode "PopularPosts1" copy kode tersebut, awas jangan sampai salah antara huruf besar dan yang kecilnya, jika salah maka scrollnya tidak akan bekerja/scroll tidak akan muncul.

4. Selanjutnya cari kode ]]></b:skin> lalu copy kode dibawah ini tepat di atas kode ]]></b:skin> dan terapkan sesuai nama HTML widgetnya, simaklah kode dibawah ini :

#PopularPosts1 .widget-content{ height:150px; width:auto; overflow:auto; }

Dan hasilnya seperti gambar dibawah ini :

kalo yang tadi itu Label1, sekarang PopularPosts1 jadi yang membedakan scroll pada widgetnya yaitu dengan nama kode didepan tanda pagar "#" contohnya #PopularPosts1, #Label1, atau HTML1, dan seterusnya. Untuk mengatur tingginya bisa sobat atur tadinya 150px menjadi 180px, 120px, 100px, dan seterusnya, sesuai kebutuhan sobat.

Tutorial kali ini cukup segini dulu, jika ada yang mau ditanyakan, silahkan berkomentar dibawah, jika sudah berhasil jangan lupa kasih kenang-kenangan kepada saya dengan cara berkomentar, hehe :D

Tweet

Unknown pada 7/28/2013