Cara Menambahkan/Membuat Scroll Widget Blog

Hallo semua sobat saya  Hari ini saya inigin Berbagi tentang bagaimana Cara membuat Scrol Pada Widget Blog. Apa sih scroll itu? Dalam bahasa indonesia artinya gulung atau digulung. Jadi widget yang dipasang kode scroll bisa digulung dan akan menghemat tempat. Yang saya maksud dengan widget Blog disini adalah widget bawaan blogger bukan widget yang ditambahkan dengan add HTML/Javascript tapi yang langsung ada dipilihan widget blogger. Faham? atau malah puyeng? Sama hehehe... Biar jelas langsung lihat gambar ini deh

Cara membuat Scrol Pada Widget Blog

Cara membuat Scroll Pada Widget Blog

Pastikan sobat sudah mempunyai blog di blogspot (yaiyalah)
Setelah login di blogger dan masuk dashbor klik rancangan trus edit laman (lihat gambar)

Dasbor Blog

Disini yang akan buat contoh atau eksperimen adalah widget Daftar Blog atau Blog List, tambahkan dulu widget ini kalau sobat belum menambahkannya dengan cara add widget / tambah widget cari Daftar Blog / Blog List.

Setelah sobat tambahkan dan simpan widget tadi saatnya otak-atik pada HTMLnya. Pergi ke rancangan dan klik edit HTML.
Dasbor Blog

Lanjut centang pada Expand Template Widget kemudian tekan CTRL + F pada keyboard untuk memudahkan pencarian kemudian pastekan kode ini widget id='BlogList1'.

Pencarian Kode HTML


Tambahkan kode ini <div style='overflow: auto;background-color:#C7DFB5; margin: 0px auto; padding: 5px; height: 100px;width:94%;text-align: left;'> diantara kode </b:if> dan <div class='widget-content'> maka akan menjadi seperti ini

Keterangan kode :  
  • background-color:#C7DFB5 adalah kode warna background yang bisa sobat ganti sesuai keinginan
  • height: 100px adalah ketinggian kotak scrol semakin besar nilainya semakin tinggi kotaknya
  •  width: 94% merupakan persentase lebar kotak dari lebar widget
  •  text-align: left posisi text widget bisa diganti dengan "center" ataupun "right".
"Udah selesai?" Belum sob masih ada kode yang perlu disisipkan yaitu penutup </div> sisipkan kode ini diatas atau sebelum kode</b:includable> </b:widget> kode ini masih dalam area BlogList1 diatas.
Kemudian simpan template Sobat.
Untuk memaksimalkan hasil dari eksperimen ini atur widget sobat seperti ini


Seperti apakah hasil dari eksperiman kita kali ini? Lihat sebelah kanan di blog Berbagi Yang Kudapat pada widget blog sahabat.

Eksperimen ini bisa sobat terapkan pada widget-widget blogger lainnya juga lho, seperti recent post, recent comment de el el.

apabila anda kesulitan silah di tanya aja :D
saya senang jika anda meninggalkan jejak