Blogunuz İçin Yeni Ajax Menüsü.

4 dakika


46
10 Paylaşım, 46 Beğeni

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>

 HTML KISMI

Etiket

URL’si http://blogunuzunismi.blogspot.com/search/label/LABELNAME
Search Query http://blogunuzunismi.blogspot.com/search?q=SEARCHQUERY
Label w/ Search Query http://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ça
http://www.way2blogging.org/2012/12/new-ajax-navigation-menu-widget-for-blogger.html


Beğendiniz mi? Arkadaşlarınızla Paylaşın!

46
10 Paylaşım, 46 Beğeni

Sizin Tepkiniz Nedir?

Beğendim Beğendim
0
Beğendim
Beğenmedim Beğenmedim
0
Beğenmedim
Şaşırdım Şaşırdım
0
Şaşırdım
Güldüm Güldüm
0
Güldüm
İnanılmaz İnanılmaz
0
İnanılmaz
Kızdım Kızdım
0
Kızdım
Oha Oha
0
Oha

3 Yorum

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bir format seç
Kişisel Test
Kişisel bir şey ortaya koymayı amaçlayan sorular dizisi
Basit Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Anket
Karar verme ya da görüş belirleme/oy verme
Serbest Yazı
Yazılarınıza Görseller Bağlantılar Ekleyebilirsiniz
Liste
Klasik İnternet Listeleri
Geri Sayım Listesi
Klasik İnternet Geri Sayım Listeleri
Açık Liste
Kendi öğenizi gönderin ve en iyi sunum için oy verin
Oylanabilir Liste
En iyi liste öğesine karar vermek için yukarı veya aşağı basın