Menu Navigasi Ajax Keren

Menu navigasi bisa dibilang merupakan salah satu komponen penting dalam sebuah blog/situs. Lihat saja, hampir setiap blog menggunakan menu navigasi baik itu yang sederhana maupun yang memiliki nilai estetika tinggi. Kali ini saya akan share sebuah menu navigasi yang sangat menarik, dimana menu ini akan menampilkan artikel-artikel yang terkait dengan label yang kita jadikan menu. Untuk lebih jelasnya sobat bisa melihat screenshoot dibawah ini:

menu navigasi dropdown ajax jquery keren


Bagaimana ? Menarik bukan ?
Nah, untuk membuatnya ikuti saja langkah-langkah dibawah ini :
  • Log in ke dashboar blog kita
  • Pilih menu Template dan klik Edit HTML
  • Beri tanda cek pada Expand widget templates
  • Letakkan kode berikut ini sebelum ]]></b:skin>
/* Menu Navigasi*/.w2bmenu *{margin: 0;padding: 0;}ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}ul.w2bmenu li:hover > ul{display: block;}ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}/* AJAX Menu Stylings */ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}ul.w2bajaxmenu li:hover div.submenu {display: block;}ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}ul.w2bajaxmenu ul li{background: none !important;float: none !important;}ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}
  • Jika blog sobat sudah terdapat plug in jquery, maka abaikan saja langkah ini. Letakkan kode berikut sebelum </head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  • Letakkan lagi kode berikut ini sebelum </head> 
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script><script type="text/javascript">jQuery(document).ready(function($) {          $('#w2bajaxmenu').ajaxBloggerMenu({                   numPosts : 4, // Number of Posts to show                   defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image          });});</script>
  • Simpan template sobat
  • Buka Menu Layout dan tambahkan gadget HTML/Javascript dan masukkan kode berikut ini:
<ul id="w2bajaxmenu" class="w2bmenu">          <li>                   <a href="http://namabloganda.blogspot.com">Home</a>          </li>          <li>                   <a href="#">Contoh Dropdown</a>                   <ul>                             <li><a href="http://namabloganda.blogspot.com/search/label/AdSense">Sample Label</a></li>                             <li><a href="http://namabloganda.blogspot.com/search/label/Gadgets?q=Irfan">Label w/ Search</a></li>                             <li><a href="http://namabloganda.blogspot.com/search?q=ourreference">Search Query</a></li>                   </ul>          </li>          <li><a href="http://namabloganda.blogspot.com">Contoh normal</a></li></ul>
  • Save 
Yang harus sobat ketahui disini bahwa menu navigasi ini hanya mendukung Label URL, Search query dan Label with search query.
Untuk contoh masing-masingnya seperti berikut :

Label
http://namabloganda.blogspot.com/search/label/AdSense
Label with Search query
http://namabloganda.blogspot.com/search/label/Gadgets?q=Irfan
Search query
http://namabloganda.blogspot.com/search?q=ourreference

Ubah kode berhighlight hijau, biru dan ungu tersebut sesuai kebutuhan sobat

Nah, itu tadi cara membuat menu navigasi yang super keren.. semoga dapat membuat tampilan blog sobat terlihat lebih profesional :)
Jika ada pertanyaan ataupun sobat membutuhkan bantuan, jangan ragu untuk meninggalkan komentar melalui form dibawah ini.

Regards,
Irfan

Berlangganan Artikel Referensi Kita

Masukkan alamat email Anda:

Related Post:

+ comments +15comments

30/7/16 20:18

terimakasih infonya gan.....

Terimakasih dewa poker atas Komentarnya di Menu Navigasi Ajax Keren
14/8/16 02:39

Terima kasih Informasinya gan , Sangat Membantu dan di tunggu artikel berikutnya^^


KONTES SEO Juni 2016
Poker Online Terpercaya
agen poker terbaik

Terimakasih Agen Poker Online atas Komentarnya di Menu Navigasi Ajax Keren
24/9/16 09:35

terima kasih infonya gan.....

Terimakasih Ganool atas Komentarnya di Menu Navigasi Ajax Keren

bagus artikelnya gan......

Terimakasih poker online terpercaya atas Komentarnya di Menu Navigasi Ajax Keren
14/10/16 01:18

terima kasih infonya ...

Terimakasih dinda atas Komentarnya di Menu Navigasi Ajax Keren
22/10/16 23:55

artikel yang sangat bermanfaat, saya senang berkunjung ke blog anda. terimakasih teruslah memberikan informasi yang bermanfaat....

Terimakasih Ganool atas Komentarnya di Menu Navigasi Ajax Keren
20/11/16 08:13

Film Semi
Ganool
Nonton Movie
Nonton Film Online

Terimakasih Nonton Film Online atas Komentarnya di Menu Navigasi Ajax Keren
29/11/16 16:41

Poker Online
Poker
Agen Poker
Poker Online Terpercaya

Terimakasih Agen Poker Terpercaya atas Komentarnya di Menu Navigasi Ajax Keren
22/12/16 00:27

Penyajian Arktikel di blog ini sangat bagus, saya suka..
Semoga Artikel lainnya memberikan informasi yang lebih bermanfaat lagi.

Agen Poker Online
Dewa Poker Online

Terimakasih Dewa Poker Online atas Komentarnya di Menu Navigasi Ajax Keren
21/1/17 06:39

baik gan tipsnya saya akan ikuti untuk itu saya mengucapkan terimakasih banyak atas bantuannya yang sangat bermanfaat

info yang bagus gan.....;)

Terimakasih agen poker terbaik atas Komentarnya di Menu Navigasi Ajax Keren
27/1/17 19:08

Thanks info nya.. Boleh di coba nih..;)

Terimakasih agen poker online atas Komentarnya di Menu Navigasi Ajax Keren
30/1/17 21:01

informasinya sangat bermanfaat, thanks gan :)

