Konsep Basit Ajax Menü Oluşturma

4/24/2016
Konsep Basit Ajax Menü Oluşturma - Blogunuzda biraz değişiklik yapmak istiyorsanız özellikle de moda bloglarında farklı bir menü oluşturmak zor gibi gözükse de sizlerle paylaşmış olduğum menü sayesinde blogunuzun ihtiyaç olan Ajax Drop Down olarak da bilinen Konsep Basit Ajax Menü  blogunuza uygulayabilirsizin. Blogger blogları için açılır resimli menü yapmak isteyenler için yeni nesil blogger eklentilerine bir yenisini daha eklemiş oluyoruz.

Blogger Eklentileri

Blogger Ajax Menü Nasıl Oluşturulur?

Blogger blogunuza açılır resimli menüyü eklemek için aşağıdaki seçenekleri uygulamalısınız.

1. Blogger blogunuzun kumanda paneline giderek eklemek istediğiniz blogun Şablon > HTML'i Düzenle diyoruz ve CTRL+F yardımıyla <head> kodunu buluyoruz. Aşağıdaki kodları <head> kodunun hemen altına ekleyin.
<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/0BwDz8flINeefM1VoVkZRaFpjekE" />
2. Yine CTRL+F yardımıyla </body> kodunu buluyoruz. Aşağıdaki kodları </body> kodunun bir satır üzerine ekleyin ekleyin.
<script src='https://googledrive.com/host/0BwDz8flINeefRzFwUnJRSVNZMU0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){$('#adajaxmenu').ajaxBloggerMenu({numPosts:4,defaultImg:'http://2.bp.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAALVs/wlSvXPgdDAo/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>
3. Aşağıdaki HTML kodu yani Ajax Menüyü nerede görmek istiyorsanız oraya ekleyebilirsiniz. Mesela Header yada Header1 altına ekleyebilirsiniz. Aşağıdaki kodda mavi renkli alanı kendinize göre düzenleyin yani mevcut URL ve kategori isimleri kendinize göre düzenleyin.
<ul id="adajaxmenu" class="admenus">
<li><a href='/'><i class="material-icons md-24">home</i></a></li>    
<li>
<a href="http://cizgifilmhikayeleri.blogspot.com/">Anime</a>
<ul>
<li><a href="http://cizgifilmhikayeleri.blogspot.com.tr/search/label/Rafadan%20Tayfa">Rafadan Tayfa</a></li>
<li><a href="http://cizgifilmhikayeleri.blogspot.com.tr/search/label/Ekolar%C4%B1n%20Bah%C3%A7esi">Ekoların Bahçesi</a></li>
<li><a href="http://cizgifilmhikayeleri.blogspot.com.tr/search/label/Barbie">Barbie</a></li>
<li><a href="http://cizgifilmhikayeleri.blogspot.com.tr/search/label/Kelo%C4%9Flan">Keloğlan Masalları</a></li>
<li><a href="http://cizgifilmhikayeleri.blogspot.com.tr/search/label/Kikoriki">Kikoriki</a></li>
</ul>
</li>
<li>
<a href="http://sagliklibitkiturleri.blogspot.com/">Sağlık</a>
<ul>
<li><a href="http://sagliklibitkiturleri.blogspot.com.tr/search/label/Sa%C4%9Fl%C4%B1kl%C4%B1%20Meyveler">Sağlıklı Meyveler</a></li>
<li><a href="http://sagliklibitkiturleri.blogspot.com.tr/search/label/Egzotik%20Meyveler">Egzotik Meyveler</a></li>
<li><a href="http://sagliklibitkiturleri.blogspot.com.tr/search/label/Diyet%20Meyveleri">Diyet Meyveler</a></li>
<li><a href="http://sagliklibitkiturleri.blogspot.com.tr/search/label/G%C3%BCzellik%20Meyve%20Diyetleri">Güzellik Meyve Diyetleri</a></li>
<li><a href="http://sagliklibitkiturleri.blogspot.com.tr/search/label/Tropikal%20Meyveler">Tropikal Meyveler</a></li>
</ul>
</li>
<li>
<a href="http://bloggereklentileri.blogspot.com/">Blogger</a>
<ul>
<li><a href="http://bloggereklentileri.blogspot.com.tr/search/label/Javascript">Eklentiler</a></li>
<li><a href="http://bloggereklentileri.blogspot.com.tr/search/label/CSS">CSS</a></li>
<li><a href="http://bloggereklentileri.blogspot.com.tr/search/label/HTML">HTML</a></li>
<li><a href="http://bloggereklentileri.blogspot.com.tr/search/label/Javascript">Javascript</a></li>
<li><a href="http://bloggereklentileri.blogspot.com.tr/search/label/Widget">Widget</a></li>
</ul>
</li>
<li><a href="http://cizgifilmhikayeleri.blogspot.com.tr/p/cizgi-film-hikayeleri-arsiv.html">Arşiv</a></li>
<li><a href="http://bloggereklentileri.blogspot.com.tr/p/blogger-eklentileri-iletisim.html">İletişim</a></li>
<li class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='Ara ...' size='30' type='text'/>
<button class='searchsubmit' type='submit'><i class="material-icons md-24">search</i></button>
</form>
<p class='search-alert'><i class="material-icons md-24">report_problem</i> Arama formu boş!</p>
</li>    
</ul>
<div class='clear'/>    
<div class='clear'/>
Sonuç: Konsep Basit Ajax Menümüzü Oluşturmuş olduk. Eğer yapamayan arkadaşlar olursa iletişim yada yorum kısmından bize ulaştığınız takdirde sizlere yardımcı olmaya çalışırız.

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

1 yorum

Muhtesem bir tema blog lard harika duruyor

Cevap