CSS Drop Down Açılır Menü Eklentisi

Blogger İçin Profesyonel Menü Oluşturma: CSS Drop Down Açılır Menü Eklentisi

Bu makalede, Blogger temanızda profesyonel bir menü oluşturmak için kullanabileceğiniz CSS Drop Down Açılır Menü Eklentisi hakkında bilgi verilecektir. Bu eklenti, yatay menü ve alt açılır menüler gibi özelliklere sahiptir, böylece kullanıcılarınız için daha işlevsel bir menü deneyimi sunar. Ayrıca, eklentiyi etiketlere bağlı olarak da kullanabilirsiniz.

Bu Menü eklentisi, CSS kullanılarak oluşturulmuştur ve jQuery veya JavaScript gibi ek kodlara ihtiyaç duymaz. Bu sayede, blogunuzun açılış hızını etkilemez ve sade ve şık bir görünüm sağlar. Kendi Blogger temamın üst bölümünde örnek bir kullanımını görebilirsiniz.

Okuyucularınız ve Blogger kullanıcıları için hoş bir deneyim sunacak olan bu sade eklentiyi blogunuza nasıl ekleyeceğinize gelirsek. CSS Drop Down Açılır Menü kurulumu için:


  • Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle
  • Ctrl+F yardımı ile aşağıda kodu aratıp bulun.

]]></b:skin>

  • Bulduğunuz kodun hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.

  • .menus,.menus *{list-style:none;list-style-type:none;line-height:1.0;margin:0;padding:0;}
    .menus ul{position:absolute;top:-999em;width:100%;}
    .menus ul li{width:100%;}
    .menus li:hover{visibility:inherit;}
    .menus li{float:left;position:relative;}
    .menus a{display:block;position:relative;}
    .menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99;}
    .sf-shadow ul{-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px;padding:0 8px 9px 0;}
    .menus .sf-shadow ul.sf-shadow-off{background:transparent;}
    .sf-with-ul{padding-right:20px;min-width:1px;}
    .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:15px 10px 0 0;}
    .menu-secondary-container{position:static;height:44px;z-index:300;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh425CQy3DH5PXt4o-T02pVKf1vXHKG6NlWe8AUljumCZOLuih9t8svP6GE-ZTIk9406eCBQ4T3LSv_Rjt4shUDMOQ96ylKgcPVwAbf0cKRujHu0aAQPEldycB7BnNBmrksN7mkd4T6oLA/s0/menu-secondary-bg.png) left top repeat-x}
    .menu-secondary li a{color:#FFF;text-decoration:none;text-transform:uppercase;font:normal 13px/13px georgia,arial,sans-serif;padding:16px 15px 15px;}
    .menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh425CQy3DH5PXt4o-T02pVKf1vXHKG6NlWe8AUljumCZOLuih9t8svP6GE-ZTIk9406eCBQ4T3LSv_Rjt4shUDMOQ96ylKgcPVwAbf0cKRujHu0aAQPEldycB7BnNBmrksN7mkd4T6oLA/s0/menu-secondary-bg.png) left -144px repeat-x;outline:0;}
    .menu-secondary li li a{color:#fff;background:#666;text-transform:none;font-weight:400;margin:0;padding:10px 15px;}
    .menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#fff;background:#FA7029;outline:0;}
    .menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px;}
    .menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:15px 13px 0 0;}
    .menu-secondary li li .sf-sub-indicator{padding:9px 13px 0 0;}
    .wrap-menu-secondary .sf-shadow ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuiMEuaqtzKqth2MyKnrwIIChlPhmV3Ob0iUu-a-hG_Rsh7v4GkOQeorbF6gnXrI1QSGgSNdc-m9wgK6Y6Rowtu3yroBZl_cWpyGGs5kpDhF34TlqGWUJDOYem8fwDURHM4ZljXJJmJcw/s0/menu-secondary-shadow.png) no-repeat bottom right;}
    .menus li:hover li ul,.menus li.sfHover li ul,.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em;}
    .menus li li:hover ul,.menus li li.sfHover ul,.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0;}
    .menu-secondary ul{min-width:160px;}
    .span-24,div.span-24{width:960px;margin:0;}
    input.span-24,textarea.span-24{width:938px!important;border-left-width:1px!important;border-right-width:1px!important;padding-left:5px!important;padding-right:5px!important;}
    div.span-24{float:left;margin-right:10px;}
    

    • Kaydet butonuna tıklayıp bu ekrandan çıkın.
    • Daha sonra Blogger paneline tekrar giriş yapın. Yerleşim> Blog Kayıtlarının hemen üzerine Gadget Ekle>Html/Javascript'i seçin.
    • Aşağıdaki kodları Online HTML Editör ile isteginize göre ayarlayarak kopyalayıp yapıştırın ve kaydedin.

    <div class='span-24'>
    <div class='menu-secondary-container'>
    <ul class='menus menu-secondary'>
    <li><a href='https://meftun-demo.blogspot.com'>ANA SAYFA</a></li>
    <li><a href='#'>BLOGGER</a>
    <ul class='children'>
    <li><a href='https://meftunmede.blogspot.com/search/label/Blogger%20Eklentileri'>Blogger Eklentileri</a></li>
    <li><a href='https://meftunmede.blogspot.com/search/label/Html%20Kodlar%C4%B1'>Html Kodları</a></li>
    <li><a href='https://meftunmede.blogspot.com/search/label/%C4%B0nternet'>İnternet</a></li>
    </ul>
    </li>
    <li><a href='#'>DOWNLOADS</a>
    <ul class='children'>
    <li><a href='https://meftunmede.blogspot.com/search/label/Filmler'>Filmler</a></li>
    <li><a href='https://meftunmede.blogspot.com/search/label/Programlar'>Programlar</a></li>
    </ul>
    </li>
    <li><a href='#'>ARAÇLAR</a>
    <ul class='children'>
    <li><a href='https://meftunmede.blogspot.com/2013/02/online-html-editor.html'>Html Editor</a></li>
    <li><a href='https://meftunmede.blogspot.com/2013/03/html-renk-kodu-bulucu.html'>Renk Kodu Bulucu</a></li>
    <li><a href='https://meftunmede.blogspot.com/2014/01/kaynak-kodu-bicimlendirme-araci.html'>Kaynak Kodu Biçimlendirici</a></li>
    <li><a href='https://meftunmede.blogspot.com/2014/01/web-sitenizin-hizini-olcun.html'>Web Sitesi Hız Testi</a></li>
    </ul>
    </li>
    <li><a href='https://meftunmede.blogspot.com/search/label/Yemek%20Tarifleri'>YEMEK TARİFLERİ</a></li>
    <li><a href='#'>SOSYAL MEDYA</a>
    <ul class='children'>
    <li><a href='https://meftunmede.blogspot.com/search/label/Sosyal%20Medya'>Eklentiler</a>
    <ul class='children'>
    <li><a href='https://meftunmede.blogspot.com/search/label/Jquery'>Jquery</a></li>
    <li><a href='https://meftunmede.blogspot.com/search/label/Slider'>Slider</a></li>
    <li><a href='https://meftunmede.blogspot.com/search/label/Slayt'>Slayt</a></li>
    </ul>
    </li>
    <li><a href='https://meftunmede.blogspot.com/search/label/Blogger%20Widgets'>Blogger Widgets</a></li>
    </ul>
    </li>
    <li><a href='https://meftun-demo.blogspot.com/p/iletisim.html'>REKLAM VER</a></li>
    </ul>
    </div>
    </div>
    

    Özelleştirme

    1. Kod kısmında Kırmızı renkle işaretledigim bölümlere istediğiniz menü isimlerini veriniz.
    2. Menüye link vermek için Mavi renkle işaretledigim yerlere linkleri yazınız.
    3. Eklentinin style kodlarıyla oynayarak Renk, yükseklik "height" ve genişlik "width" bölümlerini isteğinize göre ayarlayabilirsiniz.

    Önemli Not!!!

    Blogger'ın kendi orjinal şablonlarından birini kullanıyorsanız. Menünün çalışması için aşağıdaki adımları uygulayın.
    1. Blogger Kontrol panelinde > Şablon > HTML'yi Düzenle
    2. Ctrl+F yardımı ile aşağıdaki kodları aratıp bulun ve silin.
    .tabs-inner .widget li a {
    display: inline-block;
    margin: 0;
    padding: .6em 1.5em;
    font: normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    color: #ffffff;
    border-top: 1px solid #2d3037;
    border-bottom: 1px solid #2d3037;
    border-left: 1px solid #2d3037;
    height: 16px;
    line-height: 16px;
    }
    .tabs-outer {
    overflow: hidden;
    position: relative;
    background: #29aae1 url(//www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png) repeat scroll 0 0;
    }
    .tabs-inner .widget li:last-child a {
    border-right: 1px solid #2d3037;
    }
    

    3. /* Tabs bölümünden sildiğiniz bu kodların yerine aşağıdaki kodu ekleyin ve kaydedin.

    .tabs .widget ul, .tabs .widget ul {
    margin: 0px;
    padding: 0px;
    list-style: none outside none;
    overflow: visible;
    }
    

    Bu kadar. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

    42 Yorumlar

    Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

    1. Bu yorum yazar tarafından silindi.

      YanıtlaSil
    2. Hangi rengi, hangi renge değistirmek istiyosunuz? Biraz ayrıntılı anlatın istediğinizi, yardımcı olurum.

      YanıtlaSil
    3. Merhabalar, ben hazır bir tema indirdim ve hazır bulunan menü isimlerini bloğuma göre değiştirdim. Benim sorunum; bu menü kategorilerine ait olmasını istediğim yayınlara etiket olarak kategori ismini yazsam da o kategoriye tıkladığımda açılan sayfada görünmemesi. Yayınlarımı ilgili kategorilere nasıl bağlayabilirim?

      YanıtlaSil
      Yanıtlar
      1. öncelikle yayınladığın içeriklerine etiket veriyorsan mesela bir film bloğu var aksiyonla ilgili bir film yayınladın etikete de aksiyon filmleri dedin bloğunda o aksiyon filmleri yazan etiket linkine tıkla adres çubuğundaki link i kopyala ve eklemek istediğin menünün açılır sayfasına yada direk başlık sayfasına bu linki yapıştır ama html yi düzenler yapıştır başka türlü nasıl yapıştırıcan kaydet çık sonra o aksiyon filmleri başlığına yada açılır sekmesindeki artık nereye yapıştırdıysan oraya tıklarsan aksiyon filmleri karşına çıkar ok

        Sil
    4. Sorunuzu tam anlayamadım ama yukarıda konuda açık anlattığımı düşünüyorum.
      Örnek:
      <li><a href='#'>DOWNLOADS</a>
      <ul class='children'>
      <li><a href='http://meftunmede.blogspot.com/search/label/Filmler'>Filmler</a></li>
      <li><a href='http://meftunmede.blogspot.com/search/label/Programlar'>Programlar</a></li>
      </ul>
      </li>

      Burda menüde Downloads katagorisinde Filmler ve Programlar açılıyo. Eğer onların açılmasını istemiyosanız;
      <ul class='children'>
      <li><a href='http://meftunmede.blogspot.com/search/label/Filmler'>Filmler</a></li>
      <li><a href='http://meftunmede.blogspot.com/search/label/Programlar'>Programlar</a></li>
      </ul>

      Bölümlerini silmelisiniz.

      YanıtlaSil
    5. Merhaba, öncelikle teşekkür ederim..ben dediğiniz işlemleri yaptım fakat açılır menü alt alta degil yanyana ve karmasış çıktı nerde yanlış yaptım acaba :(

      YanıtlaSil
      Yanıtlar
      1. merhaba bu sorun bendede oldu sorununuzun cevabı eğer bloğunuza daha önce bir tema yada öleleştirden genişleme ayarı renk ayarı arkaplın yada yerleşim ayarı yaptıysanız bunları blog sayfasının bir yedeğini alıp tüm ayarları sıfırladıktan sonra bu işlemi tekrar yapın muhtemelen bu ayarlar yüzünden html kodu doğru düzgün çalışmamamktadır

        Sil
    6. Sema hanım iletişim bölümünden bana CSS menüde kullanmak istediğiniz linkleri yazıp gönderin. Ben hazırlayıp size geri gönderirim. Mutlaka unuttuğunuz, atladığınız biyer olmalı...

      YanıtlaSil
    7. ]]> bu kod bende görünmüyor biçimlendirdim ve genişlettim de hmtlyi ama neden ctrl/f yaptıgımda 0/0 yazıyor?

      YanıtlaSil
    8. Selen EMB, sadece </b:skin> yada skin yazarakta bulabirsiniz style kodlarınızın olduğu bölümü. Ctrl+F çalışmıyo olabilir. Tarayıcınızın üst menü bölümünden düzen, ara yada bul yaparakta bulabilirsiniz aradığınızı. Kolay gelsin.

      YanıtlaSil
    9. Elinize sağlık, yatay değil de dikey olarak kullanmak istediğimizde nasıl bir kod değişikliği yapmamız gerekiyor?

      YanıtlaSil
      Yanıtlar
      1. Bu yatay menüyü dikey olarak değiştirmek uzun hikaye olur. iletişim bölümünden nasıl bişey istediginizi, blogunuzu falan detaylı bişekilde anlatırsanız, yardımcı olurum.

        Sil
    10. hocam menunun butun sayfalarda gorunmesını ıstıyorum ne yapmamız gerekıyo tesekkur ederım

      YanıtlaSil
      Yanıtlar
      1. Menü bütün sayfalarda görünür zaten. Öbür sayfalarda görünmeme gibi bi durum söz konusu degil. Eğer olurda yapamazsanız Şablonunuzu yedekleyip Burdan bana gönderebilirsiniz. Hata veren çoklu sekmeli navigasyon menü ve bu css menü eklentisini temanıza entegre edip gönderirim size geri.

        Sil
    11. hocam ben bu işte yeniyim okul için bişeyler yapmak istiyorum sizin blog yemin ederim bi harika çok hosuma gitti. Başlık kısmı Alt bilgi kısmı her tarafı aynı olsun ıstıyorum bıraz taklıt olucak ama yardımcı olursanız sevınırım kolay gelsin. http://tugsavulilkokulu.blogspot.com.tr/

      YanıtlaSil
    12. alt katogoriler açılmıyor nerede yanlış yaptık yardımcı olursanız sevinirim

      YanıtlaSil
      Yanıtlar
      1. Bloggerın kendi şablonlarında hep bu problem çıkıyo malesef. Şablonunuzu yedekleyip bana Burdan gönderin. Ben yapıp geri yollayayım size.

        Sil
      2. Yardımınız için çok teşekkürler. forumunuzun tasarımı kadar, yeni başlayanlara yardımcı olma çabanız takdire değer.

        Sil
    13. Merhaba,
      CSS yatay menü oluşturma yazınızı okudum ve yeni açmış olduğum bloğuma uyguladım. Menülerim oluştu ve çalışıyor. Fakat menülere nasıl yazı ekleyeceğimi bir türlü bulamadım. Yeni yazı oluşturuyorum ancak bloggerda oluşturduğum CSS yatay menüye ekleyemiyorum. Yardımcı olabilir misiniz? Bloggerın altını üstüne getirdim ama bulamadım. HTML yi mi düzeltmem gerekiyor? Orijinal şablonlarda değiştirmem gereken yerleri de değiştirdim.
      Teşekkür ederim. (www.modaelisi.blogspot.com)

      YanıtlaSil
    14. çok şık oldu fakat sola dayalı duruyor. ortalamak için ne yapmak lazım. /br ve center denedim fakat olmadı

      YanıtlaSil
      Yanıtlar
      1. Google profilinizde blogunuzu göremiyorum. O yüzden verdiğim cevap kesin çözüm olmayabilir. aşağıda gösterdiğim bölümü değiştirin.
        .span-24,div.span-24{width:960px;margin:0 50%;}

        Sil
    15. bloger değil tumblr 'a adapte etmeye çalşmıştım zaten =) şimdi yaptım hoş oldu fakat sizin verdiğiniz örnekte sosyal medya >> eklentiler>> 3. alt başlık olan yeri ben , yine sizin verdiğiniz örnekteki bloger -yani 2. ana manü- altın yapmak istiyorum. denedim fakat 2. ana başlıktan sonrası gözükmüyor.

      YanıtlaSil
      Yanıtlar
      1. iletişim sayfasından bana menüyü nasıl istediğinizi yazın. Ana menüler, alt menüleri, linkleri falan, ayrıntılı şekilde yazın. Ben yapıp göndereyim size. Siz sadece kopyalayıp yapıştırın. Bazı konuları yeterince detaylı anlattığım halde yapılamayınca burdan verecek bi cevabım kalmıyor. O yüzden gönderin bilgileri yapayım diyorum. Slider konusundada sorunlarınız vardı galiba onuda yazın bana. O problemide halledelim mümkünse...

        Sil
    16. Sosyal Medya >> Eklentiler* Alt başlığının yanından Jquery - Slider - Slide diye 3 yan bar daha açılıyor. (Sizin menünüz aynı zamanda)

      http://i.hizliresim.com/Q4Y23A.jpg
      Ben bu açılan 3. alt başlıkların Blogger 'ın altındaki seçeneklerden en alttaki İnternet alt menüsündede olmasını istiyorum. =)

      YanıtlaSil
    17. 2 farklı alt menüye ayrı ayrı alt menü oluşturmayı baya aramıştım sonunda bulup yaptım. Teşekkür ederim.

      YanıtlaSil
    18. Çok araştırdığım ve başka yerlerde anlatılanlarla başamadığım bir konuydu. sayenizde başardım. çok teşekkür ederim.

      YanıtlaSil
    19. açılan kısımlar paylaşımların altında kalıyor

      YanıtlaSil
    20. Meftun mede iletişim sayfası yoluyla yaptığım işlemi size yolladım Ben bir türlü beceremedim . Bir bakıp yardımcı olurmusunuz

      YanıtlaSil
    21. Menüdeki drop down açılmıyo tüm kodlar eksiksiz eklendi sorun ne

      YanıtlaSil
    22. menu rengini siyah degil mavi yapmak istiyorum olmuyo biturlu

      YanıtlaSil
      Yanıtlar
      1. 1. adımdaki style kodlarından .menu-secondary-container tanımının background bölümünü bulun ve aşağıda gösterdiğim şekilde değiştirin.
        .menu-secondary-container{background:#666 none repeat scroll 0% 0%;position:static;height:44px;z-index:300;}
        Örnek renk kodu: #666 Bu kodu mavi renk kodunuzla değiştirebilirsiniz.

        Sil
      2. cok sagolun deyise bildim
        bide sizin sayfanizda yukarida bir menu daha var ana sayfa iletisim falan yazilan onun kodunuda eklerseniz cok sevinirim

        Sil
    23. sizin sayfayin yukarisinda bi menu daha var onun kodunu eklermisiniz.uzerinde ana sayfa giris falan var iste onu

      YanıtlaSil
    24. menü sliderın altında kalıyor yani alt kataogpriler açılmıyor nasıl düzeltebiliriz

      YanıtlaSil
    25. Öncelikle teşekkürler.İyi bir anlatım olmuş ama menünün renk ayarlarını ben de yapamıyorum.Nerde bu style kodları? İstediğim renkleri nasıl vereceğim? Mavinin kodu nedir sarının kodu nedir örneğin?

      YanıtlaSil
    26. Tamam zor olsa da deneye deneye bir çok renklendirme ayarını buldum.Şimdi istediğim hani üst menünün altında alt menüler çıkıyor ya bu alt menülerin arasına çizgi koymak istiyorum.Mümkün müdür acaba? Nasıl yapabilirim?

      YanıtlaSil
    27. merhaba blogumdaki temaları hazır tema yaptım. yatay menüleri aktif fakat yatay menülere yazılarımı nasıl ekleyecğimi bilmiyorum

      YanıtlaSil
    28. silinmesi gereken kodlardan ikisini buldum sıralımı olacak kodlar klasik şablonda kodlar farklımı oluyor

      YanıtlaSil
    29. silmem gereken kodların hepsini bulamadım yardım lütfen

      YanıtlaSil

    Yorum Gönder

    Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

    Önceki Makale Sonraki Makale