Cara Membuat Scroll Pada Kategori

Label/Kategori mempunyai peranan yang sangat penting dalam sebuah Blog karena akan memudahkan pengunjung Blog sobat dalam mencari sesuatu yang mereka inginkan dan sebuah Blog semakin lama akan mempunyai Label/Kategori yang banyak dan panjang sehingga akan memakan tempat yang banyak pula. Caranya sebagai berikut :

• Login ke Blogger 
• Klik Rancangan → Edit HTML 
• Klik tulisan Download Template Lengkap

Silahkan save dulu template tersebut, ini di maksudkan 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 Template Widget

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 membuat Scroll Copy kode berikut :

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

dan

</div>

Letakkan dibawah kode berikut :

<div class='widget-content'>

dan diatas 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 biru, itu adalah kode tambahannya dan sedikit 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 dan lihat hasilnya

Selamat mencoba

sumber : http://www.hendyhotspot.tk/2010/12/membuat-scroll-pada-label-blogspot.html

Related Post:

Tips Blogger

• Cara Membuat Nomer Urut di Setiap Komentar
• Cara Memasang Artikel Terkait Dengan Gambar
• Cara Membuat Tab Menu Horizontal Animasi
• Cara Membuat Menu Drop Down Jquery
• Cara Membuat Menu Di Bawah Header (Laman)
• Cara Membuat Menu Di Samping Blog
• Cara Memasang Facebook Share
• Cara Memasang Profile Facebook di Blog
• Cara Memasang Like FB Di Setiap Artikel
• Cara Mengatasi Widget Yang Tidak Bisa Di Hapus

Blogger

• Award Blogger Pertama Untuk Buni Fansite Dari Sobat Blogger
• Cara Membuat Nomer Urut di Setiap Komentar
• Cara Memasang Artikel Terkait Dengan Gambar
• Cara Membuat Tab Menu Horizontal Animasi
• Cara Membuat Menu Drop Down Jquery
• Cara Membuat Menu Di Bawah Header (Laman)
• Cara Membuat Menu Di Samping Blog
• Cara Memasang Facebook Share
• Cara Memasang Profile Facebook di Blog
• Cara Memasang Like FB Di Setiap Artikel