Mengedit Label Dengan Fungsi Scroll



Pada pertemuan kali ini, koisine blog akan membahas masalah label. Pelu kita ketahui label itu sendiri adalah pengelompokan artikel-artikel pada suatu blog yang bisa disesuaikan oleh individu atau pemilik blog sesuai dengan artikel itu sendiri.
bentuk Label pada umumnya yaitu berbentuk daftar yang memanjang ke bawah dengan teratur, tetapi apakah jika kita membuat label yang banyak pada blog pasti tampilan label tersebut akan memanjang ke bawah. Bagaimana ya ?
Jangan khawatir sobat koisine blog punya solusinya, yaitu dengan mengunakan fungsi scroll pada label tersbut, jadi label yang jumlahnya banyak akan terlihat rapi dengan ukuran yang berbeda-beda sesuai dengan selera maisng-masing agar terlihat lebih baik dan rapi dan juga akan mempercanti tampilan blog.



Langsung saja tutorialnya secara cuma-cuma.

Hal pertama yang harus kalian lakukan yaitu,

  • Masuk ke Blogger yang kalian punya,
  • Masuk ke Edit HTML, *Jangan Lupa Ceklist Expand Template Widget*
  • Silahkan cari "Label", *Lakukan ctrl-F untuk mempermudah pencarian*
  • Maka akan muncul kode seperti di bawah ini.
  • Kode yang belum diEdit.
 
<b:widget id='Label1' locked='false' title='Label' 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'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

  • Lakukan pengeditan seperti kode di bawah ini,
  • Kode sesudah diEdit dengan fungsi Scroll Label, 
 
<b:widget id='Label1' locked='false' title='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>

  • Lakukan penambahan kode yang berwarna merah pada template sobat sesuai dengan kode di atas,
  • Simpan Template,
  • Selesai.
Terima Kasih
Selamat Mencoba :)

0 komentar:

Posting Komentar