3 Cara Membuat Scroll Pada Widget Blog

Cara membuat scroll pada widget blog- (untuk gambaran sebuah scroll kira-kira seperti gambar disamping), fungsi scroll pada widget ini adalah untuk membuat tampilan widget anda menjadi lebih pendek, karena widget blog anda pendek maka halaman blog anda menjadi hemat tempat, rapi dan tidak membutuhkan space yang luas. Ada 3 cara dalam membuat scroll pada widget blog ini, yang intinya adalah menggunakan perintahkode overflow. Jika anda menambahkan kode overflow ini ke dalam widget anda, maka ini akan membentuk sebuah scroll. Oke sobat anda bisa coba dengan menggunakan notepad. Berikut langkah-langkah cara membuat scroll pada widget blog yang saya maksudkan. 

Cara Pertama 
1. Silahkan login ke dalam akun Blogger anda, masuk ke Design, Page Element. Kemudian tambahkan widget baru dengan klik add a gadget, lalu pilih add html/javascript 

2. Silahkan beri judul (tidak diberi judul juga tidak masalah) dan pada pada bagian content letakkan kode seperti ini 

<div style="overflow:auto; width:100%px; height:230px; padding:10px; border:1px solid #999999;">

..................................

</div>

3. Kemudian silahkan anda letakkan kode widget diantara kode div diatas (tanda titik titik panjang) 

Cara Kedua 
1. Silahkan login ke dalam akun Blogger anda, masuk ke Design, kemudia masuk ke Edit Html. Lalu cari nama widget atau nomor HTML yang hendak anda jadikan scroll. Dalam hal ini paling mudah anda memberikan Judul widget anda, tujuannya agar mudah dicari pada halaman Edit HTML di template anda. Saya contohkan di sini adalah widget default Archive blog. 
2. Tambakahan kode CSS berikut ini diatas ]]></b:skin>

#BlogArchive .widget-content{

height:230px;

width:auto;

overflow:auto;

}

3. Kode yang berwarna merah harus sama dengan nama/judul widget yang hendak anda jadikan scroll. 

Cara Ketiga 
1. Silahkan masuk pada Edit html template seperti cara kedua, silahkan anda cari widget yang hendak anda berikan scroll. Lalu pada bagian bawah dari kode widget tersebut cari kode div class='widget-content' 

2. Tambahkan kode style='overflow:auto; height:230px' disamping kode div class='widget-content' Sehingga menjadi 
<div class='widget-content' style='overflow:auto; height:230px'>

Gambar di bawah ini adalah contoh sebelum saya memakai scroll dan sesudah saya memakai scroll

Sebelum memakai scroll:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Sesudah memakai scroll:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Nah itulah 3 cara paling mudah dan sederhana bagaimana cara membuat scroll pada widget blog anda, silahkan anda pilih menurut anda cara yang paling mudah dan biasa anda lakukan. Selamat mencoba...