Bumerang - Yazarkafe

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.
PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

25 yorum:

  1. Tanemmelis838 Mart 2012 11:44

    merhaba öncelikle emeğine sağlık.Bu menüyü bloguma ekledim fakat üzerine tıklanınca renk maviye dönüyor.Bunu açık bordo yapmak istiyorum.Yardımcı olursanız sevinirim.http://mctubi.blogspot.com/

    YanıtlaSil
  2. Tanemmelis838 Mart 2012 15:18

    Teşekkür ederim.Daha yeni  başladığım için  pek bilgi sahibi değildim.Öğrenmeye çalışıyorum işte siteniz sayesinde;)

    YanıtlaSil
  3. Rica ederim.Blogla ilgili aklınıza takılan ne olursa sorabilirsiniz.Dilimiz döndüğünce klavyemiz yazdığı sürece yardımcı olmaya çalışırız.

    YanıtlaSil
  4. mavi kare işaretine yazacağımız yazı linki nedir acaba,hepsini uyguladım ama bir türlü olmadı başardığım kısımlarda da açılan menüdeki isimlere tıklayınca sayfa açılmıyor

    YanıtlaSil
  5. YAN TARAFA EKLEYİNCE OLUYOR ANCAK BAŞLIK SATIRI ALTINDA MENÜLER AÇILMIYOR ACABA NEDEN

    YanıtlaSil
  6. script kodunu doğru yere yapıştırdığınıza eminmisiniz? 

    YanıtlaSil
  7. Örnek:Menüde Blog Okulu görünecek,blog okuluna tıklayınca blog okulu sitesinin açılmasını istiyorsan mavi kare yerine http://blogokulu.blogspot.com yazman gerekiyor.

    YanıtlaSil
  8. Yandaki yeni filmler,sağlık haberleri gibi eklentileri nasıl yapıyorsunuz?

    YanıtlaSil
  9.  Sizin için, sorunuza cevap niteliğinde bir yazı yayınladım.okumak için tıklayın.

    YanıtlaSil
  10. kuzey rüzgarı3 Nisan 2012 21:59

    Açılır menüyü ekledim fakat bir sorum olacaktı menülere bir şeyler eklemek istiyorum bunu nasıl yapabilirim ve açılır menü rengini değiştirebilirmiyim?Kusura bakmayın bilmediğim için size başvuruyorum ,aylaşımlarınız için teşekkür ederim.

    YanıtlaSil
  11. 3.Adımda renkli olarak yazdığım yerleri değiştirerek menüye istediğin gibi ekleme yapabilirsin.1.Adımda verdiğim kod içerisinde 
    border=1px çerçeve kalınlığı, solid=çerçeve rengi,background=#ccccc arka plan rengi bunları değiştirerek renkleri ayarlayabilirsin.renk kodlarını < a href="http://blogokulu.blogspot.com/2012/03/renk-kodlari-renk-kutusu.html">burdan bulabilirsin.

    YanıtlaSil
  12. İyi akşamlar html kod a ihtiyacım var sadece aşagı dogru açılsın yeter.

    örnegin:Forum başlıkları             site haritası
               1Atatürk                        1
               2                                   2
               3                                   3

    Gibi bişey lazım bir çok sitede benim istedigim kod var ama işime yaramıyo bazısında link'i nereye koyacagımı bilemiyorum? gibisinden yardımcı olursanız sevinirim ve elimdeki kod'a nasıl link verecegimi yazarsanız oda olur şimdiden teşekkürler





    .:: DIV


    body, div {
      font-family: Verdana;
      font-size: 12px;
      }
    .cerceve{
       width: 450px;
       margin-right: auto;
       margin-left: auto;
       }
    .menu{
       cursor: pointer;
       width: 150px;
       float: left;
       }
    .baslik{
       width: 144px;
       padding: 3px;
       color: white;
       background-color: black;
       }
    .icerik{
       width: 144px;
       visibility: hidden;
       position: absolute;
       padding: 3px;
       color: white;
       background-color: gray;
       }


      function Gizle(no){
         document.getElementById(no).style.visibility = 'hidden';
         }
      function Goster(no){
         document.getElementById(no).style.visibility = 'visible';
         }




     
       
           Forum Başlıkları
           
             
             
             Chapter two
             M.Kemal ATATÜRK

             Alparslan TÜRKEŞ

             H.Nihal ATSIZ

             Ziya GÖKALP

           
       
       
           Hack Tim Konuları
           
             Menu B1

             Menu B2

             Menu B3

           
       
       
           Menu C
           
             Menu C1

             Menu C2

             Menu C3

           
       
     

    YanıtlaSil
  13.  verdiğinz kodu istediğiniz gibi düzenledim.
    kod içerisinde:
    Chapter two

    Chapter two:Menüde görünmesini istediğiniz isim
    http://blogolulu.blogspot.com yerine bu isme ait linki yazıyorsunuz.


    .:: DIV


    body, div {
      font-family: Verdana;
      font-size: 12px;
      }
    .cerceve{
       width: 450px;
       margin-right: auto;
       margin-left: auto;
       }
    .menu{
       cursor: pointer;
       width: 150px;
       float: left;
       }
    .baslik{
       width: 144px;
       padding: 3px;
       color: white;
       background-color: black;
       }
    .icerik{
       width: 144px;
       visibility: hidden;
       position: absolute;
       padding: 3px;
       color: white;
       background-color: gray;
       }


      function Gizle(no){
         document.getElementById(no).style.visibility = 'hidden';
         }
      function Goster(no){
         document.getElementById(no).style.visibility = 'visible';
         }


     
       
           Forum Başlıkları
          
            
            
     Chapter two

     M.Kemal ATATÜRK

     Alparslan TÜRKEŞ

     H.Nihal ATSIZ

     Ziya GÖKALP

                     

          
       
       
           Hack Tim Konuları
          

     Menu B1


     Menu B2


     Menu B3

            
          
       
       
           Menu C
          

    Menu C1

    Menu C2

    Menu C3

     

                

          
       
     

    YanıtlaSil
  14. Çok teşekkür ederim bu iyiliginize karşılık siteme sitenizin adresini ve logosunu koyacagım teşekkürler :)

    YanıtlaSil
  15. Yaw hepsini yaptımda Gadget ekle diye bir yer yok ?

    YanıtlaSil
  16. Şu kimliğe sahip birden çok widget bulundu: Navbar1. Widget kimlikleri benzersiz olmalıdır.  yazısı çıkıyo yapamadım ben:(

    YanıtlaSil
  17. Sizin için kodu tekrar denedim,kod çalışıyor.adımları sırasıyla ve doğru olarak uygularsanız kurulumda problem olmayacaktır.

    YanıtlaSil
  18. Söylemiş olduğunuzu yaptım ama sorun şu. Menüler aşağı'ya doğru kaydığında malesef görünmüyor ya da yarısı görünüyor. (Blog yazıları üst planda kalıyor, oysa ben eklediğim menülerin üst planda olmasını istiyorum)

    Yardımcı olduğunuz için şimdiden teşekkürler..

    YanıtlaSil
  19. emeğinize sağlık, beni sorum münüyü ekledikten sonra, herhangi bir menü içinde paylaştıklarım ana sayfa gibi ayrı ayrı nasıl ekleye bilirim. menünün içini nasıl doldura bilirim. örneğin manzaralar diye bi menüm olsun ona tıklayınca ayrı ayrı manzaralar görünsün sonra istediğimi tıklayıp ilgili yazıyı okuyabileyim. teşekkürler

    YanıtlaSil
  20.  Öncelikle yazılarınızda iyi bir kategorilendirme yapmalısınız.Kategorilerle ilgili daha önce bir yazı yayınlamıştım.Kategorilendirmeyi yaptıktan sonra, sizin verdiğiniz örnek üzerinden anlatım yapacak olursak; menüde manzaralara tıklayınca çıkmasını istediğiniz bütün yazılarınızın etiketlerinden bir tanesini mutlaka manzaralar olarak girmelisiniz.Menüdeki manzaralar a ait link ise "http://blogadresiniz.blogspot.com/search/label/manzaralar" şeklinde olmalıdır.Bundan sonra yazdığınız yazılar içerisnde manzaralar etiketi girdiğiniz yazılar menüde manzaralar linkine tıklayınca açılacaktır.

    YanıtlaSil
  21. dediklerinizi harfiyen rahat 3 4 kez yaptim fakat gadgede ekledigimiz kodu sayfanin en ustune getirdimde menuler acilmiyor kayitlarin ustune gedirdigimde sikinti yok yani sayfanin ustundeyken acilan menuler kayitlarin arkasinda kaliyor yarim aciliomus gibi gosterior yardim ederseniz cok sevinirim sayfanin ustune ekledigim gadged kodu kayitlarin altinda kalmasin ustunde acilsin menuler yani///// tesekkurler

    YanıtlaSil
  22. ayni sorun bende de var kardes... cozemedim bir turluu

    YanıtlaSil
  23. Kardesim super yapmıssın onlinegame-area.blogspot.com a gel benle bi iletisime gec sormak istediğim birkac sey var webmasterlikle ilgili simdiden tsk...

    YanıtlaSil
  24. merhaba mail olarak bana gönderdiğiniz bu kodları kullandım tamam sorun yok ama menüler yazıların altında kalıyor görünmüyor nasıl yapabilirim acaba

    YanıtlaSil
  25. ekledim ama menüler yazıların altında kalıyo anlamadım ya

    YanıtlaSil

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...