Ads

Cara Edit Widget LinkList Blogger Menjadi DropDown

Cara Edit Widget LinkList Blogger Menjadi DropDown
Dagruel

Ya kali ini aku mau share nih cara edit widget LinkList Blogger yang benar agar menjadi DropDown.

Karena sebelum nya ada yang ngeshare widget LinkList blogger yang katanya bisa jadi DropDown tetapi harus pakai jQuery.

dan yang aku share ini tidak menggunakan script apapun murni html dari blogger tanpa tambahan script jadi langsung simak.

Mengganti Default Widget LinkList Blogger

Disini kita akan menganti widget default nya. cara nya tinggal pasang HTML berikut di atas tag </b:defaultmarkups>

<b:defaultmarkup type='LinkList'>
  <b:widget-settings>
    <b:widget-setting name='shownum'>10</b:widget-setting>
    <b:widget-setting name='sorting'>NONE</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <b:include name='widget-title'/>
    <b:include name='content'/>
  </b:includable>
  <b:includable id='content'>
    <div class='widget-content'>
      <ul>
        <b:loop index='daftarLink' values='data:links' var='link'>
        
          <!--Bukan DropDown-->
          <b:if cond='data:daftarLink == 0 or data:daftarLink == 1 or data:daftarLink == 2'>
            <li><a expr:href='data:link.target'><data:link.name/></a></li>
          </b:if>
          
          <!--DropDown Pertama-->
          <b:if cond='data:daftarLink == 3'>
            <li>
              <data:link.name/>
              <ul>
                <b:loop index='dropdown1' values='data:links' var='link'>
                  <b:if cond='data:dropdown1 == 4 or data:dropdown1 == 5'>
                    <li><a expr:href='data:link.target'><data:link.name/></a></li>
                  </b:if>
                </b:loop>
              </ul>
            </li>
          </b:if>
          
          <!--DropDown Kedua-->
          <b:if cond='data:daftarLink == 6'>
            <li>
              <data:link.name/>
              <ul>
                <b:loop index='dropdown2' values='data:links' var='link'>
                  <b:if cond='data:dropdown2 == 7 or data:dropdown2 == 8 or data:dropdown2 == 9'>
                    <li><a expr:href='data:link.target'><data:link.name/></a></li>
                  </b:if>
                </b:loop>
              </ul>
            </li>
          </b:if>
        </b:loop>
      </ul>
    </div>
  </b:includable>
</b:defaultmarkup>
Mengganti Default Widget LinkList Blogger
Dagruel

Berikut Penjelasan HTML Di Atas.

Attribute "index" di bagian Looping.

Seperti yang kalian lihat pada HTML di atas terdapat 3 tag <b:loop>.

Loop Yang Pertama itu bukan untuk menampilkan DropDown melainkan bagian kedua dan ketiga yang akan menampilkan drodown nya.

Dan di setiap loop ada Attribute "index" yang value nya berbeda: daftarLink, dropdown1, dropdown2.

Kenapa harus ada Attribute "index" penjelasan nya di bawah.

Fungsi Attribute "index" di tambahkan dengan tag Kondisional.

Kita lihat pada tag Loop pertama di bawah nya terdapat tag.

<b:if cond='data:daftarLink == 0 or data:daftarLink == 1 or data:daftarLink == 2'>

pada bagian code data:daftarLink berfungsi untuk mengambil jumlah dari daftar link yang sdh ditambahkan.

Kemudian bagian nomor nya setelah tanda == berfungsi mengambil link di urutan tersebut. misalkan di tulis 0 maka akan mengambil urutan post yang pertama.

Misal terdapat 10 link maka penulisan nya dari 0, 1, 2, 3 sampai 9. Link Pertama adalah 0

dan selanjutnya terdapat code or di teruskan data:daftarLink == 1 or data:daftarLink == 2.

Artinya Link Tanpa DropDown akan tampil pada link urutan pertama sampai ketiga.

Selanjutnya ada tag Kondisional lagi tetapi hanya 1: yaitu data:daftarLink == 3. Ini Menandakan link urutan keempat akan menjadi DropDown.

Karena kodisi nya hanya satu saja maka hanya tampil 1 link saja. Maka dari itu kita tambahkan lagi tag loop nya. dengan value index nya berbeda yaitu: dropdown1

Sebelum nya penulisan kondisi nya seperti ini data:daftarLink sekarang kita ubah jadi data:dropdown1 untuk value nomor nya masih berurutan dengan sebelumnya.

Dengan menulis data:dropdown1 == 4 or data:dropdown1 == 5 maka akan menampilkan daftar link di urutan keliam dan keenam.

Begitu juga untuk bagian DropDown yang kedua <b:if cond='data:daftarLink == 6'>

Cara pasang nya.

Jika sdh paham code di atas tinggal pasang dropdown nya lewat Tata Letak > Tambahkan Widget > > Widget Link List.

Dan Jika Belum Paham mungkin karena aku kurang mengerti pemahaman kalian silahkan tanya di kolom komentar secara spesific di mana yang kalian tidak pahami. maka akan di jelaskan sampai paham ok.

2 komentar

Blogger Disqus
  1. konsepnya kayak versi media sosial gitukan, kayak gini

    https://drive.google.com/file/d/10bv9j_akU06oO1zwRLEYWKIEsUx01LC_/view?usp=sharing

    BalasHapus
    Balasan
    1. iya di rubah jadi dropdown dengan tag kondisional

      Hapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!