Wednesday, October 3, 2012

Cara Membuat Scroll Pada Widget Blog




Setelah sebelumnya postingan wwbisnis yang membahas cara memberi scroll pada arsip blog, kali ini postingan wwbisnis akan kembali membahas tentang scroll atau baris penggulung, khususnya cara memberi scroll pada widget yang ada disidebar ataupun footer blog.



Scroll atau baris penggulung dalam kotak yang berwarna merah tersebut adalah contoh scroll yang ditambahkan pada widget blog. Pemasangan scroll tersebut dapat menghemat pemakaian tinggi ataupun lebar yang digunakan suatu gadget dalam blog.

Dalam membuat scroll pada widget blog, ada banyak cara yang dapat kita praktek-kan. Namun kali ini wwbisnis akan membagikan cara yang tidak sulit, yakni membuat scroll pada widget blog dengan cara menambahkan kode CSS didalam template.

Berikut cara membuat scroll pada widget blog :

1. Login Ke akun Blogger sobat.

2. Jika sudah berada di Dasbor Blogger, Pilih Template. Kemudian pilih lagi Edit HTML.

3. Centang kotak Expand Template widget, Kemudian cari nama / judul widget yang akan diberi scroll (Nama / judul widget seperti popular posts ataupun widget lainnya).

4. Cari kode <div class='widget-content'>
yang letaknya tepat dibawah nama / judul widget tersebut.

5. Selanjunya tambahkan kode <div style='overflow:auto; width:ancho; height:100px;'> 
(angka 100 adalah tinggi widget, silahkan sesuaikan dengan keinginan sobat) tepat dibawah kode yang dicari pada nomor 4 tadi.

6. Sedikit kebawah, cari lagi kode  <b:include name='quickedit'/>
 , jika sudah ketemu tambahkan kode </div>  tepat dibawahnya.
penggabungan kode tersebut kurang lebih seperti ini;

contoh gambar


7. Kode dalam kotak yang berwarna merah adalah kode yang ditambahkan, sedangkan kode dalam kotak yang berwarna biru adalah nama / judul widget.

8. yang terakhir Klik Save / Simpan.

Mudah - mudahan postingan cara membuat scroll pada widget blog ini dapat bermanfaat bagi sobat blogger sekalian.

Edit; wawansurya
Sumber;
www.affiliate-waones.com

Artikel Menarik Lainnya :



No comments:

Post a Comment