Thursday, May 19, 2011

Menambahkan Fungsi Scroll pada Daftar Link

Daftar Link ialah sebuah list widget yang berisikan kumpulan link, misalnya link kerabat,link download,serta link blog atau website favorite kita, Biasanya pada widget daftar link yang memang bawaan dari blogger tidak memiliki opsi scroll. maka dari tu saya akan memberikan sebuah tutorial sederhana namun menurut saya bermanfaat bagi kita semua, untuk menyingkatkan daftar link yang mungkin kita punya banyak dan panjang sekali ke bawah serta membuang - buang tempat .
Ingin tahu cara membuat nya, simak cara berikut ini,








  • Login ke Blogger
  • Masuk ke Rancangan
  • Pada Elemen Laman langsung saja tambah Gadget
  • Pilih Daftar Link
  • Jangan lupa masukkan link - link yang akan anda masukkan
  • langkah ini telah selesai, kita akan masuk ke langkah selanjutnya,
Pada langkah ini kita akan menambahkan script fungsi dari scrollnya,
  • Lanjut ke Edit HTML
  • Jangan lupa centang Expand Template Widget
  • Cari script di bawah ini,




<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='LinkList2' locked='false' title='Link Kerabat' type='LinkList'>

<b:includable id='main'>



<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content'>

<ul>

<b:loop values='data:links' var='link'>

<li><a expr:href='data:link.target'><data:link.name/></a></li>

</b:loop>

</ul>


  • Tulisan yang berwarna Abu - Abu ialah nama daftar link yang saya punya, jadi silahkan cari nama Daftar Link yang telah anda buat tadi,
  • Setelah script yang anda cari tadi ketemu dan  mirip dengan script diatas, sekarang silahkan anda tambahkan pada script tersebut script - script yang berwarna abu - abu berikut ini,




<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList2' locked='false' title='Link Kerabat' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>


  • Kode berwarna Abu - Abu adalah Script Scroll yang harus anda tambahkan, untuk width sudah menyesuaikan dengan lebar widget yang anda punya, untuk Height  Scroll, silahkan anda atur sesuai dengan keinginan anda.
  • Sekian tutorial yang dapat saya berikan semoga bermanfaat.

No comments:

Post a Comment