ads

header ads

Membuat Scrollbar Berwarna


Ketika kita ingin membuat bloglits atau blogroll di elemen blog, maka secara default sudah tersedia di blogger.com. Akan tetapi banyak alternatif yang bisa kita lakukan, dengan tujuan untuk mempercantik blog kita tentunya; bisa dengan menggunakan kode marquee (menu berjalan), menu dropdown, atau dengan halama berfungsi scroll.

Nah, seperti yang ada di blog ini, yakni tentang "LINK & Friend's" dan "SECUIL TUTORIAL", postingan kali ini saya sharing mengenai pembuatan Scrollbar dengan dibumbui warna. Proses pembuatannyapun relatif mudah. Berikut langkah-langkahnya.

Note : Ada dua varian yang bisa kita lakukan untuk pembuatan Scrollbar ini.



  • Untuk scrollbar di dalam postingan, kita dapat membuatnya secara otomatis dengan menambahkan kode css. Insya Allah varian ini akan kita sharing pada postingan berikutnya.

  • Membuat scrollbar di elemen halaman blog, baik di sidebar maupun bottom-footer. Dan varian ini yang akan kita bahas kali ini.


Oke. Langsung saja ke TKP.

Pertama :
Masuk DASBOR, klik TATA LETAK, lalu TAMBAH GADGET.
Kedua :
Letakkan kode berikut di elemen halaman tersebut.


<div style="scrollbar-3dlight-color:#ffd700;
scrollbar-arrow-color:#ff0;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#ffa500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#ff69b4;
scrollbar-shadow-color:#f0f;
scrollbar-track-color:#800080;overflow:auto;width:210px;height:190px;">

<img border="0" src="http://i437.photobucket.com/albums/qq97/syahdu140208/icon%20address/animated_favicon1-10.gif"/>&#160;<a href="http://rumahmakalah.blogspot.com/" target="_blank">Gudang Makalah Blogspot</a>

<img border="0" src="http://i290.photobucket.com/albums/ll256/angkatan2006/zaka.gif"/>&#160;<a href="http://www.zaka2112.tk/" target="_blank">Debit Mastercard Gratis</a>


</div>


Ketiga : Jangan lupa di SAVE

Catatan :

  • Kode yang berwarna merah adalah kode warna, silahkan sobat ganti dengan yang sobat inginkan. Untuk melihat kode warna, silahkan klik di sini.

  • Kode width:210px;height:190 menunjukkan lebar dan tinggi Scrollbar. Sobat bisa mengubahnya sesuai dengan templet blog sobat.

  • Kode yang dicetak tebal adalah isi blogroll atau link sobat. Silahkan diubah sesuai dengan yang sobat inginkan. Link yang berwarna ungu adalah url ikon link (silahkan ubah sesuai keinginan, dan untuk membuat ikon, baca tutorialnya di sini.), yang berwarna hijau adalah link yang dituju, dan teks yang berkedip adalah nama link yang akan ditampilkan.

  • Contoh di atas hanya menampilkan 2 link atau blogroll saja, silahkan sobat menambahnya sesuai keinginan.



Selamat mencoba dan sukses selalu....