Cara Menambahkan Scroll pada Widget Blogspot

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.

Share this