Cara Mudah Membuat Fungsi Dropdown Pada Label Blogger Cara Mudah Membuat Fungsi Dropdown Pada Label Blogger - mizipediacom mizipediacom: Cara Mudah Membuat Fungsi Dropdown Pada Label Blogger

KATEGORI










LIVE TV

Iklan Semua Halaman

Cara Mudah Membuat Fungsi Dropdown Pada Label Blogger

Thursday, 22 March 2018



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.
Lihat Juga