BREAKING NEWS

Kamis, 27 Juni 2013

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. 

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..!
Sumber : http://jalu-pangna.blogspot.com

Related Post



About ""

Salam Blogger dari Medan , Blog yang Saya beri nama Ilmu Komputer dan Pemograman ini Berisi Tentang Programmer , Tutorial , Tips Trik Komputer dan Internet, Tugas Akhir, dll. Jika sobat semua suka silahkan Join dan jangan lupa untuk memberikan jempolnya pastinya.

Creatif By : Ramlan MarbunSemoga Bermanfaat Untuk Sobat Semua

Terimah Kasih telah membaca artikelCara membuat widget menu navigasi ajax di blog. Yang ditulis oleh Ramlan Marbun .Pada hari Kamis, 27 Juni 2013. Terima kasih atas kunjungannya dan apabila berminat dengan artikel ini sertakan sumber link asli. Kritik dan saran dapat anda sampaikan melalui kotak komentar. Terimakasih

:: EnterKomputer13.Blogspot.Com ! ::

Posting Komentar

 
Copyright © 2013-2017 Ilmu Komputer dan Pemograman .All Rights Reserved.
Design by: Ramlan Marbun |