Blogger İçin CSS Açılır Üst Menü

Blogger şablonların da sıkça görünen açılır liste menüleri standart olarak dağıtıldığı için bir çok kullanıcı kullanmadan önce düzenlemelerde sıkıntı yaşayabiliyor. Bu durumu ortadan kaldırmak için farklı şekillerde kodlarla elde ettiğimiz seçenekler zamanla ziyaretçi kaybına sebep olsada blogger ğeliştikçe sizinde sitenizi geliştirmek zorundasın kesinlikle.


Menüde özellikle iki link ekledim biri açılır biri sabit link olmak üzere. İstediğimiz gibi düzenleyerek kendimize uygun bir menü elde edeceğiz. Öncelikle Menüyü kullanmak için Blogger kontrol panelinden Yerleşim ayarlarını geçin, Gadget Ekle seçeneği ile HTML/JavaScript   seçerek aşağıda ki kodları ekleyin ve katdedin daha sonra kodlar içinde değişiklik yapmak isterseniz onuda belirteceğim.

<!--MBL Animated CSS3 Multi Drop Down Menu For Blogger-->
<link rel="stylesheet" type="text/css" href="http://mybloggerlab.com/StyleSheet/MBLNAV.css"/>          


<nav id="mbl-menu-wrap">    

 <ul id="mbl-menu">

////////////////////BURAYA MENÜ KODLARI EKLENECEK ////////////////////

    </nav>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(function() {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
  $('li').has('ul').mouseover(function(){
   $(this).children('ul').css('visibility','visible');
   }).mouseout(function(){
   $(this).children('ul').css('visibility','hidden');
   })
  }

  /* Mobile */
  $('#mbl-menu-wrap').prepend('<div id="mbl-menu-trigger">mbl-Menu</div>');  
  $("#mbl-menu-trigger").on("click", function(){
   $("#menu").slideToggle();
  });

  // iPad
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  if (isiPad) $('#mbl-menu ul').addClass('no-transition');      
    });   
       
</script>

Menüde kullanabileceğimiz iki seçenek var. Yukarıda kırmızı ile belirtilen alanı aşağıda ki kodları ekleyerek sabit link butonu yada açılır link butonu elde edebilirsiniz.
http://etralibela-61.blogspot.com/ yazan kısıma kendi sitenizi ekleyin.
LİNK 1 yazan kısıma ise başlığa verecek olduğunuz isimi yazın

 <li><a href="http://etralibela-61.blogspot.com/">LİNK 1</a></li>

Açılır link oluşturmak istiyorsanız eğer aşağıda ki kodları kullanmanız gerekiyor. Kırmızı ile belirtilmiş alana aşağıda ki kodları ekleyin. Açılır Menü kısmı ve türevleri görünecek içeriği, link kısımları ise yöneleceği adresi belirler.

<li> <a href="http://etralibela-61.blogspot.com/">Açılır Menü</a> <ul> <li><a href="http://etralibela-61.blogspot.com/">Açılır Menü - 1</a></li> <li><a href="http://etralibela-61.blogspot.com/">Açılır Menü - 2</a></li> <li><a href="http://etralibela-61.blogspot.com/">Açılır Menü - 3</a></li> <li><a href="http://etralibela-61.blogspot.com/">Açılır Menü - 4</a></li> </ul> </li> </ul> 

Oluşturduğunuz listede ki menüde açılacak olan link sayısının daha fazla olmasını istiyorsanız eğer. </ul> kodundan önce aşağıda gördüğünüz sabit link kodu olan satırı tekrar ekleyin :

<li><a href="http://etralibela-61.blogspot.com/">Açılır Menü - 4</a></li>

Aşağıda da  gördüğünüz gibi kod haline getirirseniz açılan liste menüsü sayısı beşe çıkacaktır.

<li> 
<a href="http://etralibela-61.blogspot.com/">Açılır Menü</a> 
<ul> 
<li><a href="http://etralibela-61.blogspot.com/">Açılır Menü - 1</a></li> 
<li><a href="http://etralibela-61.blogspot.com/">Açılır Menü - 2</a></li> 
<li><a href="http://etralibela-61.blogspot.com/">Açılır Menü - 3</a></li> 
<li><a href="http://etralibela-61.blogspot.com/">Açılır Menü - 4</a></li> 
<li><a href="http://etralibela-61.blogspot.com/">Açılır Menü - 5</a></li> 
</ul> 
</li> 
</ul> 

İki kod dizini istediğin sıralayarak defalarca kullanıp dilediğiniz tarzda ve dilediğiniz sayıda açılma gösteren üst menü başlığı oluşturabilirsiniz.

Bu şekilde açılır menü sayısını istediğiniz sayıda çoğaltarak yada azaltabilirsiniz.

Üste ki kod içerisinde yapılaak değişiklikler;
Kırmızı ile belirtilmiş kısıma yönlentirmek istediğiniz linki ekliceksiniz.
Mavi yazılı kısıma ise linki yönlendirecek olduğunuz menü başlığını ekleyin

Örneğin;

<li><a href="http://etralibela-61.blogspot.com/p/blog-page_3290.html">Videolar</a></li> 

Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.