Wednesday, September 21, 2016

Cara Mengatasi Menu Navigasi Simplify Tidak Bisa Di Klik

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.

Cara Mengatasi Menu Navigasi Simplify Tidak Bisa Di Klik
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.
 
Cara Mengatasi Menu Navigasi Simplify Tidak Bisa Di Klik
 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.

13 comments

Sukses gan, tapi di tampilan android navigasi singlenya gak kelihatan(hilang ntah kemana)

Ia Gan setelah saya lihat memang pada saat versi mobile memang hilang ..
tapi sudah fix kok gan..
coba lihat di bagian bawah post ini sudah saya tambahkan cara untuk memperbaikinya..

terima kasih telah berkunjung gan.

template simplify in gak mendukung sub menu ya?

versi mobile... ada menunya tapi knapa versi deteskop hilang

saya baru saja membeli template ini. namun mendapatkan kendala seperti yang diatas. shame

min, cara supaya bikin menu navigasi ngikut scroll kayak blog ini apa namanya ya? floating kah?

kalo beli pasti dapet solusi dari si penjual, pasti pake yg hasil cloning yak? :D

iya memang ada kendala sedikit..!
untuk informasi perbaikan coba langsung email mbak arlinanya mas.. :)

gan. ane udah apus atribut '-click'nya.. work buat singgle menu tapi knpa yg dropdown malah jadi ga work ya?

Tinggalkan Komentar Anda dibawah ini :
Berkomentarlah dengan baik dan sopan.
EmoticonEmoticon