Beranda » Navigasi » New AJAX Navigation Menu Widget untuk Blogger

New AJAX Navigation Menu Widget untuk Blogger

New AJAX Navigation Menu Widget untuk Blogger

AJAX Navigasi menu untuk blogger adalah widget baru yang diciptakan oleh Me di Blogger platform yang menggunakan Blogger JSON API dan AJAX. Menu navigasi ini terinspirasi dari situs lama Mashable.com. Dan sekarang saya recoded widget ini dan menambahkan fitur disesuaikan.

Demo

Bagaimana kerjanya ?

Nah, widget ini bekerja dengan jQuery dan Blogger JSON API. Blog Anda harus untuk pengunjung umum. selain itu Blogger JSON feed API tidak akan bekerja.
Menu bekerja seperti menu drop-down normal bila javascript dinonaktifkan, Dan akan berubah menjadi menu drop-down bertenaga AJAX ketika javascript diaktifkan.

Cara Memasang Widget ini?

Pergi ke Blogger Dashboard> Pilih Blog> Pergi ke halaman Template Blog
Klik tombol Edit HTML

CSS

Tambahkan Kode CSS sebelum ]]> </ b: skin>

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

JavaScript

Jika Blog Anda sudah memiliki jQuery plugin ini, maka jangan menambahkan plugin ini di template blog Anda,

Jika tidak tambahkan bawah baris kode sebelum </ head> tag

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

Tambahkan kode Javascript berikut sebelum </ head> tag

<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>

HTML

Pada bagian ini Anda harus hati-hati menambahkan HTML, jika tidak maka menu tidak akan bekerja.
AJAX menu menerima tiga jenis url. Anda harus menggunakan url ini hanya dalam menu. yaitu Label, Parameter Pencarian dan Label w / Search Query.

Label URL http://yourblogdomain.blogspot.com/search/label/LABELNAME
Cari Query http://yourblogdomain.blogspot.com/search?q=SEARCHQUERY
Label w / Search http://yourblogdomain.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

Catatan: - Search Parameter harus dikodekan Url. Anda dapat menggunakan alat ini untuk mengkodekan permintaan pencarian Anda.

Gunakan MENU ini Contoh kode dan menambahkannya dalam HTML / JavaScript gadget.

<ul id="w2bajaxmenu" class="w2bmenu">
 <li>
  <a href="#">Home</a>
 </li>
 <li>
  <a href="#">Example 1</a>
  <ul>
   <li><a href="http://yourblogdomain.blogspot.com/search/label/AdSense">Sample Label</a></li>
   <li><a href="http://yourblogdomain.blogspot.com/search/label/Gadgets?q=harish">Label w/ Search</a></li>
   <li><a href="http://yourblogdomain.blogspot.com/search?q=way2blogging">Search Query</a></li>
   <li><a href="http://yourblogdomain.blogspot.com/search?q=This+is+long+query+you+do+not+get+any+results,+so+try+others">Unknown Search</a>
  </ul>
 </li>
 <li>
  <a href="#">Example 2</a>
  <ul>
   <li><a href="http://yourblogdomain.blogspot.com/search/label/Design">Design</a></li>
   <li><a href="http://yourblogdomain.blogspot.com/search/label/Facebook?q=Like+Button">Facebook</a></li>
   <li><a href="http://yourblogdomain.blogspot.com/search/label/Templates">Templates</a></li>
   <li><a href="http://yourblogdomain.blogspot.com/search?q=Guest+Posts">Guest Posts</a></li>
  </ul>
 </li>
 <li><a href="http://yourblogdomain.blogspot.com">Normal Link</a></li>
</ul>

Kata Akhir!

Saya harap Anda menikmati widget ini. semoga berguna

New AJAX Navigation Menu Widget untuk Blogger

Belum ada tanggapan untuk "New AJAX Navigation Menu Widget untuk Blogger"

Post a Comment