Pages

Sabtu, 25 Agustus 2012

Membuat Scrollbar Pada Widget Tertentu

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.

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

Sumber : http://www.adie-konoe.blogspot.com

0 komentar:

Posting Komentar