Açılır Menü-Blogger Drop-Down Menü

Son zamanlarda içerik sayısı artan bazı blogcu arkadaşlardan bloglarına açılır menü ekleyerek, yazı  linklerinin ana sayfada görünmesini ve ziyaretçilerin yazılara ulaşımını kolaylaştıracak açılır menü yapımı ile ilgili mailler aldım ve blogger için modern ve klasik tarayıcıların çoğu ile uyumlu olarak çalışan açılır menü yapımının en kolay yolunu 3 adımda anlatmaya karar verdim.Öncelikle her ihtimale karşı şablonumuzun bir yedeğini alalım.Yüklemeden önce açılır menünün nasıl göründüğüne bakmak isterseniz ön izleme için tıklayın.

1.Adım:Açılır Menü CSS Kodunu Ekleyelim

Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip ediyoruz.Widget Şablonlarını Genişlet kutucuğunu işaretliyoruz.Ctrl+F yardımıyla aşşağıdaki kodu aratıp buluyoruz.

]]></b:skin>

Aşşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

2.Adım:Java Kodlarımız Ekleyelim
Yine aynı sayfada kodlar içerisinde aşşağıdaki kodu bulalım.

</head>

Aşşağıdaki kodu kopyalayıp bulduğumuz </head> önceki kısma yapıştıralım

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
  //]]>
  </script>

Şimdi Temamızı Kaydedelim.

3.Adım:Blogumuz İçin Açılır Menümüzü Ekleyelim
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edelim ve aşşağıdaki kodu kopyalayıp açılan gadgetimizin içine başlıksız olarak kaydedelim.

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="www.blogokulu.blogspot.com">Blog Okulu</a></li>
  </li></ul>

Kod içerisinde mavi ile işaretlediğimiz yerlere yazı linkinizi,kırmızı ile işaretlediğimiz yerler memüde görünecek isimler.Yeşil renkli yerler ise  ana menü yani butonlar içerisinde yazılacak olanlardır.
Gadgetimizi kaydedip görünmesini istediğimiz yere sürükleyip bırakıyoruz.Bu gadgeti başlık satırının hemen altında koymanızı tavsiye ederim.