Cara Buat Fungsi Scroll Pada Labels/Kategori

Kali ini saya akan posting cara membuat fungsi scroll pada widget kategori atau (mocone=labels).dalam utak-atik template kita bisa saja membuat variasi-variasi agar blog kita nampak lebih cantik lagi.

namun sebelum anda utak-atik tempalate satu hal yang harus selalu anda ingat,yaitu beckup dulu template shobat. buat jaga-jaga kalau nanti terjadi error waktu kita lagi asik-asiknya mengotak-atik temlate kita.

dan sekarang yang akan kita rubah adalah widget labels atau kategori, yang mana kita tahu widget ini bawaan dari blogger. yang biasanya tampilan kategori ini akan memanjang atau mendatar sehingga memakan banyak ruang di blog kita.

jadi sekarang kita akan belajar merubah widget ini agar lebih praktis lagi.yaitu dengan membuat fungsi scroll.ok, bila shobat berminat bisa ikuti langkah-langkah dibawah ini.

Dan Yang saya lakukan pada template saya untuk membuat Fungsi Scroll Pada Label atau Kategori , langkahnya seperti ini :

1. Masuk dulu ke Acount Blogger atau Dashboard
2. Pilih Layout , lalu klik Edit HTML
3. Centang dulu tuh Expand Widget Templates
4. Cari kode yang seperti ini (kalau widget labelnya atau kategorinya belum ada ya bikin dulu ) :

<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:ancho; height:300px;'> <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> <b:include name='quickedit'/>
</div> </div> </div>

1. Untuk memudahkan mencarinya , pakai saja Ctrl +F , terus ketik kata apa yang dicari dikotak yang disediakan, lalu klik next.

2. aya cari kata Labels, karena di blognya namanya Labels, kalau nama widgetnya Kategori, ya cari Kategori. Ternyata kata labels itu banyak, terus saja klik next sampai ketemu kode2 lain yg menyertainya. ketemu juga tuh.

3. Kembali ke kode diatas, kalau sudah ketemu tinggal tambahkan saja kode yang warna merah itu untuk fungsi scrollnya.

4. Angka 300px adalah tinggi kotak scroll itu, ini bisa disesuaikan.

5. Mungkin saja diblog sobat kodenya beda,, seperti diblog saya yang lain kodenya bukan : <div class='widget-content'> Tapi:

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
gak apa asal penempatannya tepat, it�s ok.

6. Untuk merubah buton menjadi nomor urut , saya ganti tulisan warna biru itu <ul> menjadi <ol> dan </ul> menjadi </ol>

7. Kalau sudah save template . dan selesai.

Dan lihat hasilya.
Nah selamat mencoba, semoga bermanfaat.