Cara Membuat Scroll Pada Widget Blog

Cara Membuat Scroll Pada Widget Blog untuk widget seperti Arsip Blog, populer posts, kategori/label, artikel terbaru dan lain-lain. Scroll berfungsi untuk mempersingkat tampilan dan juga menghemat tempat. Scroll juga membuat halaman blog menjadi lebih cepat untuk dibuka. Untuk lebih jelasnya silakan lihat gambar dibawah ini.

Dari gambar diatas, terlihat Arsip Blog terdapat banyak artikel dan panjang sehingga memakan tempat dan memperbanyak tampilan pada blog. Ini Bisa dipercantik agar lebih minimalis dan tidak membuat penuh tampilan blog. Yaitu dengan membuat Scroll. Ikuti langkah-langkah untuk membuat scroll pada widget blog dibawah ini.

Cara Membuat Scroll di Blog

1. Login ke Blogger

2. Dari halaman dasbor Pilih pengaturan Template.

3. Selanjutnya Klik Edit Html.

4. Dan Cari tulisan widget yang akan kita beri scroll. Misalnya widget dengan judul Arsip Blog maka kita cari Arsip Blog. Untuk memudahkan pencarian Tekan control F di keyboard dan masukan tulisan Arsip Blog .

5. Jika sudah ketemu maka kode lengkapnya seperti dibawah ini.

<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'>

6. Sekarang Copy BlogArchive1 ke Notepad dan tambahkan kode lengkap seperti dibawah ini di Notepad.

#BlogArchive1 .widget-content{
height:200px;
width:auto;
overflow:auto;

}

7. Selanjutnya cari kode ]]></b:skin>

8. Copy Kode diatas dan letakkan di Atas kode ]]></b:skin>

Contoh:

#BlogArchive1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

]]></b:skin>

Catatan: height:200px itu adalah tinggi kotak scroll nya, silakan diganti sesuai keinginan. misalnya jadi height:400px; 

9. Terakhir Klik Preview untuk melihat hasilnya. dan ini contoh hasilnya jika berhasil

Jika Arsip Blog sudah ada scroll nya barulah di Save. Selesai. 

Catatan: Jika yang ingin diberi Scroll adalah populer posts, kategori/label, artikel terbaru atau lain-lain. Maka cari dulu tulisan yang akan diganti.

Misal Populer Post maka cari di edit html Populer Post. Jika sudah ketemu, copy kode SETELAH tulisan <b:widget id='  terus lanjutkan ke langkah 6 Seperti diatas. Untuk yang lain juga seperti itu caranya. Silakan dan selamat mencoba :)

Terimakasih dan Semoga Bermanfat.