Cara Mudah Membuat Fungsi Dropdown Pada Label Blogger




Cara Mudah Membuat Fungsi Dropdown Pada Label Blogger

Cara Mudah Membuat Fungsi Dropdown Pada Label Blogger


Malam ini saya akan share cara membuat fungsi dropdown label di blog. Mungkin teman- teman ada yang sudah pada tau apa itu Fungsi dropdown pada label dan namun tutorial yang saya buat ini khususnya untuk mereka yang baru saja bergabung di dunia blogger yang masih newbie juga seperti saya. 

Jika blog anda sudah banyak artikel dan label sudah beragam  bermacam- macam dari judul tersebut sehingga memakan tempat di blog anda. Sebaiknya anda coba saja untuk membuat Label Dropdown pada blog/website anda. Banyak juga dari para master kita menggunakan label Dropdown pada blog mereka karena tentunya terlihat simple. 

Jadi saya pun Penting mencoba untuk terapkan di blog saya. Di samping itu tujuan dari membuat Dropdown Pada Label ini adalah agar blog kita terlihat rapi keren dan enak di pandang. 

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 anda tambahkan di dalam blog anda.  Untuk contoh nya bisa anda lihat gambar di bawah ini.
Perluaskan kode yang mirip pada gambar di atas dengan cara anda klik pada icon anak panah, sehingga tampilan kode secara penuh adalah seperti di bawah ini. Atau anda bisa ikuti langkah- langkah seperti di bawah ini agar lebih mudah lagi.

Cara Mudah Membuat Fungsi Dropdown

  1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
  2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Anda temukan kode dibawah ini :
    <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>
  4. Jika sudah anda menemukan kode di atas, maka ganti 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>
  5. Jika sudah anda anda ganti. Dan anda bisa klik Save Template dan hasilnya.

Demikian penjelasan saya pada malam ini, semoga bermanfaat untuk anda, dan selamat mencoba semoga berhasil.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect