Cara Edit Menu Navigation Template Blogger Imagz with Leading Page

Cara Edit Menu Navigation Template Blogger Imagz with Leading Page yang akan saya share pada kesempatan kali ini. Karena saya menggunakan yang versi Imagz 1.1 maka saya share juga tutorialnya kepada kamu semua yang mungkin masih kebingungan edit navigation nya. 

Imagz Blogger Template with Leading Page ini merupakan karya dari Jagodesain yang mana menurut saya desain UI dan UX nya bagus banget. 

Pada Imagz versi lama ini ada dua jenis menu navigation yang bisa di edit yaitu menu homepage dan menu blog. Untuk menu halaman Homepage ini sendiri sengat mudah untuk editnya yang mana kamu bisa edit melalui Tata Letak. 

Cara Edit Menu Navigation Halaman Homepage Leading Page Only

Untuk menu homepage ini tentu hanya akan muncul pada halam home page saja jadi pada halaman blog tidak akan muncul navigation ini untuk cara editnya kamu bisa ikuti tutorial nya berikut ini :

1. Pada Dashboard Blogger, klik Tata Letak
2. Setelah itu kamu klik Icon Pensil pada Widget Header Nav, maka kamu akan diarahkan ke jendela baru
3. Silahkan tambahkan link atau hapus link yang mungkin kamu butuhkan pada blog tersebut
4. Klik Simpan

Cara Edit Menu Navigation Blog

Berbeda dengan navigation homepage yang mana bisa diedit melalui menu Tata Letak kalau untuk menu navigation blog ini hanya bisa di edit melalui Edit HTML

1. Masuk ke Dashboard Blogger, pilih Tema kemudian pilih icon segitiga, dan pilih Edit HTML
2. Selanjutny kamu akan diarahkan ke halaman pengeditan template. 

Dibawah ini adalah kode menu navigation yang ada pada navigation blog template imagz ini. 

<ul itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
  <!--[ Dropdown menu 1 with checked atribut ]-->
  <li class='dropDown'>
    <input checked='checked' class='drop-menu hidden' id='offdrop-menu1' name='dropDown' type='checkbox'/>
    <label class='link' for='offdrop-menu1'>
      <span class='name'>Topics</span>
      <svg class='line drop' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9'/></svg>
    </label>
    <ul>
      <li itemprop='name'><a expr:href='data:blog.homepageUrl.canonical path &quot;search/label/Fashion&quot;' itemprop='url'>Fashion</a></li>
      <li itemprop='name'><a expr:href='data:blog.homepageUrl.canonical path &quot;search/label/Food&quot;' itemprop='url'>Food</a></li>
      <li itemprop='name'><a expr:href='data:blog.homepageUrl.canonical path &quot;search/label/Health&quot;' itemprop='url'>Health</a></li>
      <li itemprop='name'><a expr:href='data:blog.homepageUrl.canonical path &quot;search/label/Internet&quot;' itemprop='url'>Internet</a></li>
      <li itemprop='name'><a expr:href='data:blog.homepageUrl.canonical path &quot;search/label/Research&quot;' itemprop='url'>Research</a></li>
      <li itemprop='name'><a expr:href='data:blog.homepageUrl.canonical path &quot;search/label/Sports&quot;' itemprop='url'>Sports</a></li>
      <li itemprop='name'><a class='new' expr:href='data:blog.homepageUrl.canonical path &quot;search/label/Travel&quot;' itemprop='url'>Travel</a></li>
      <li itemprop='name'><a class='free' expr:href='data:blog.homepageUrl.canonical path &quot;search/label/Download&quot;' itemprop='url'>Download</a></li>
    </ul>
  </li>
  
  <!--[ Dropdown menu 2 ]-->
  <li class='dropDown break'>
    <input class='drop-menu hidden' id='offdrop-menu3' name='dropDown' type='checkbox'/>
    <label class='link' for='offdrop-menu3'>
      <span class='name'>News</span>
      <svg class='line drop' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9'/></svg>
    </label>
    <ul>
      <li itemprop='name'><a expr:href='data:blog.homepageUrl.canonical path &quot;search/label/Government&quot;' itemprop='url'>Government</a></li>
      <li itemprop='name'><a expr:href='data:blog.homepageUrl.canonical path &quot;search/label/National&quot;' itemprop='url'>National</a></li>
      <li itemprop='name'><a expr:href='data:blog.homepageUrl.canonical path &quot;search/label/Technology&quot;' itemprop='url'>Technology</a></li>
    </ul>
  </li>
  
  <!--[ Standar menu ]-->
  <li>
    <a class='link' href='#' itemprop='url'><span class='name' itemprop='name'>Sitemap</span></a>
  </li>
  
  <!--[ Standar menu ]-->
  <li>
    <a class='link' href='#' itemprop='url'><span class='name' itemprop='name'>Disclaimers</span></a>
  </li>
</ul>

Link Tunggal

Untuk link tunggal nya maka seperti yang ada di bawah ini. 

<!--[ Standar menu ]-->
<li>
  <a class='link' href='#' itemprop='url'><span class='name' itemprop='name'>Sitemap</span></a>
</li>

Untuk menambahkan link ganti (#) dengan link blog milik kalian. 

Dropdown Menu

Menu dropdown ini tentu lebih komplek yang tepatnya kode nya seperti yang ada di bawah ini. 

<!--[ Dropdown menu 2 ]-->
<li class='dropDown break'>
  <input class='drop-menu hidden' id='offdrop-menu3' name='dropDown' type='checkbox'/>
  <label class='link' for='offdrop-menu3'>
    <span class='name'>News</span>
    <svg class='line drop' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9'/></svg>
  </label>
  <ul>
    <li itemprop='name'><a expr:href='data:blog.homepageUrl.canonical path &quot;search/label/Government&quot;' itemprop='url'>Government</a></li>
    <li itemprop='name'><a expr:href='data:blog.homepageUrl.canonical path &quot;search/label/National&quot;' itemprop='url'>National</a></li>
    <li itemprop='name'><a expr:href='data:blog.homepageUrl.canonical path &quot;search/label/Technology&quot;' itemprop='url'>Technology</a></li>
  </ul>
</li>

Dari sini apa sudah mengerti bagaimana cara editnya, apa masih bingung?

Nah itulah tutorial Cara Edit Navigation Menu Imagz with Leding Page semoga artikel ini bisa bermanfaat. 

Share :