Cara Membuat Scroll Box Pada Arsip Blog

Membuat tampilan blog keren memang susah susah mudah, juga perlu di ingat sejauh mana hal ini akan berefek pada kepentingan template user friendly. User friendly template blog yang saya maksud ini adalah template yang memenuhi beberapa kriteria, misalnya seberapa ringan loading halaman template anda, template blog simple/sederhana, template blog yang indah enak dilihat, template blog dengan widget yang proporsional dan yang tak kalah penting template blog yang SEO friendly dsb. Hmm..susah juga ya, menggabungkan itu semua ke dalam template blog kita, toh hingga saat ini saya akui saya juga belum bisa menggabungkan semua itu ke dalam blog culun saya ini, yang paling terasa adalah kenapa blog saya begitu berat ngeloadnya...pening..hehehe..

sesuai dengan judul diatas saya akan share bagaimana 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 widget pada 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'>

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

Sumber : http://lukmanbayz.blogspot.com/