Membuat Fungsi Dropdown Pada Label Blogger

Tampilan label pada Blogger™ secara default menurut saya sudah lumayan bagus, minimalis dan sangat sederhana, dan saya sangat menyukai itu, terlebih saya adalah orang yang menyukai sesuatu yang sederhana. Akan tetapi jika artikel sudah mulai menumpuk dan di ikuti dengan kategori yang semakin beragam, apakah kesederhanaan itu masih bisa dipertahankan?

Jawabnya bisa, kia bisa menampilkan label atau kategori pada Blogger™ menggunakan tampilan Cloud. Memang masih menggunakan fitur standard Blogger™. Adakah cara yang lain, yang lebih sederhana yang tidak terlalu memakan tempat? Perhatikan screenshoot di bawah ini.

Fungsi Dropdown Pada Label Blogger™

Fungsi dropdown pada label. Ini bukanlah hal baru, bisa dibilang ini adalah tutorial yang usang, tapi ini penting bagi saya dikemudian hari untuk saya terapkan di blog ini ketika label sudah mulai beragam. Di samping itu tujuan dari membuat blog ini adalah sebagai arsip bagi tutorial-tutorial yang bermutu. Dan dari sudut pandang saya, ini adalah artikel bermutu yang kebetulan saya temukan di situs www.bloggersentral.com. Anda tertarik untuk mencoba? Mari kita belajar dan mencoba bersama-sama.

Backup Template

Masuk ke Blogger.com » Template » Cadangkan/Pulihkan » Unduh Template Lengkap. Sebagai catatan membiasakan diri membuat cadangan template sebelum memodifikasi kodenya adalah langkah yang baik untuk menghindari hal-hal yang tidak diinginkan misalnya kesalahan memodifikasi dan lebih parahnya lagi kita lupa bagian mana saja yang telah dimodifikasi. So, mari kita membiasakan kebiasaan baik ini. :-)

Memodifikasi Kode Widget

Kita akan memodifikasi kode widget label Blogger. Salah satu hal paling utama yang harus kita persiapkan adalah widget label itu sendiri. Jadi pastikan bahwa  widget label atau kategori sudah terinstall di dalam blog. Anggap widget label sudah terinsatall. Sekarang kita masuk ke menu Edit HTML untuk mencari kode penyusun dari widget label ini.

Perluas kode widget label

Perluas kode yang mirip pada gambar dengan cara klik pada icon anak panah, sehingga tampilan kode secara penuh adalah seperti berikut.

<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 expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
      <b:if cond='data:display == &quot;list&quot;'>
        <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='&quot;label-size label-size-&quot; + 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>
  </b:includable>
    </b:widget>

Sekarang kita harus mengganti kode di atas dengan kode di bawah ini.

<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'> 
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'> 
<option>Click to choose a label</option> 
<b:loop values='data:labels' var='label'> 
<option expr:value='data:label.url'><data:label.name/> 
(<data:label.count/>) 
</option> 
</b:loop> 
</select> 
<b:include name='quickedit'/> 
</div> 
</b:includable> 
</b:widget>

Pada baris kode no.8 seperti yang tampak dihighlight pada kode di atas, Anda akan mendapati kode seperti ini <option>Click to choose a label</option>, Anda bebas mengubah kalimat Click to choose a label dengan kalimat Anda sendiri.

Simpan Template

Kita harus memastikan bahwa penggantian kode sudah sesuai dengan tutorial ini, jika sudah yakin sekarang kita klik Simpan Template kemudian preview tampilan labelnya.

—ς∞ς—

Seiring waktu faktor kebosanan pasti akan melanda diri kita, jika hari itu tiba mungkin kita cenderung ingin mengubah sesuatu yang lama menjadi sesuatu yang baru yang lebih modern. Anggap saja kita sudah bosan dengan tampilan dropdown label ini dan ingin menggantinya dengan label cloud yang sudah dimodifikasi sedemikian rupa. Untuk menghapusnya kita cukup masuk ke menu Tata Letak kemudian pilih widget label atau kategori setelah itu klik Hapus.

Lalu bagaimana dengan kode yang telah kita modifikasi tadi? Apakah dia ikut terhapus atau malah tertinggal di dalam template?

Kode yang telah kita modifikasi tadi secara otomatis akan terhapus dan tidak akan tertinggal. Jadi meskipun kita menginstall ulang widget label yang baru, tidak akan ada pengaruhnya sama sekali. Semoga bermanfaat.

Tweet

Postingan terkait:

Ditulis EM — Thursday, 9 May 2013 — Add Comment — Blogger Hacks, Blogger Widgets