Blogger için Mashable stil ajax navigasyon menü

Blogger için AJAX Navigasyon menüsü Blogger JSON beslemesi API ve AJAX kullanarak Blogger platformu için oluşturulan çok yeni widget. Bu navigasyon menüsü Mashable.com eski sitesinden esinlenmiştir. Tekrardan kodlanmış ve geliştirilmiş bu widget'a özelleştirilebilir özellikler eklendi. Bu widget jQuery kütüphanesi ve Blogger json beslemesi, API tabanlı çalışır. Javascript devre dışı olduğunda menü sadece normal açılır menü gibi çalışır ve javascript etkin olduğunda bu AJAX dönerek açılır ve alt menüleri resimli şekilde açar.

Blogger Ajax Menü önizleme

Bu Eklenti Nasıl Kurulur?

1. Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle
2. Ctrl+F yardımı ile ]]></b:skin>  kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.

.mefmenu *{margin:0;padding:0;}
ul.mefmenu{list-style:none;line-height:1;overflow:visible!important;}
ul.mefmenu:after{content:' ';display:block;height:0;clear:both;margin:0;padding:0;}
#mefajaxmenu {width:960px;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;}
ul.mefmenu li{list-style:none;position:relative;float:left;margin:0!important;padding:0!important;}
ul.mefmenu li a{font-family:Arial, georgia, Helvetica, sans-serif!important;color:#6b6b6b!important;text-shadow:0 1px 0 #fff;text-decoration:none;font-weight:400!important;text-transform:capitalize!important;font-size:12px!important;display:block!important;border:0 none!important;margin:0;padding:12px 16px!important;}
ul.mefmenu li a:hover,ul.mefmenu li a.hoverover{background:#f5f5f5!important;}
ul.mefmenu ul{position:absolute;display:none;top:100%;border:1px solid #ccc;}
ul.mefmenu ul li{float:none;min-width:160px;background:#f5f5f5;text-shadow:none;}
ul.mefmenu ul li a{text-transform:none;font-weight:400;padding:12px 14px;}
ul.mefmenu ul li a:hover,ul.mefajaxmenu ul li a.hoverover{background:#fff!important;}
ul.mefmenu ul ul{display:none;left:100%;top:0;}
ul.mefajaxmenu 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 #ccc;border-top:0 none;}
ul.mefajaxmenu ul,ul.mefajaxmenu ul li{display:block!important;border:0 none!important;margin:0!important;padding:0!important;}
ul.mefajaxmenu ul li{background:none!important;float:none!important;}
ul.mefajaxmenu ul.verticlemenu{position:absolute;width:33%;left:0;top:0;bottom:0;background:#f5f5f5;}
ul.mefajaxmenu ul.postslist{position:relative;display:block;width:65%;float:right;background:none;margin:8px 0!important;}
ul.mefajaxmenu ul.postslist li{display:block;overflow:hidden;border-bottom:1px #eee solid;position:relative;min-height:60px;padding:8px 8px 8px 110px !important;}
ul.mefajaxmenu ul.postslist li:last-child{border-bottom:none 0;}
ul.mefajaxmenu 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.mefajaxmenu ul.postslist li .imgCont img{position:relative;top:-20px;width:100px;height:100px;display:block;padding:0;}
ul.mefajaxmenu ul.postslist li a{display:block;line-height:1.4;padding:0!important;}
ul.mefajaxmenu .loader{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0zu5cWxVlormWQ5nVmkYE8fCvovQq3gIHCTwGJ1EfOIhkn-ru5c0ekEt9KMdrqOOoFWRDt0OMQYdcTIYuv3iavXHE_zYYjMG6nKVmLIXCQ9f2gmMov2BtfHNxzKsYAeXRnyLx01H-F_E/s128/loading_icon_1.gif) no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px;}
ul.mefajaxmenu .menuArrow{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #999;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0;}
ul.mefmenu li:hover > ul,ul.mefajaxmenu li:hover div.submenu{display:block;}

1. Tekrar Ctrl+F yapıp  </head> kodunu buluyoruz ve hemen üstüne aşağıdaki javascript kodlarını kopyalayıp yapıştırıyoruz.
2. Şablonu Kaydet diyip çıkın.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://meftun-mede.googlecode.com/svn/trunk/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#mefajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Konu Sayısı
defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg' // Varsayılan küçük resim
});});
</script>

Bu bölümde HTML linklerimizi dikkatli eklememiz gerekiyor, aksi takdirde eklenti doğru çalışmaz.
AJAX Menü URL'ler üç tür kabul eder. Menüde sadece bu URL'leri kullanmanız gerekir. Bunlar Etiket (Label), Arama Sorgusu (Search Query) ve Etiket ile Arama Sorgusu (Label with Search Query).

Etiket URL	http://blogadresiniz.blogspot.com/search/label/LABELNAME
Arama Sorgusu	http://blogadresiniz.blogspot.com/search?q=SEARCHQUERY
Etiket ile Arama Sorgusu	http://blogadresiniz.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

• Son olarak Blogger panelinizden Yerleşim > Gadget Ekle > HTML/JavaScript yolunu takip edin.
• Ve aşağıdaki kodları Online HTML Editör ile isteginize göre ayarlayarak kopyalayıp yapıştırın.
• Kaydet diyip çıkın.

<ul id="mefajaxmenu" class="mefmenu">
<li>
<a href="http://meftunmede.blogspot.com">ANA SAYFA</a>
</li>
<li>
<a href="#">ÖRNEK 1</a>
<ul>
<li><a href="http://meftunmede.blogspot.com/search/label/Sosyal%20Medya">SOSYAL MEDYA</a></li>
<li><a href="http://meftunmede.blogspot.com/search/label/Blogger%20Eklentileri">BLOGGER EKLENTİLERİ</a></li>
<li><a href="http://meftunmede.blogspot.com/search/label/Yemek%20Tarifleri">YEMEK TARİFLERİ</a></li>
<li><a href="http://meftunmede.blogspot.com/search/label/Filmler">FİLMLER</a></li>
</ul>
</li>
<li>
<a href="#">ÖRNEK 2</a>
<ul>
<li><a href="http://meftunmede.blogspot.com/search/label/Html%20Kodlar%C4%B1">HTML KODLARI</a></li>
<li><a href="http://meftunmede.blogspot.com/search/label/Programlar">PROGRAMLAR</a></li>
<li><a href="http://meftunmede.blogspot.de/search/label/%C4%B0nternet">İNTERNET</a></li>
<li><a href="http://meftunmede.blogspot.de/search/label/Ara%C3%A7lar">BLOGGER ARAÇLARI</a></li>
</ul>
</li>
<li><a href="http://www.MeftunApart.com">NORMAL LİNK</a></li>
</ul>

Özelleştirme

Kırmızıyla işaretli yerlerde;
1- Style kodlarında width:960px; menünüzün genişliği,
2- Script kodunda numPosts : 4, // Alt menüde görünmesini istediğiniz konu sayısı
3- Ve menüde kendi blogumdan örnekler verdiğim kırmızıyla işaretli bölümleri (Linkler ve isimleri) değiştirebilirsiniz, çoğaltabilirsiniz.

Umarım eklenti hoşunuza gitmiştir. Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...