Cara Membuat Label Dengan Scrool - Terinspirasi dari blog ini, saya menyempatkan diri untuk membuat tutorial Cara Membuat Label Dengan Scrool. Nah, pada dasarnya label di blogger.com itu sebenarnya hanya terdiri atas type cloud dan list dan tidak memiliki scrool. Nah, dengan sedikit olesan, maka kita bisa membuat label dengan scrooling. Hal ini ditujukan agar blog tampak lebih rapi, dan pengunjung akan lebih mudah dalam melihat serta mencari label postingan blog apa yang ingin ia liat. Untuk demo bisa liat gambar disebelah, gambar nya langsung ane ambil dari blog ini ya. Lalu? bagaimana cara membuatnya ? Oke silahkan ikuti saya dan akan saya berikan tutorial paling mudah Cara Membuat Label Dengan Scrool.
- Login ke blogger.com
- Buatlah sebuah widget label dengan menambhkan gadget pada bagian sidebar dan jangan lupa berikan judul, Misal kita buat judul "kategori"
- Lanjut klik Edit HTML, dan klik centang Expand Template Widgets.
- Sekarang cari label yang udah kita buat tadi, untuk mempermudah pencarian tekan CTRL + F dan ketik "kategori" nah nanti akan muncul banyak kode.
- Perhatikan kode berikut ini, terdapat kode berwarna biru. Kode tersebut yang harus kita tambahkan kedalam template agar label memiliki scrool
<b:widget id='Label1' locked='false' title='kategori' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<div style='overflow:auto; width:ancho; height:230px;'><b:if cond='data:display == "list"'>
<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>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<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>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</div></b:includable>
</b:widget> - Simpan
