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>

 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

Tepkiniz nedir?

Çok Eğlendim Çok Eğlendim
0
Çok Eğlendim
Deneme Deneme
0
Deneme
Beğendim Beğendim
0
Beğendim
Yarıldım Yarıldım
0
Yarıldım
Sinirlendim Sinirlendim
0
Sinirlendim
hate hate
0
hate
Kafam Karıştı Kafam Karıştı
0
Kafam Karıştı
Fail Fail
0
Fail
Çalışkan Çalışkan
0
Çalışkan
Lol Lol
0
Lol
Aşık oldum Aşık oldum
0
Aşık oldum
Aman Tanrım Aman Tanrım
0
Aman Tanrım
Korktum Korktum
0
Korktum
Rahatladım Rahatladım
0
Rahatladım
OHA OHA
0
OHA
sosyofikir
Mimarlık Fakültesi sonsınıf öğrencisi, mimar adayı. :) 2010'dan beri sosyofikir.com blogumla yayın yapıyorum. Sosyal, müzik, felsefe, psikoloji, güncel, yaşam ve daha bir çok konuyla yakından ilgileniyorum. Siz değerli okurlarıma elimden geldiğince güzel içerikler sunmaya çalışıyorum. Hatamız olursa affola :)

3 Comments

Bu yazılarımızda ilginizi çekebilir..

More From: Blogger eklentileri

DON'T MISS

Bir format seç
Kişisel Test
Kişisel bir şey ortaya koymayı amaçlayan sorular dizisi
Önemsiz Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Anket
Karar verme ya da görüş belirleme/oy verme
Hikaye/Olay
Gömülü ve Görsellerle Biçimlendirilmiş Metin
Liste
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Açık Liste
Submit your own item and vote up for the best submission
Oylanabilir Liste
Upvote or downvote to decide the best list item
Video
Youtube, Vimeo veya Vine Kodları
Ses
Soundcloud or Mixcloud Embeds
Görsel
Fotoğraf veya GIF
GIF
GIF Formatı