Cara Membuat Scroll pada Widget Blog



Cara Membuat Scroll pada Widget Blog

Kenapa kita harus Membuat Scroll pada Widget Blog? tentunya bertujuan agar para pengunjung kita tidak terganggu dengan widget widget yang begitu panjang. Ya.. ada kalanya widget pada blogspot gak ada ukurannya, terlebih lagi widget yang kalian pasang gak memiliki tinggi yang pasti dan berubah ubah.

Contohnya nih widget Recent Comment (widget yang berisikan komentar komentar pengunjung kita) widget ini terkenal dikalangan para Blogger dan bisa dibilang widget ini cukup panjang. Ada lagi Widget Popular Post (berisi tentang artikel popular di blog tersebut).

Di artikel ini cara membuat scroll pada widget blog bangbil bagi jadi 2 yaitu Langsung dari Tata Letak dan dari Edit Template.

Cara Membuat Scroll Pada Widget (Mode HTML / Javascript)

1. Masuk ke menu Tata Letak pada Blogger lalu Tambahkan Gadget

2. Pilih HTML/Javascript

3. Dan tambahkan kode ini, di dalamnya.  
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
KODE_WIDGET_KAMU
</div>

Keterangan :
-KODE_WIDGET_KAMU = Kode widget yang ingin diberikan scroll
-200 = Tinggi widget 
-border:1px = Hapus kalo kamu ga pengen ada garis hitam

4. Simpan dan lihat hasilnya.

Cara Membuat Scroll Pada Widget (Mode Edit Template) 

1. Masuk ke Menu Tata Letak pada Blogger. 

2. Pastikan widget yang ingin diberi scroll sudah terpasang di blog kamu. 

3. Sekarang cari tau widget ID pada widget yang akan diberikan scroll. Cara mengetahui widget ID dengan menyentuhkan cursor pada Tulisan "Edit". Contohnya seperti gambar dibawah ini menampilkan nama widget ID yaitu PopularPost2

Widget ID



4. Setelah ID widget diketahui masuk ke bagian Template lalu klik Edit HTML

5. Cari kode ]]></b:skin> untuk memudahkan pencarian gunakan CTRL+F.

6. Dan letakkan kode dibawah ini, tepat diatas kode ]]></b:skin>
#PopularPosts2 .widget-content{
height:230px;
width:auto;
overflow:auto;
}

Keterangan : 
-PopularPosts2 = ID widget kamu  ganti dengan ID widget  yang kamu inginkan.
-230 = Tinggi ganti dengan tinggi yang kamu inginkan.

7. Simpan dan lihat hasilnya.. 


Menulis dari berbagai pengalaman pribadi, jika bermanfaat bagi kalian silahkan share. Connect With Me..