Terimakasih judi poker atas Komentarnya di Menu Navigasi Ajax Keren
17/6/17 00:48

Yuk yang hobi main poker, gabung bersama aku di SINIDOMINO yukk

SINIDOMINO Adalah Situs Poker Online Yang Menjamin Permainan 100% Tanpa Robot

Buat Anda yang hobi bermain Poker Online Kini Telah Hadir Poker terbaik yang pernah ada yaitu SINIDOMINO

SINIDOMINO memberi Promo menarik bagi pecinta permainan kartu online :
* Minimal DEPOSIT dan Withdraw Hanya RP. 20.000.
* Jackpot Hingga Jutaan Rupiah Setiap Harinya
* Cashback Mingguan 0.5%
* Bonus Refferal 20%

Gabung sekarang juga dan dapatkan kemenangan yang luar biasa hanya di SINIDOMINO
Untuk informasi lebih lanjut silahkan hubungi kami di :
LiveSuppot 24 jam :
* LiveChat : www.sinidomino.com
* Pin BBM : D61E3506
* Phone : +85598249684
* Skype : sinidomino

Terima Kasih Agan.

Raja Poker, Dewa Poker, Poker Online, Judi Poker, Agen Poker Online

Terimakasih Yoona Marceline atas Komentarnya di Menu Navigasi Ajax Keren
17/6/17 00:48

Yuk yang hobi main poker, gabung bersama aku di SINIDOMINO yukk

SINIDOMINO Adalah Situs Poker Online Yang Menjamin Permainan 100% Tanpa Robot

Buat Anda yang hobi bermain Poker Online Kini Telah Hadir Poker terbaik yang pernah ada yaitu SINIDOMINO

SINIDOMINO memberi Promo menarik bagi pecinta permainan kartu online :
* Minimal DEPOSIT dan Withdraw Hanya RP. 20.000.
* Jackpot Hingga Jutaan Rupiah Setiap Harinya
* Cashback Mingguan 0.5%
* Bonus Refferal 20%

Gabung sekarang juga dan dapatkan kemenangan yang luar biasa hanya di SINIDOMINO
Untuk informasi lebih lanjut silahkan hubungi kami di :
LiveSuppot 24 jam :
* LiveChat : www.sinidomino.com
* Pin BBM : D61E3506
* Phone : +85598249684
* Skype : sinidomino

Terima Kasih Agan.

Raja Poker, Dewa Poker, Poker Online, Judi Poker, Agen Poker Online

Terimakasih Yoona Marceline atas Komentarnya di Menu Navigasi Ajax Keren
9/8/17 20:19

Informasi yang sangat bagus dan berguna. Ditunggu untuk update selanjutnya gan


bandarq
domino99 online terpercaya
dominoqq
domino qiu qiu

Terimakasih dominoqq atas Komentarnya di Menu Navigasi Ajax Keren

Post a Comment