Cara Menambahkan Scroll Pada Widget Blog

pic taken from pexels

Holla!

Kemarin, salah satu sahabat saya, meminta saya untuk membuatkan tutorial Cara Menambahkan Scroll Pada Widget Blog. Sebagai teman yang baik dan cantik *abaikan* maka, saya langsung memenuhinya.

Seperti biasa, tutorial-tutorial yang saya sampaikan di blog ini merupakan tutorial yang saya dapatkan dari internet, namun perlu diingat, saya tidak copy paste. Jadi, tutorial yang saya sampaikan sudah saya terapkan sendiri dan juga saya modifikasi agar lebih mudah dipahami. 

Seperti tutorial kali ini, saya juga telah menerapkannya pada blog saya pagi ini. Setelah mencoba sana sini dan mulai mengerti, saya mulai menuliskannya. 

Baiklah, tidak usah banyak basa basi, mari kita lihat tutorial Cara Menambahkan Scroll Pada Widget Blog.

1. Masuk ke blogger.com > template - edit html
2. Sekarang, mari kita cari dahulu ID widget yang kita inginkan untuk diberi scroll. Jadi, setiap widget yang ingin diberi scroll harus didefinisikan sendiri. Untuk mencari tahu ID widget tersebut silakan klik lompat ke widget, kemudian cari ID yang kita inginkan. Misalnya, saya mencari popular post. Perhatikan gambar di bawah ini.  *ingat tak perlu klik id widget, karena kita hanya melihat saja*                                                                            
   
3. Cari kode </b:skin> dengan cara tekan CTRL+F pada keybord kemudian pastekan kode di bawah ini di atas </b:skin>.                                                                                                                                                                                                                                                                     
#PopularPosts1 .widget-content{ height:230px; width:auto; overflow:auto; }
                                                                                                                                                                                                                                                                            Contoh seperti gambar di bawah                                                                                                      

 Gambar di atas contoh membuat scroll pada popular post dan arsip blog. Untuk menentukan panjang scroll silakan ganti pada kode height: 230px ganti dengan, misalnya 100px;
4. Simpan

Saya juga akan memberikan tutorial cara menambahkan scroll pada widget  mode pengeditan HTML/Javascript.

Misalnya, blog kita tergabung dalam berbagai komunitas dan tentunya dengan sangat bangga kita mencantumkan banner komunitas tersebut dalam blog. Namun, apa yang terjadi jika banner tersebut banyak? Tentunya, mengganggu widget-widget kita yang lain dan memenuhi sidebar blog. Nah, dengan cara menambahkan scroll tentunya akan lebih efisien.

Pertama masuk ke tata letak dan klik  add gadget - HTML/Javascript kemudian pastekan kode di bawah ini

<textarea><div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;"> KODE WIDGET </div>

tulisan KODE WIDGET silakan diganti dengan kode banner teman-teman, kemudian simpan.

*keterangan : Untuk mengganti tinggi widget silakan ganti pada height: 200px

Nah, mudah bukan? Ada pertanyaan? Silakan tinggalkan di kolom komentar :)