Ada kalanya widget pada Blogspot anda tidak memiliki ukuran yang anda
inginkan. Khususnya jika widget tersebut memiliki ukuran yang terlalu
tinggi. Bagaimana ya cara mengatasi hal tersebut? Salah satunya dengan
cara memberikan scroll pada widget tersebut.
Bagaimana Cara Menambahkan Scroll pada Widget Blogspot ini? OK, silakan simak terus artikel pada kesempatan kali ini.
Jika dilihat dari cara memasangnya, widget Blogspot terbagi menjadi
Widget Bawaan Blogspot dan Custom Widget (widget pada mode
HTML/Javascript). Widget bawaan ini adalah widget yang memang sudah
disediakan oleh Blogspot itu sendiri. Sedangkan Custom Widget maksudnya
adalah widget yang dibuat/dipasang sendiri oleh user dengan menambahkan
dan mengedit kode HTML/Javascript, karena widget tersebut tidak
disediakan oleh Blogspot. Tentunya untuk dapat menambahkan scroll pada
kedua jenis widget ini caranya akan berbeda. Namun pada intinya untuk
menambahkan scroll pada widget ini yaitu dengan memberi sedikit tambahan
kode HTML overflow:auto;
OK, silakan langsung saja simak langkah-langkahnya berikut ini.
- Untuk widget standar/bawaan blogspot atau widget tanpa pengeditan kode HTML.
1. Pastikan widget telah dipasang pada Blog anda.
2. Login ke akun Blogger anda.
3. Masuk ke Bagian Tata Letak.
4. Katahuilah nama widget id pada widget yang akan diberikan scroll.
Caranya, sentuhkan corsor pada tulisan edit Tata Letak widget tersebut
dan lihat di bagian sudut kiri bawah monitor, disitu terdapat tulisan
yang menampilkan nama widget id dan sebagainya. Perhatikan gambar
dibawah, contoh berikut menampilkan nama widget id yaitu PopularPosts2.
5. Setelah widget id diketahui, maka selanjtnya anda masuk ke bagian Template lalu klik Edit HTML.
6. Dengan tombol ctrl+F, carilah kode ]]></b:skin> dan letakan kode berikut ini diatas kode ]]></b:skin>.
#PopularPosts2 .widget-content{
height:230px;
width:auto;
overflow:auto;
}
7. Ubahlah kode berwarna merah dengan widget id yang anda inginkan, dan
kode berwarna biru dengan ukuran tinggi yang anda inginkan.
8. Setelah selesai, silakan akhiri dengan klik Simpan Template. Berikut contoh hasilnya.
- Untuk widget mode pengeditan HTML/Javascript.
1. Login ke akun Blogger anda.
2. Masuk pada bagian Tata Letak.
3. Klik tambahkan gadget dimanapun anda inginkan.
4. Pilih mode HTML/Javascript.
5. Yang perlu anda lakukan adalah hanya menambahkan sedikit kode HTML berikut pada kode HTML widget.
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
-------KODE WIDGET-------
</div>
6. Masukan kode HTML widget pada tulisan berwarna merah. Ubahlah
tampilan widget terutama pada kode berwarna biru dengan ukuran tinggi
widget yang anda inginkan.
7. Setelah selesai, akhiri dengan klik Simpan. Berikut contoh hasilnya.
Silakan lihat hasilnya pada Blog anda, Semoga berhasil.
- Blogger