Membuat Scrollbar Pada Widget Tertentu -
Sebenarnya Judul ini masih membingungkan buat sobat semuanya Scrollbar
pada widget tertentu ? maksudnya apa yah. Nah saya akan menjelaskan
secara detail maksud dari widget tertentu tersebut. Namun saya akan
menceritakan kenapa saya membuat postingan ini, sebenarnya postingan ini
sudah pernah ada yang post hanya saja mungkin sobat yang lain pada
belum pernah menemukan hal yang unik ini.
Dan ini merupakan Request dari teman blogging juga yakni Opick T F, begini penampakannya pada komentar postingan saya :
Jadi sobat Opick T F meminta kepada saya bagaimana caranya membuat scrollbar pada Widget Blog Star atau widget Daftar Blog
Jadi maksud dari Scrollbar untuk widget tertentu yakni seperti widget yang disediakan blogger yakni Daftar Blog, Daftar Link, Newsreel dan lain sebagainya, jadi jika kita menggunakan widget ini pasti tidak menyediakan scrollbar untuk meghemat tampilan blog.
Cara membuatnya yakni dengan menyediakan kode berikut dan menambahkannya kepada widget tertentu tersebut :
style='overflow:auto; height:200px'
Kalau untuk tinggi scroll anda bisa mengganti tulisan warna merah diatas sesuai dengan kebutuhan anda.
Untuk itu saya akan memberi tahu cara membuatnya :
- Pertama Sekali Login ke Dasbor anda
- Kemudian menuju ke Template >> Edit HTML >> Centang Expand Template Widget
- Kemudian Cari atau CTRL + F dari keyboard kata kunci Nama Widget sobat tersebut misalkan dalam blog saya yakni "Blog Star" tanpa tanda petik.
- Kemudian akan tampil kode seperti ini :
<b:widget id='BlogList1' locked='false' title='Blog Star' type='BlogList'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if>
<div class='widget-content'> <div class='blog-list-container' expr:id='data:widget.instanceId+"_container"'> <ul expr:id='data:widget.instanceId + "_blogs"'> <b:loop values='data:items' var='item'> <li expr:style='data:item.displayStyle'> <div class='blog-icon'> <b:if cond='data:showIcon == "true"'> <input expr:value='data:item.blogIconUrl' type='hidden'/> </b:if> </div>
- Kemudian tulisan yang berwarna merah tersebut merupakan Nama Widget yang kita search atau CTRL + F tadi
- Untuk menambahkan scroll maka kita menambahkan kode yang paling atas tadi yakni style='overflow:auto; height:200px' di dalam kode yang berwarna hijau tersebut
- Menjadi seperti ini : <div class='widget-content' style='overflow:auto; height:200px'>
- Kemudian SIMPAN Template sobat dan lihat hasilnya.
