Membuat Scroll Pada Label atau Categori

Coba lihat ada sedikit perubahan wajah dari blog ini, semalam sedikit utak-atik template. Mumpung masih segar n ada waktu 30 menit nih tak arsipkan dulu yah supaya gak lupa. Apa sih ??. Gini lho semalam saya coba Membuat Scroll Pada Label atau Kategori, Sekarang ada scrollnya kan jadi gak terlalu memanjang. Ngirit tempat deh ceritanya, terus juga ada nomor urutnya, kemarin gak ada hanya buton aja…. bikinnya simple tuh, mau tahu kan ?

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

1. Masuk dulu ke Acount Blogger atau Dashboard
2. Pilih Rancangan , lalu klik Edit HTML
3. Centang dulu tuh Expand Widget Templates
4. Cari kode yang seperti ini (kalau widget labelnya 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>
-------------------------------------------------------------------------------------------------

5. Untuk memudahkan mencarinya , pakai saja Ctrl +F , terus ketik kata apa yang dicari dikotak yang disediakan, lalu klik next.
6. saya 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.
7. Kembali ke kode diatas, kalau sudah ketemu tinggal tambahkan saja kode yang warna merah itu untuk fungsi scrollnya.
8. Angka 300px adalah tinggi kotak scroll itu, ini bisa disesuaikan.
9. 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 masalah asal pas penempatannya aja,.
-------------------------------------------------------------------------------------------------
10. Untuk merubah buton menjadi nomor urut , saya ganti tulisan warna biru itu <ul> menjadi <ol> dan </ul> menjadi </ol>
11. Kalau sudah save template .
12. Selesai.
Selamat Mencoba,

Hasilnya Terlihat Seperti ini :

Cari Artikel Lainnya Disini

Custom Search

Bagi yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek dalam waktu yang singkat,di tuntun dengan tutorial video yang di rancang khusus dan mudah di mengerti, Witto Mengajak anda belajar DISINI.