» » » » » Blogunuz İçin Yeni Ajax Menüsü

Mashable tarafından hazırlanan yeni bir blogger menüsü var şimdilerde. Yabancı sitelerde kapış kapış gidiyorlar. Bir de bu Ajax menüsü. Biliyorsunuz blogger menü konusunda biraz kısıtlı idi. Ama artık bu sorunun çözülmesi ile birlikte Mashable'ın sizler için hazırladığı menü kodlamasına bir bakalım.


Nasıl Çalışır ?
Bildiğimiz gibi jQuery kütüphanesi altyapısı ile ve Blogger JSON feed API ile çalışıyor. Normal bir açılır kapanır menü gibi çalışmasına karşın, ajax gücü ile daha kaliteli oluyor. Burda en önemli olay etiketlerinize göre değerlendirme yeteniğidir. Biliyorsunuz daha önce şu yazımda sizlere etiketlere göre otomatik olarak düzenlenen bir slider örneği sunmuştuk. Şimdi yine benzer bir sistem ile çalışan bu sefer bir menü şeklinde olan bir sistemi tanıtıyoruz.





Bu Eklenti Nasıl Yüklenir ?

Eklentiyi yüklemek gerçekten çok basit. 


  1. Blogger Kumanda Paneli > Blogunuz > Tasarım
  2. Html'yi Düzenle.
Aşağıdaki CSS kodlarını ]]></b:skin> bu koddan önce yapıştırın.

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

2. olarak  Javascripti hazırlayalım

Blogunuzda önceden jQuery kullandıysanız bu kısmı pas geçin. Aksi takdirde yani kullanmadıysanız  aşağıdaki kodu </head> kodundan öncesinde yapıştırın.


<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 Aşağıdaki kodu </head> kodundan öncesinde yapıştırın.


<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, // Gösterilecek yazı sayısı
  defaultImg : 'http://url-to-image.com/default-image.jpeg' // Varsayılan resim
 });
});
</script>


Etiket
URL'sihttp://blogunuzunismi.blogspot.com/search/label/LABELNAME
Search Queryhttp://blogunuzunismi.blogspot.com/search?q=SEARCHQUERY
Label w/ Search Queryhttp://blogunuzunismi.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY
Search Query kodu encode edilmeli.. Aşağıdaki sayfayı kullanabilirsiniz 
http://meyerweb.com/eric/tools/dencoder/



<ul id="w2bajaxmenu" class="w2bmenu">
 <li>
  <a href="#">Home</a>
 </li>
 <li>
  <a href="#">Example 1</a>
  <ul>
   <li><a href="http://blogunuzunismi.blogspot.com/search/label/AdSense">Sample Label</a></li>
   <li><a href="http://blogunuzunismi.blogspot.com/search/label/Gadgets?q=harish">Label w/ Search</a></li>
   <li><a href="http://blogunuzunismi.blogspot.com/search?q=way2blogging">Search Query</a></li>
   <li><a href="http://blogunuzunismi.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://blogunuzunismi.blogspot.com/search/label/Design">Design</a></li>

Teşekkürler Way2blogging

Kaynak:
http://www.way2blogging.org/2012/12/new-ajax-navigation-menu-widget-for-blogger.html 


19:32
, , ,

Ücretsiz Hosting
 
Top