Cara Memasang Scroll Bar Lengkap Pada Widget Di Blog

Cara Memasang Scroll Pada Widget Di Blog -Terkadang para bloggers sangat membutuhkan scroll bar agar tampilan widget menjadi minimalis, terlihat rapi, dan lebih enak di pandang. Oleh karena itu pada kesempatan kali ini saya ingin sekali memposting tentang cara memasang scroll pada widget tersebut. Pada umumnya widget bawaan dari blogger tidak terdapat scoll yang bisa di tampilkan, akan tetapi dengan adanya tambahan code HTML (overflow:auto;) maka secara otomatis scroll akan bisa tampil dengan sendirinya di widget Anda.

Saya menerapkan dua cara untuk memasang Scroll Bar tersebut, tanpa berlama - lama lagi langsung saja simak cara yang ada di bawah ini.

Cara 1.
Tanpa menggunakan HTML / Java script :
1. Pastikan widget yang telah di pasang.
2. Login ke akun blogger Anda.
3. Masuk di bagian Tata Letak.
4. Anda harus tau widget mana yang akan di beri scroll (Blog Archive), Untuk lebih jelas lihat pada gambar di bawah ini :

5. Setelah Anda mengetahui id widget tersebut, selanjutnya Anda masuk di bagian Template / pilih Edit HTML
6. Cari code HTML ( ]]></b:skin> ), bila and kesulitan gunakan (ctrl + F).
7. Jika sudah ketemu, letakan kode di bawah ini tepat di atas kode ]]></b:skin>.

#BlogArchive.widget-content{
height:230px;
width:auto;
overflow:auto; }

8. Selesai.

Cara 2.
Menggunakan HTML / Java script :
1. Login ke akun blogger Anda.
2. Masuk di bagian Tata Letak.
3. Tambahkan Gadget yang anda inginkan.
4. Pilih mode HTML / Javascript.
5. Tambahkan code HTML yang ada di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;"> -------KODE WIDGET------- </div>

6. Setelah itu klik simpan dan  lihat hasilnya.

Jika cara kedua kurang Efektif gunakan cara berikut :
1. Login ke akun blogger Anda.
2. Masuk di bagian Template / pilih Edit HTML.
3. Cari kode (<div class='widget-content'>) / (<div id='Widget ID Anda'>) dan perhatikan juga judul atau id yang ada pada widget yang ingin Anda beri scroll bar. bila Anda kesulitan mencari gunakan (ctrl + F).
4. Jika sudah ketemu, letakan kode ini (<div style='overflow:auto; width:auto; height:200px;'>) tepat di bawah.
5. Cari lagi kode di ini (<b:include name='quickedit'/>) bisanya tidak jauh dari kode yang di cari sebelum ini.
6. Jika sudah ketemu, tambahkan kode ini ( </div> ) tepat di bawah.
7. Untuk lebih jelas lihat gambar di bawah ini :

8. Selesai, jangan lupa di simpan dan lihat hasilnya.

Gimana sob? tinggal pilih aja mau pakai cara yang mana, sekian toturial tentang Cara Memasang Scroll Bar Lengkap Pada Widget Di Blog, semoa bermanfaat.

Share :

Tweet

✚

Related Post