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 belirleyin9. 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ı :)
12 Yorum
Güzel görünüyor aslında zamanım olunca uygularım belki
Yanıtlasenin bloğuna çok yakışacağını düşünüyorum.
YanıtlaGüzel bir menü arşivime aldım. Teşekkürler paylaşım için
Yanıtladaha da faydalı olurum umarım :) ben teşekkür ederim.
Yanıtla6. Şimdi kodunu bulun ve üst satırına aşağıdaki kodları yapıştırın.
Yanıtlahangi kodu bulalim kafam karisti
</body> kodunu bulacaksınız.
Yanıtla7 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 ?
YanıtlaMisal 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
http://i.hizliresim.com/o986mk.png
Yanıtlahttp://i.hizliresim.com/48qGyL.png
Yanıtlaresim üzerinde sağ tık yapıp resmi yeni sekmede aç dersen büyük halini görebilirsin.
YanıtlaSüpersin ya blog tasarimi yapanlar kızacak sana. .
YanıtlaResponsive olsa tam aradığım menü tasarımı
YanıtlaYorumlarda Kod vs. Kullanmak İÇİN