Labels dengan fungsi scroll

Anda semua tentu sudah tahu dengan yang namanya blog dan bahkan mungkin dari sekian banyak orang yang lain ada yang sedang membuat blog ataupun sudah mempunyai blog aktif dan tentunya anda semua juga sudah tidak asing lagi dengan yang namanya labels atau kategori. Labels/kategori mempunyai peranan penting dalam sebuah blog karena akan memudahkan pengunjung blog anda dalam mencari sesuatu yang mereka inginkan dan sebuah blog semakin lama akan mempunyai labels/kategori yang banyak dan panjang sehingga akan memakan tempat yang banyak pula. Untuk mengatasi hal tersebut anda bisa menggunakan fungsi scroll atau menggulung sehingga bisa menghemat tempat. Dan maaf tutorial ini sebenernya saya dapat dari browsing di google beberapa bulan yang lalu untungnya saya masih ingat betul tapi saya lupa ada di blognya siapa dan saya cari-cari lagi tidak ketemu jadi mohon maaf buat pemilik artikel ini kalau saya tidak memasang linknya. Buat anda yang ingin tahu bagaimana membuat fungsi scroll ini? Silahkan anda ikuti langkah-langkah berikut ini :

1. Silahkan login dulu ke Blogger.com.
2. Klik menu "Tata Letak".
3. Klik menu "Edit HTML".
4. Klik tulisan Download Template, ini dimaksudkan jika ada kesalahan dalam meng-edit template, anda masih punya back-up data untuk mengembalikan template anda ke bentuk semula.
5. Centang kotak kecil di samping tulisan "Expand Template Widget"
6. Cari kode di bawah ini atau yang mirip seperti 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'>
<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: 160px; height: 300px; TEXT-ALIGN: left;'>
</div>
paste di bawah kode ini :

<div class='widget-content'>

dan diatas kode ini:

<ul>

Hasil akhirnya tampak 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: 160px; 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 saya cetak warna merah, itu adalah kode tambahannya dan sedikit catatan nilai dari Width: 160px; dan Height: 300px; bisa anda ganti dan sesuaikan dengan lebar dan tinggi sidebar anda.

7. Klik tombol Preview jika sudah sesuai dengan template atau selera anda klik tombol Simpan Template.
8. Selesai
9. Selamat Mencoba!

Tweet