Cara Menambahkan Scrool Pada Label Kategori

   

Beberapa waktu lalu saya pernah share tentang memasang fungsi scrool pada Arsip blog, pada kesempatan  ini saya akan share tentang menambahkan fungsi scrool pada label atau kategori. Caranya sangat mudah sekali dan hanya menambahkan beberapa script saja tampilan label kategori pada blog sobat akan lebih menarik, trik ini sangat berguna untuk menghemat tempat pada blog sobat,



Ingin tahu cara untuk memasangnya? Mari ikuti langkah-langkah memasang fungsi scrool pada label atau kategori

 

Seperti biasa sobat harus login ke Blogger



Pilih Design → Edit HTML



Klik tulisan Download Template Lengkap



Silahkan save dulu template tersebut, untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula



Beri tanda centang pada kotak di samping tulisan Expand Widget Templates



Kemudian cari kode seperti dibawah :



Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

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

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'>

<data:label.name/>

</span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

<data:label.name/>

</a>

</b:if>

<span dir='ltr'>(<data:label.count/>)</span>

</li>

</b:loop>

</ul>

Untuk menambahkan Scroll Copy kode berikut :

<div style='overflow: auto; width: 175px; height: 200px; text-align: left;'>

dan

</div>

Dan letakkan kode tadi tepat di bawah kode berikut :



<div class='widget-content'>



dan di bawah kode ini:



<ul>



Maka hasil akan menjadi seperti di bawah ini :



<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

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

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<div style='overflow: auto; width: 100%px; height: 300px; text-align: left;'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'>

<data:label.name/>

</span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

<data:label.name/>

</a>

</b:if>

<span dir='ltr'>(<data:label.count/>)</span>

</li>

</b:loop>

</ul>

</div>

Lihat kode yang berwarna merah,  itu adalah kode tambahannya.



Catatan nilai dari width: 100%px; dan height: 300px; bisa sobat ganti dan sesuaikan dengan lebar dan tinggi sidebar sobat.



Jika sudah selesai SIMPAN TEMPLATE sobat dan lihat hasilnya



Selamat mencoba semoga berhasil

Posted in: Trik Blogger,Tutorial Blogger,Widget