Beranda » teknik blog » Membuat Label Blog Model Scroll

Membuat Label Blog Model Scroll

Label sangat penting dibutuhkan dalam sebuah blog. Karena dengan labeling yang baik akan semakin mempermudah pembaca dalam menemukan informasi yang mereka butuhkan dalam blog kita dengan cepat. Pemberian label untuk setiap postingan blog juga bermanfaat untuk mengarahkan pembaca agar lebih mudah dalam menyimpulkan tema seperti apakah yang diusung oleh blog kita. Karena peran label yang sangat penting inilah biasanya membuat label sering dipergunakan dan ditempatkan di halaman depan blog kita masing-masing.

Masalah akan muncul layaknya arsip blog yang kita bahas kemarin. Jika kita sudah blogging dalam waktu yang lama dan tema blog kita cenderung membutuhkan label yang banyak, pasti mau tidak mau penempatan label ini akan banyak memakan tempat. Lalu, bagaimana solusinya? Kita akan membungkus untuk meringkasnya dengan model scroll layaknya arsip blog dengan model scroll seperti kemarin.

Bagaimana caranya membuat label blog dengan model scroll ini?

Pertama seperti biasa kita log in dahulu ke akun blogger kita masing-masing.
Klik fitur rancangan.
Klik edit HTML.
Klik atau contreng kotak expand template widget.
# pada keyboard, tekan Ctrl + F untuk memunculkan kotak pencarian dalam edit HTML agar pencarian lebih mudah dilakukan.
Perhatikan kode HTML di bawah ini.

<b:widget id='Label1' locked='false' title='NAMA LABEL' 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:100px;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Tambahkan kode yang berwarna merah untuk mengaktifkan fungsi scrolling pada blog kita.
Klik simpan dan kini blog kita pun sudah menampilkan label dengan model scroll.

Keterangan :

Sebelum melakukan edit HTML template blog, selalu back up dengan cara download terlebih dahulu template blog kita untuk mengantisipasi kegagalan saat proses edit HTML berlangsung.
Pada kode berikut, <div style='overflow:auto; width:ancho; height:100px;'>, angka 100px menunjukan tinggi scroll yang digunakan untuk membungkus label blog kita. Ubah sesuai selera.

Bagaimana? Cukup mudah kan? Dibutuhkan ketelitian dan kehati-hatian dalam melakukan edit HTML template blog ini. Karena jika tejadi kesalahan sedikit saja, maka bukan tidak mungkin hal ini akan membuat template blog tidak dapat bekerja dengan baik atau bahkan tidak bisa digunakan sama sekali.