Cara Mengubah Link dan Menambahkan Dropdown pada Header Menu - fajarriskiharap

Setelah mengintas template dan meletakkan kembali data backup template sebelumnya, hal berikut yang peru dilakukan adalah mengubah link yang terdapat pada header, semua link penting pada template ini dapat diubah dengan sangat mudah, bahkan tidak perlu Edit HTML Anda hanya perlu mengubahnya pada menu Tata Letak. Berikut tata caranya:

1. Pertama silahkan klik menu "Tata Letak" pada blogger dan klik edit pada widget Header Menu seperti pada gambar dibawah ini:
   
   
   
   
   
   
2. Akan muncul widget dengan tipe HTML pada jendela baru yang berisi kode
   
   

   
   <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Pertanyaan</a></li>
   <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Beri Masukan</a></li>
   <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Buy this template</a></li>
   <li itemprop='name'>
     <input id='drop-menu-1' name='drop-menu' type='radio'/>
     <label for='drop-menu-1'>Menu <i class='icon icon-dropdown'></i></label>
     <ul>
       <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Sub-menu 1</a></li>
       <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Sub-menu 2</a></li>
       <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Sub-menu 3</a></li>
     </ul>
   </li>
   <li itemprop='name'>
     <input id='drop-menu-2' name='drop-menu' type='radio'/>
     <label for='drop-menu-2'>Menu <i class='icon icon-dropdown'></i></label>
     <ul>
       <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Sub-menu 1</a></li>
       <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Sub-menu 2</a></li>
       <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Sub-menu 3</a></li>
       <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Sub-menu 4</a></li>
     </ul>
   </li>
   

   
   
3. Silahkan Tambahkan link dan judul link Anda dengan cara edit pada bagian yang sudah ditandai, jangan mengubah kode lain karena bisa berakibat eror pada tampilan template.
   
   

   
   // yang perlu di edit hanya kode seperti ini saja
   <a href='javascript:void(0)' itemprop='url'>Pertanyaan</a>
   

   
   
4. Klik simpan pada widget dan lihat perubahan pada template Anda.

Apakah jumlah dropdown menu bisa ditambah?

Secara default jumlah dropdown yang ditampilkan hanya 2, tapi bukan berarti tidak bisa ditambahkan. Caranya adalah copy kode seperti dibawah ini pada widget dan tempelkan tepat dibagian terakhir dari kode yang terdapat pada widget.

<li itemprop='name'>
  <input id='drop-menu-2' name='drop-menu' type='radio'/>
  <label for='drop-menu-2'>Menu <i class='icon icon-dropdown'></i></label>
  <ul>
    <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Sub-menu 1</a></li>
    <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Sub-menu 2</a></li>
    <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Sub-menu 3</a></li>
    <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Sub-menu 4</a></li>
  </ul>
</li>

Ubah artibut id pada input dan atribut 'for' pada label seperti yang sudah ditandai pada kode diatas. Kedua atribut diatas harus memiliki nama yang sama, hal ini penting dilakukan untuk membuat dropdown berfungsi pada tampilan mobile.

//Contoh atribut id dan for
  <input id='drop-menu-3' name='drop-menu' type='radio'/>
  <label for='drop-menu-3'>Menu <i class='icon icon-dropdown'></i></label>

Jika ada hal lain yang tidak Anda mengerti atau ada hal yang ingin ditanyakan silahkan ajukan di kolom komentar.

Related Posts