En yeni: Dünyanın en iyi 10 video düzenleme programı Trending: İnternetten para kazanmak, Ekgelir, En iyi Tıkla Kazan (PTC) Siteleri

Blogger için Mashable stil ajax navigasyon menü

Blogger Mashable stil Ajax 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.

ÖNİZLEME

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://lh5.googleusercontent.com/-4qjg1CclZ64/UK6TG-7resI/AAAAAAAAJ6w/z6dE6nRTNKI/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://meftunmede.github.io/javascripts/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#mefajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Konu Sayısı
defaultImg : 'http://2.bp.blogspot.com/-yRSXWDTHZlA/T6s8tkMqNnI/AAAAAAAAA7w/SEgoiBELIF4/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://www.meftunmede.com">ANA SAYFA</a>
</li>
<li>
<a href="#">ÖRNEK 1</a>
<ul>
<li><a href="http://www.meftunmede.com/search/label/Sosyal%20Medya">SOSYAL MEDYA</a></li>
<li><a href="http://www.meftunmede.com/search/label/Blogger%20Eklentileri">BLOGGER EKLENTİLERİ</a></li>
<li><a href="http://www.meftunmede.com/search/label/Yemek%20Tarifleri">YEMEK TARİFLERİ</a></li>
<li><a href="http://www.meftunmede.com/search/label/Filmler">FİLMLER</a></li>
</ul>
</li>
<li>
<a href="#">ÖRNEK 2</a>
<ul>
<li><a href="http://www.meftunmede.com/search/label/Html%20Kodlar%C4%B1">HTML KODLARI</a></li>
<li><a href="http://www.meftunmede.com/search/label/Programlar">PROGRAMLAR</a></li>
<li><a href="http://www.meftunmede.com/search/label/%C4%B0nternet">İNTERNET</a></li>
<li><a href="http://www.meftunmede.com/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...

4 yorum:

  1. Merhaba;

    Herşeyi doğru yaptığımı düşünüyorum fakat bir türlü beceremiyorum hatayı bulmamda bana yardımcı olabilirmisiniz :(

    YanıtlaSil
    Yanıtlar
    1. Etiketleri yanlış yazmış olabilirsiniz. Örnek veriyorum;
      Sayfanızdaki FOTOĞRAF etiketi:
      http://sayfaniz.blogspot.com/search/label/FOTO%C4%9ERAF

      Sil
  2. Herşeyi denedim ama bir türlü olmuyor

    YanıtlaSil
  3. html koduna uygunmudur acaba ?

    YanıtlaSil

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

 
  • Meftun Apart

    Meftun Apart Fethiye

    Apartlarımız deniz ve plaja 50 metre mesafede olup, klimalı, full eşyalı 2+1, 1+1, 4-6 kişilik ve havuzlu apartlardan oluşmaktadır.

  • Meftun Mede Blogger

    MEDE Blogger Tema Yardım

    Blogger şablonuzda, temanızda yardımamı ihtiyacınız var? Hertürlü blogger tema yardımı ücretsiz yapılır...

  • Sitemap sayfası oluşturma

    Sitemap sayfası oluşturma

    Sitemap bir web sitesinin haritasıdır.Arama motorlarının web sitelerini hızlı, daha çabuk ve tam olarak indexlemesi için oluşturulurlar.

  • hit arttırma

    Sitenizin hitini arttırın!

    Kaliteli hit arttırma sitemi ile ücretsiz hit kazanın, sitenizi Google'da yükseltin! Sitenizi ekleyin ve binlerce ziyaretçi kazanın!

  • internetten para kazan

    İnternetten para kazan !

    Boş zamanınızı internetde reklam izleyek ve bundan para kazanarak geçirebilirsiniz. Ek gelir elde edebilirsiniz!