Membuat Highlight Menu Nav Actived

 

Membuat Highlight Menu Nav Actived

Arleth-desz - Cara Membuat Highlight Menu Nav Actived, menu hightlight akan aktif jika url halaman atau postingan tersebut sama dengan yang ada di menu. Contohnya bisa kalian lihat pada template yang saya buat yaitu Template Fanshare Light Gridz.

Membuat Highlight Menu Nav Actived - Arlethdesign
Cara membuat menu ini cukup mudah, kalian tinggal tambahkan nama Class, javascript & CSS yang diperlukan saja, tidak perlu menambahkan HTML menu. Untuk Demo/Pratinjau kalian bisa cek link dibawah ini, untuk memastikan menu Highlight aktif kalian tinggal pilih menu Sitemap diurl Demo.


Cara Membuat Highlight Menu Nav Actived Simple

Cara Membuat Highlight Menu Nav Aktif

  1. Pastikan Blog kamu memiliki Js jquery seperti ini
    2. <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>

  2. Cari Menu Navigasi blog kamu contohnya seperti gambar berikut
    Tambahkan class='active' didalam menu <li>
    3. Cara Membuat Highlight Menu Nav Actived Simple
  3. Jika Sudah Tambahkan CSS berikut kedalam <style> atau </style>
    Kamu juga bisa ubah warna menu aktifnya
    4. .active{background:#eee;}

  4. Langkah terakhir yaitu menambahkan Javascript, caranya :
    Cari &lt;/head&gt;&lt;!--<head/>--&gt; atau </head>, lalu simpan javascript berikut diatasnya & jangan lupa sesuaikan nama class sesuai dengan menu nav blog kalian.
    5. <script type='text/javascript'>//<![CDATA[
$(document).ready(function(){var str=location.href.toLowerCase();$("#_menu-nav li a").each(function(){if (str.indexOf(this.href.toLowerCase()) > -1) {$("li.active").removeClass("active");$(this).parent().addClass("active");}});})
//]]></script>

  5. Jika sudah save & lihat hasilnya..

Ok saya rasa cukup sekian tutorial kali ini semoga bermanfaat, jika ada pertanyaan silahkan tulis dikotak comment dibawah. Sampai jumpa diartikel selanjutnya. Terima kasih.

Comments

Post a Comment

Popular posts from this blog

Recent Post Blogger By Label Filter Abjad

Image
  Recent Post Blogger By Label Filter Abjad Recent Post Blogger By Label Filter Abjad  - Recent post label dengan fitur mengurutkan judul/huruf depan dari postingan blog, Mulai dari Nomor, lalu ke huruf A sampai Z. Recent Post ini lebih mengutamakan Filter huruf depan dari sebuah judul post blog bukan mengurutkannya dengan tanggal di rilisnya postingan tersebut. Fitur ini berbeda dari recent post sebelumnya yaitu  Simple Recent Post By Label  yang mengandalkan tanggal rilis postnya dan jika dilihat mungkin acak-acakan judul postnya jadi bikin pusing atau tidak nyaman dipandang mata, maka dari itu Recent Post Label Filter Abjad jadi alternatifnya agar lebih minimalist dan rapih jika dilihat Recent Post Blogger By Label Filter Abjad Silahkan buka  Blogger > Tema > Edit HTML , lalu tambahkan CSS diatas  </style> /* Recent Post Label Filter Abjad - Arlethdesign ======================================= */ ul.grup-listanime{max-height:200px;overflow:...
Read more

Cara Mudah Membuat Template Blog Responsive & Mobile Friendly

Image
  Cara Mudah Membuat Template Blog Responsive & Mobile Friendly Halo, tutorial Kali ini saya akan membagikan  Cara Mudah Membuat Template Blog Responsive , artikel kali ini cukup mudah dan simpel untuk kalian praktekkan secara langsung, yuk langsung cek artikel dibawah ini. Apa itu Responsive & Mobile Friendly?, Responsive memiliki arti merespon, dan Mobile Friendly memiliki arti adaptive. Arti Lebih tepatnya tampilan blog akan merespon & menyesuaikan ukuran layar dimana blog itu dibuka baik itu handphone atau komputer. Kelebihan dari Responsive & Mobile Friendly yaitu memiliki fungsi untuk Meningkatkan SEO, Memudahkan Pengguna Smartphone, dan Disukai Pengunjung. Cara Mudah Membuat Template Blog Responsive & Mobile Friendly Buka  Blogger > Tema > Edit HTML Simpan HTML berikut dibawah  <head> , jika sudah ada tidak perlu ditambah. <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'...
Read more

Popular Post Samehada untuk Blogger

Image
  Popular Post Samehada untuk Blogger Tutorial kali ini yaitu Cara membuat Popular Post seperti Samehada untuk Blogger, diartikel ini saya akan membagikannya dengan singkat dan jelas, dan sangat mudah dipahami untuk pemula sekalipun. Untuk pratinjau atau preview tampilannya kalian bisa dipostingan sebelumnya yaitu  Bt-Samehada Clone 2020 Template Blogger . Popular Post Samehada untuk Blogger Pertama Buka Blogger > Tata letak > Add Widget Popular Post  (Jika sudah ada tidak perlu). Kemudian, Buka Tema > Edit HTML Simpan CSS berikut kedalam  <style> ... </style>  atau  <b:skin> ... </b:skin> /* Popular post blogger new style - arlethdesign */ #PopularPosts1 .widget-content.popular-posts{margin:auto} #PopularPosts1 ul li:nth-child(1n+2) .item-meta{font-size:11px;padding:6px 0 0;opacity:.7} #PopularPosts1 ul{padding:0;list-style:none;margin:auto;overflow:hidden} #PopularPosts1 ul li{margin:auto;padding:10px 0} #PopularPosts1 ul ...
Read more