Site and learn your application

Senin, 23 Mei 2016

Cara Membuat Label Blogger Menjadi Dropdown Label

Indo Amaterasu
Label adalah Gadget Blogger yang mempunyai fungsi untuk menampilkan kategori dari beberapa artikel yang dibuatnya. Contoh blog tentang komputer, maka labelnya software, hardware, dan jaringan. Yang menjadi bagian dari label adalah artikel itu sendiri, misalnya prosesor, harddisk, masuk ke dalam label komputer.

Blogger.com telah melengkapi gadget label dengan tampilan list dan cloud. Anda bisa menambahkan gadget label di blog Anda sendiri. Namun bila ingin menggunakan tampilan yang lebih keren lagi, misalnya label dropdown ikuti tutorial yang diberikan indoamaterasu.


Tujuan mengubah default list dan cloud label blogger menjadi dropdown untuk meringkas label sehingga kelihatan simpel dengan tidak mengurangi fungsi label itu sendiri. Dropdown label ini cocok diterapkan pada blog yang mempunyai banyak label/ kategori. Baiklah berikut ini cara membuat dropdown label.

1. Login ke akun blogger.com
2. Pilih Template > HTML, cari kode HTML berikut ini
<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>
3. Bila sudah ketemu, ganti kode di atas dengan kode HML berikut ini
<div class="dropmedown">
<select  class="dropdown-select" onchange='location=this.options[this.selectedIndex].value;'>
  <option> Search Category </option>
  <b:loop values='data:labels' var='label'>
    <option expr:value='data:label.url'>
      <data:label.name/> (
      <data:label.count/>)
    </option>
  </b:loop>
</select>
</div> 
4. Tambahkan kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin> atau </style>
/* Dropdown Label */
.dropmedown select{outline:none;cursor:pointer}
.dropmedown{display:inline-block;position:relative;overflow:hidden;width:100%;background:#fff;border:1px solid transparent;border-radius:3px;height:36px;line-height:36px;color:#444}
.dropmedown:before,.dropmedown:after{content:'';position:absolute;z-index:2;top:13px;right:12px;width:0;height:0;line-height:36px;border:4px dashed;border-color:#888 transparent;pointer-events:none}
.dropmedown:before{border-bottom-style:solid;border-top:none}
.dropmedown:after{margin-top:8px;border-top-style:solid;border-bottom:none}
.dropdown-select{position:relative;width:100%;margin:0;padding:6px 8px 6px 10px;height:36px;line-height:18px;font-size:12px;color:#62717a;text-shadow:0 1px #fff;background:#f2f2f2;background:rgba(0,0,0,0)!important;border:0;border-radius:0;-webkit-appearance:none}
.dropdown-select>option{margin:3px;padding:6px 8px;text-shadow:none;background:#f8f8f8;outline:none;border:0;border-radius:3px;cursor:pointer}
5. Simpan Template dan lihat hasilnya.

0 komentar:

Poskan Komentar

= > Silahkan berkomentar sesuai artikel di atas
= > Berkomentar dengan url (mati/ hidup) tidak akan dipublish