Cara membuat scrolling bloglist pada blog



Scrolling bloglist  adalah seperti yang  terdapat pada sidebar blog ini. Mempunyai butang untuk memasukkan link, memaparkan hanya senarai blog, mengikut update dan tidak menggunakan banyak ruangan. Kebanyakan blog list yang ada adalah panjang jadi dengan menggunakan cara ini adalah lebih mudah untuk mengaturnya.

Untuk membuatnya:
  • Masuk ke Blogger
  • Pada design pilih --page elements-add a gadget--bloglist
  • Bagi dashboard baru pilih Layout...Add a Gadget...bloglist
  • Sebelum itu backup template terlebih dahulu.
  • Kemudian masuk ke design—edit html-expand template widget
  • untuk dashboard baru pilih template...Edit HTML....beri kan tanda pada expand template widget
  • Kemudian cari code html yg dibawah,yg bertanda dengan warna merah  adalah berbeda mengikuti petunjuk yg ada pada widget.

<b:widget id='BlogList1' locked='false' title='Blog List' type='BlogList'>
<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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Kemudian tambahkan kod berwarna biru seperti dibawah ini.

<b:widget id='LinkList1' locked='false' title='Blog Roll' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>

<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"' style='overflow: auto; display: block; overflow-x: no; overflow-y: scroll; height: 300px; width: 160px;'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div> </div>
</b:includable>
</b:widget>

Kemudian save template
#Lebar dan tinggi widget boleh diubah pada bahagian teks warna merah.
Kemudian save template

Semoga berhasil.........................



Artikel Terkait:

0 komentar:

Post a Comment