church--tutorial: Labels Cloud tampa java script

T ernyata oh ternyata. Terutama ini lebih di khususkan bagi yang mempunya kolom sidebar-nya cukup lebar, misalkan sekitar 225px ke atas, ( contohnya bisa lihat lebarnya kolom sidebar blog ini ) .

Jika mengunakan pengurutan labelnya di biarkan jatuh ke bawah , maka akan banyak space kosong yang terbuang percuma. tak enak di lihat layauuu. ( ngertikan maksudnya )

Solusinya bisa saja kita mengunakan sistem label Tag Cloud, biar tulisan labelnya memanjang secara horizontol, dan itu merupakan pilihan yang paling tepat.

Namun ada cara lain yang paling mudah dan murah walaupun tidak sebaik tag Cloud, karena cara yang akan saya uraikan ini tidak mengunakan unsur ~~fietnah~~ dan Java Script. ( terutama cocok sekali bagi yang tidak suka dengan Java - java timur, java tengah atau java barat ).

Sebelum kita lanjutkan inilah tes DNA perbedaan antara labels cloud yang asli dengan label cloud manuali tampa java script. ( kalau ingin lebih menarik tambahkan saja icon-icon luthu di setiap labelnya )

Baiklah untuk yang penasaran ingin mebaca tulisan ini, kita lanjutkan saja cara membuatnya.

Pertama : pasang dulu elemen label ke blog kita, beri judul atau namai label tersebut, dan inga ! inga !.

Kedua : Buka tab Edit Html kemudian tandai Expand Template Widget.

Ketiga : Cari kode di bawah ini. ( kalau binun cari tulisan judul yang kita namai untuk label tersebut. gunakan find browser lihat di sini. )

<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>     <b:include name='quickedit'/>
  </div></b:includable></b:widget>

Setelah ketemu buang tulisan ini <ul> <li> </li> </ul> .

kemudian setelah itu, masukan kode di bawah ini.

<div style="background:#F0E8F1;margin:2px; 
padding:10px;border:3px #FAF7FA solid;text-align:center;
text-transform:uppercase;"> 

</div>

simpan pada posisi seperti tulisan yang saya pertebal.

<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="background:#F0E8F1;margin:2px; 
padding:10px;border:3px #FAF7FA solid;text-align:center;
text-transform:uppercase;">
     <b:loop values='data:labels' var='label'>
      <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>
    </b:loop> </div>     
<b:include name='quickedit'/>  </div></b:includable></b:widget>

Setelah itu coba tekan tulisan Pratinjau.

Jika saudara tidak suka dengan angka setelah label seperti ini: (2), (1). buang saja dengan cara menghapus tulisan ini (<data:label.count/>).

Dan jika suka dengan tampilan barunnya klik Simpan Perubahan.

Embedded Style.

Cara di atas saya mengunakan Inline Style, yakni menerapkan langsung pada kode Html. Jika ingin menarik dan terkontrol tampilan labelnya. saya sarankan dan saya paling suka membuat dulu sintaks Css -nya atau istilahnya Embedded Style Sheet. karena dengan cara kedua ini keuntungannya kita tidak perlu menghapus tag <ul> <li> </li> </ul>. dan keuntungan lainnya kita bisa menambahkan gambar icon juga aman.