Blogger İçin Ajax Menü Yapımı

Eylül 11, 2015
Blogger İçin Ajax Menü Yapımı

Blogger resimli ajax drop down menü yapımı. Blogger bloğunuzu için bu zamana kadar pek çok farklı şekilde menü yapımı anlatıldı. Bunların hepsi basit menülerdi. Şim benim size anlatacağım menüde linklerin kategorilerin üzerine fare imlecini getirdiğinizde drop down şeklinde belirlediğiniz kategoriye ait yazılar resimleriyle birlikte menüde gösterilir.

Ayrıca bu menüde şık bir arama kutusu da var.

Benim kullandığım menü sade şekilde hazırlanmıştır. Siz bu ajax menüyü bloğunuza eklediğinizde mesela benim blog eklentileri diye bir kateğorim varya üzerine imleci getirince bu kategoriye ait yazılar resimleriyle birlikte gösterime açılır. Aşağıdaki demoya bakınca ne demek istediğimi daha iyi anlarsınız.



Gördüğünüz üzere menümüz resimli şekilde kategorilere ayrılıyor. Siz bu kategori sayısını dilediğinizce artırabilir veya eksiltebilirsiniz.

Anlatıma geçelim:
1. Blogger giriş
2. Şablon
3. HTML'yi Düzenle
4. Kodlar üzerinde bir yere tıklayıp CTRL+F tuşlarına basarak arama kutusunu açın ve <head> kodunu bulun.
5. Bu kodun alt satırına aşağıdaki kodları yapıştırın.


<link href = 'https: //maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel = 'stylesheet' type = 'text / css' />
<link rel = "stylesheet" type = "text / css" href = "https://googledrive.com/host/0BxB51PrIeBaiVzZhNU9BM3o1a28" />

6. Şimdi </body> kodunu bulun ve üst satırına aşağıdaki kodları yapıştırın.


<script src='https://googledrive.com/host/0BxB51PrIeBaieVdkOHptSFIyZ0U' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){$('#adajaxmenu').ajaxBloggerMenu({numPosts:4,defaultImg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx6eyKa0KrtV6V7S1mpFe_b7bXd0h6ML2ifPnMDd3igDVCmLOcNppZprc-UNIElGwHE17jiLNwUIJ5yLcj7vMMpRTcw7yYwQlJEe_VpaxhQsU0Lo9SyvBVXezkpyms5xja6uc6aG2UGSs/s1600/no_image_available.png'})});$(function(){$('.searchblog').submit(function(e){if($('.search-form .searchbar').val().length==0){$('.search-form .search-alert').fadeIn().css('display','inline-block');e.preventDefault()}})});
</script>

7. Şimdi aşağıdaki HTML kodlarını menüyü göstermek istediğiniz yere yapıştırın. Mesela blog başlığının altında olsun diyorsanız siteniz şablon kodları açıkken üstteki menüden Widget'a atla butonundan Header1 şeçeneğine tıklayın ve onun alt satırına yapıştırın.

<ul id="adajaxmenu" class="admenus">
    <li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>    
<li>
<a href="#">Webtools</a>
<ul>
<li><a href="kategori linki buraya">Tricks</a></li>
<li><a href="kategori linki buraya">AD Convertor</a></li>
<li><a href="kategori linki buraya">HTML Editor</a></li>
<li><a href="kategori linki buraya">Code Encode</a></li>
</ul>
</li>
<li>
<a href="#">Widgets</a>
<ul>
<li><a href="kategori linki buraya">Widgets</a></li>
<li><a href="kategori linki buraya">SEO</a></li>
<li><a href="kategori linki buraya">CSS</a></li>
</ul>
</li>
<li>
<a href="#">Tutorials</a>
<ul>
<li><a href="kategori linki buraya">Tutorials</a></li>
<li><a href="kategori linki buraya">Blogger</a></li>
<li><a href="kategori linki buraya">WordPress</a></li>
<li><a href="kategori linki buraya">Earning</a></li>
<li><a href="kategori linki buraya">Domain Finder</a></li>
</ul>
</li>
<li><a href="kategori linki buraya">Password Maker</a></li>
<li><a href="kategori linki buraya">Contact</a></li>
<li class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='searchsubmit' type='submit' value='Search'/>
</form>
  <p class='search-alert'>Search form is empty!</p>
</li>    
</ul>
<div class='clear'/>    
<div class='clear'/>

8. Şablonu kaydedin.
Kırmızya belirtiğim yerleri kendi kategori isimlerinizle değiştirmeyi unutmayın. kategori linki buraya yazan yere de ait olan kendi kategori linklerinizi yazın.
Örnek kategori linki: http://blogbakkali.blogspot.com.tr/search/label/Blog Eklentileri?max-results=5 Mavi yerlerine kendinize göre belirleyin
9. Tebrikler ajax drop down menü hazır:) 

Blogger için açılır resimli kategorili menü yapımını anlattım. Aklınıza takılan yerleri yorumla sormaktan çekinmeyin. Destek için bloğumu izleyin arada yorum atın yeter :) İyi bloglamalar canlar.

Ne demiştik en iyi bloglar için Blog Bakkalı :)

Altı yıldır blog işleriyle uğraşıyorum. Edindiğim tecrübeleri sizlerle paylaşıyorum.

12 Yorum
avatar

Güzel görünüyor aslında zamanım olunca uygularım belki

Yanıtla
avatar

senin bloğuna çok yakışacağını düşünüyorum.

Yanıtla
avatar

Güzel bir menü arşivime aldım. Teşekkürler paylaşım için

Yanıtla
avatar

daha da faydalı olurum umarım :) ben teşekkür ederim.

Yanıtla
avatar

6. Şimdi kodunu bulun ve üst satırına aşağıdaki kodları yapıştırın.

hangi kodu bulalim kafam karisti

Yanıtla
avatar

</body> kodunu bulacaksınız.

Yanıtla
avatar

7 numaralı kodu tam olarak nasıl ekleyeceğiz bunu blogger üzerinden ekran görüntüsünü paylaşarak açıklar mısınız ?
Misal ben kategoriler; spor, haber, eğlence olarak bir menu başlığı açacağım ve ona göre düzenleme yapacağım, bunun gibi
inşallah anlatabilmişimdir kendimi

Yanıtla
avatar

http://i.hizliresim.com/o986mk.png

Yanıtla
avatar

http://i.hizliresim.com/48qGyL.png

Yanıtla
avatar

resim üzerinde sağ tık yapıp resmi yeni sekmede aç dersen büyük halini görebilirsin.

Yanıtla
avatar

Süpersin ya blog tasarimi yapanlar kızacak sana. .

Yanıtla
avatar

Responsive olsa tam aradığım menü tasarımı

Yanıtla

Yorumlarda Kod vs. Kullanmak İÇİN
  • Lütfen sadece bu konuyla ilgili yorumlarınızı bırakınız.
  • Yoruma kod eklemek için <i rel="code"> kodu bunun yerine yazın </i>
  • Daha uzun kod eklemek için <i rel="pre"> kodu bunun yerine yazın </i>
  • Tırnak işareti kullanmak için <i rel="quote"> yorumu bunun yerine yazın </i>
  • Resim eklemek için <i rel="image"> resim url </i>
  • Video eklemek için [iframe] URL embed kodunu buraya yapıştırın [/iframe]
  • Sonra aşağıdaki butona basın ve kodları dönüştürün.
  • © 2015 Blog Bakkalı ✔