Cara membuat widget menu navigasi ajax di blog

Pada kesempatan kali ini saya akan share ke anda tentang cara membuat widget menu navigasi ajax di blog. Widget ini bekerja berdasarkan perpustakan JQuery dan feed API JSON Blogger. Blog anda mesti banyak para pengunjung, karena jika tidak feed API JSON Blogger tidak akan bekerja. Menu ini bekerja seperti drop-down menu normal/biasa saat javascript dinonaktifkan, dan menu ini akan berubah menjadi drop down menu AJAX bila java script di aktifkan. 

View Demo

BAGAIMANA CARA MENGINSTAL WIDGET INI ?

• Silahkan masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Template -> Backup template anda terlebih dahulu -> Edit HTML

• Cari tag/kode ]]></b:skin> tekan  CTRL+F untuk memudahkan pencarian
• Pastekan kode CSS tepat diatas tag  ]]></b:skin>
• Simpan template... 

KODE CSS

/* Menu Stylings */
.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;}

KODE JAVASCRIPT

Jika blog anda sudah terpasang plugin JQuery ini, harap diabaikan. Apablia belum terpasang silahakn letakan kode dibawah ini sebelum tag/kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Kemudian tambahkan kode Javascript berikut tepat diatas tag </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>

KODE HTML

• Masuk lagi ke Blogger -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript
• Pastekan kode berikut di bawah ini didalamnya

<ul id="w2bajaxmenu" class="w2bmenu">
 <li>
  <a href="#">Home</a>
 </li>
 <li>
  <a href="#">All about blog</a>
  <ul>
   <li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan trik blog</a></li>
   <li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">Blog tutorial</a></li>
   <li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
   <li><a href="htthttp://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery</a>
  </ul>
 </li>
 <li>
  <a href="#">All about Spiritual</a>
  <ul>
   <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">Wawasan spiritual</a></li>
   <li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">spiritual</a></li>
   <li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">Suluk</a></li>
   <li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">Sejarah</a></li>
  </ul>
 </li>
 <li><a href="http://jalu-pangna.blogspot.com/search/label/jejaring%20sosial">Jejaring sosial(normal link)</a></li>
</ul>

1. Ganti URL/LINK yang disorot warna Biru dengan URL/Link anda
2. Ganti Judul menu yang disorot warna orange dengan judul blog anda
3. Ganti Sub menu yang disorot dengan warna hijau dengan sub menu blog anda

Semoga bermanfa'at..

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 11.23