Cara Membuat Dan Menambahkan Scroll Pada Widget Blog

Cara Membuat Dan Menambahkan Scroll Pada Widget Blog - Cara Membuat Dan Menambahkan Scroll Pada Widget Blog - Sebelumnya saya pernah posting mengenai Cara Menambahkan Scroll Pada Arsip Blog dan Cara Membuat Dan Memasang Scroll Pada Label Kategori Blog Masih dalam hal yang sama, kali ini saya akan postign mengenai "Cara Membuat Dan Menambahkan Scroll Pada Widget Blog" yah, anda mau pake cara yang mana aja boleh, silahkan anda coba praktekan cara cara tersebut satu persatu, hmm..

Yang saya tahu soal scroll ini, dengan Cara Membuat Dan Menambahkan Scroll Pada Widget Blog, blog anda akan tertata rapih, tidak memerlukan banyak ruang pada template, seperti pada widget arsip, label, dll, yang apabila diklik akan memanjang kebawah, kurang lebihnya seperti itulah peran aktif scroll ini. Cara Membuat Dan Menambahkan Scroll Pada Widget Blog ini ada dua versi, yaitu versi pertama dengan Edit HTML Template, dan versi yang kedua dengan Tanpa Edit HTML Template. Baik, sekarang, mari kita lakukan.

Cara Membuat Dan Menambahkan Scroll Pada Widget Blog :

• Pertama anda harus tahu widget mana yang akan diberi scroll caranya, silahkan anda masuk ke Menu Tata Letak sentuh cursor di tulisan edit pada widget yang akan anda beri scroll. Pada bagian bawah akan terlihat nama widget, lihat pada gambar di bawah ini sebagai contoh, nama widget-nya adalah PopularPosts1.

• Setelah anda mengetahui nama widgetnya, maka anda masuk ke Menu Template dan pilih Edit HTML.
• Jangan lupa centang pada bagian kotak Expand Widget Template.
• Lalu cari kode di bawah ini, agar lebih mudah gunakan tombol ctrl+F.

]]></b:skin>

• Masukan kode berikut tepat di atas kode ]]></b:skin>

#PopularPosts1 .widget-content{
height:230px;

width:auto;

overflow:auto;

}

width:auto;

overflow:auto;

} 

• Ganti tulisan berwarna merah dengan kode widget yang akan anda beri scroll
• Terakhir, Save dan lihat hasilnya.

Anda bisa juga menggunakan ini, masih dengan cara Edit HTML namun berbeda dalam penempatan kodenya, silahkan disimak.

• Cari kode "Title" yang ingin di buat scroll, misalnya disini saya ambil contoh widget dengan nama "My Blogroll" (gunakan Control F atau F3).
• Perhatikan kode yang ada di bawah, kurang lebih seperti ini : 

.....................................................................<b:widget id='BlogList1' locked='false' title='My Blogroll' type='BlogList'><b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'>
............................................................................ 

• Perhatikan yang ber warna merah
• Anda Tinggal menambahkan saja code dibawah ini :

style='overflow:auto; height:100px

 Sehingga keseluruhannya akan tampak seperti ini : 

.....................................................................<b:widget id='BlogList1' locked='false' title='My Blogroll' type='BlogList'><b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'style='overflow:auto; height:100px'>............................................................................

• Selesai, Simpan Template dan lihat hasilnya
• Untuk Height dapat di ganti sesuai ukuran tinggi yang diinginkan. 100px, 150px, 250px, dan sebagainya

Adapun Cara Membuat Dan Menambahkan Scroll Pada Widget Blog Dengan tanpa Edit HTML Template adalah sebagai berikut.

Anda Hanya Perlu menambahkan sedikit kode berikut pada widget yang akan diberi scroll

<div style="overflow:auto; width:100%px; height:230px; padding:10px; border:1px solid #999999;">

"kode widget"

</div>

Silahkan anda sesuaikan sendiri dengan mengatur lebar(width:100%px)dan tinggi (height:230px;)Serta warnanya (#999999)atau apalah, sesuai keinginan anda.

Sekian - Cara Membuat Dan Menambahkan Scroll Pada Widget Blog

Semoga tutorial mengenai Cara Membuat Dan Menambahkan Scroll Pada Widget Blog ini bermanfaat, selamat mencoba,.