Cara Mengatasi Menu Navigasi Simplify Tidak Bisa Di Klik

Images Source: Arlina Design | Simplify 2 Responsive Blogger Template

Beberapa waktu yang lalu desainer template blogger ternama Arlina Design merilis template terbarunya yang berjudul Simplify dan Simplify2, dalam hanya beberapa hari template ini sudah didownload ratusan kali oleh para pecinta blogger.

Dengan begitu banyaknya pengguna ada beberapa hal yang masih menjadi masalah bagi pengguna template free ini, yaitu pada bagian sticky navigasi yang terkadang error tidak bisa di klik apabila dibuat menjadi single menu,

sedangkan pada aslinya template ini hanya menyediakan menu dropdown, ketika dirubah menjadi single menu, navigasi ini sudah tidak bisa diklik lagi.

Nah, setelah beberapa kali mencoba akhirnya titik temu masalah ini ditemukan yaitu terletak pada code tertentu yang harus diperbaiki, berikut ini pemaparannya secara lengkap dan detail.

Gambar diatas ini adalah contoh menu navigasi asli dari template simplify dan pada menu ini hanya terdapat menu dropdown, sedangkan pada gambar dibawah ini adalah contoh menu navigasi dari Bagakom yang telah di perbaiki dan juga menggunakan single menu pada bagaian navigasi.

 

 Lalu bagaimana cara memperbaiki menu navigasi simplify ini agar bisa diklik dan juga bisa dirubah menjadi single menu, berikut ini penjelasan lengkapnya.

Ikuti langkah-langkah yang akan di jelaskan dibawah ini :
Buka Blogger Dashboard > Template > Edit HTML
Cari kode dibawah ini

id='simplify-click'

Pada Bagian # rubah dengan link anda

<li><a href='#' itemprop='url'><span itemprop='name'>Blog <i class='fa fa-caret-down fa-fw'/></span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>About</span></a></li>
<li><a href='/p/contact-form.html' itemprop='url'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>CSS Minifier</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>HTML Converter</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Privacy Policy</span></a></li>
<li><a href='/p/sitemap.html' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>
<li><a href='/p/static-page.html' itemprop='url'><span itemprop='name'>Static Page</span></a></li>
<li><a href='/404' itemprop='url'><span itemprop='name'>404 Page Not Found</span></a></li>
</ul>
</li>

Jika ingin membuat single menu hapus kode <ul> hingga kode penutup </ul> pada bagian menu dropdown seperti pada HTML diatas yang diberi tanda mark menjadi seperti HTML dibawah ini :

<ul><li><a href='#' itemprop='url'><span itemprop='name'>Blog</span></a></li></ul>

pada HTML diatas kita harus menambahkan kode yang bertanda mark pada bagian depan dan belakang code html menu yang akan kita buat. dan jika ingin membuat lebih dari satu menu single anda hanya perlu mengcopy dan merubah link dan nama menu yang akan dibuat. berikut ini contoh HTML yang diterapkan di blog bagakom yang menggunakan single menu dan dropdown menu.

<ul><li><a href='http://bagakom.blogspot.co.id/search/label/Komputer'>Komputer</a></li></ul>
  <ul><li><a href='http://bagakom.blogspot.co.id/search/label/Mikrotik'>Mikrotik</a></li></ul>
<ul><li><a href='http://bagakom.blogspot.co.id/search/label/Internet'>Internet</a></li></ul>
<ul><li><a href='http://bagakom.blogspot.co.id/search/label/Cyberindo'>Cyberindo</a></li></ul>
<ul><li><a href='http://bagakom.blogspot.co.id/search/label/Info'>Info Menarik</a></li></ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Blog <i class='fa fa-caret-down fa-fw'/></span></a>
<ul>
<li><a href='http://bagakom.blogspot.co.id/p/blog-page_18.html' itemprop='url'><span itemprop='name'>About</span></a></li>
<li><a href='http://bagakom.blogspot.co.id/p/contact_3.html' itemprop='url'><span itemprop='name'>Contact</span></a></li>
<li><a href='http://bagakom.blogspot.co.id/p/disclaimer_10.html' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='http://bagakom.blogspot.co.id/p/privacy-policy_10.html' itemprop='url'><span itemprop='name'>Privacy Policy</span></a></li>
<li><a href='http://bagakom.blogspot.co.id/p/daftar-isi-blog.html' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>
</ul>
</li>
</ul>

Tambahan1
Jika pada cara di atas menu single tidak terlihat pada mode Mobile sobat bisa mengikuti cara di bawah ini :
Silahkan cari kode ini pada template anda

id='simplify-click'

hapus kode yang diberi tanda mark tersebut.
dan pada bagian single menu tidak perlu menambahkan code <ul></ul> lagi pada awal dan akhir untuk membuat single menu.

"jika cara diatas tidak bisa coba dengan cara yang ada dibagian tambahan 2"
Tambahan 2
Cari dan ganti isi script code // Slide toggle seperti dibawah ini :

$(function(){$("#simplify-click>li").click(function(i){var l=$("ul",this);return $("#simplify-click>li>ul").not(l).slideUp(),l.stop(!0,!0).slideToggle(400),!1}),$("#simplify-click > li > ul >li").click(function(i){i.stopPropagation()})});

Menjadi code dibawah ini :

$(function(){$(".dropdown-toggle")
.click(function(i){var l=$("ul",this);return $("#simplify-click > li > ul")
.not(l).slideUp(),l.stop(!0,!0)
.slideToggle(400),!1}),$("#simplify-click > li > ul > li")
.click(function(i){i.stopPropagation()})});'

Setelah itu untuk setiap pembuatan dropdown menu tambahkan code dibawah ini:

<li class="dropdown-toggle"><a href='#' itemprop='url'><span itemprop='name'>Blog <i class='fa fa-angle-down fa-fw'/></span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>About</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>CSS Minifier</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>HTML Converter</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Privacy Policy</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sitemap 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sitemap 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Static Page</span></a></li>
  <li><a href='/404' itemprop='url'><span itemprop='name'>404 Page Not Found</span></a></li>
</ul>
</li>'

Tambahkan kode yang di beri tanda mark setiap kali membuat dropdown, lakukan seperti contoh di atas.
Sekian dulu penjelasan bagaimana cara memperbaiki menu navigasi pada Simplify Blogger Template kali ini semoga bermanfaat, dan terima kasih telah berkunjung di blog kami.