içinde , ,

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.
demo button
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’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ça
http://www.way2blogging.org/2012/12/new-ajax-navigation-menu-widget-for-blogger.html

Yazar sosyofikir

Doğu Akdeniz Üniversitesi Mimarlık Fakültesi'nden 2018 yılında mezun oldum. Blog serüvenim yaklaşık 8 sene önce başladı. Hala o eski heyecanımı taşımaktayım. Amacım sizler için kaliteli, özgün ve sıkıcı olmayan kullanıcı tabanlı bir site hazırlamaktır. Teşekkür ederim. Bana her türlü konuda ulaşabilirsiniz.

3 Yorum

Yorum Bırakın

Bir cevap yazın

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

agresif reklam

Blogger Sitelerine Pop Up Kodu

220px TheWalkingDeadAfiş

En İyi Epik Film Ve Dizi Müzikleri