CSS ile hazırlanmış Blogger açılır menü eklentisi

10 Şubat, 2017
Blogger açılır menü eklentisi
Blogger açılır menü eklentisi
Blogger (blogspot) bloglarına açılır menü nasıl yapılır? Blogger için açılır menü bar eklentisi. CSS kodları ile hazırlanmış şık açılır menü eklentisi...

Blogger (blogspot) blogları için kullanılabilecek çok şık bir eklentiyi sizlerle paylaşmak istedim, açılır menü eklentisi. Yalnız bu eklenti biraz farklı. Bu eklenti için JavaScript ya da farklı bir kod eklemek gerekmiyor. Sadece eklenti olarak ekleyip, gerekli düzenlemeleri yapmak yeterli. Bu da oldukça kolaylık sağlıyor.

Daha önce paylaştığım bir yazıda "Sayfalar" eklentisinden bahsetmiştim. Blogger'ın bu hazır eklentisi sayesinde blogumuzu kategorilere ayırıp daha kolay içeriklere ulaşılmasını sağlayabiliyorduk. Yalnız bu eklentide, sekmeler sadece bir tane olabiliyordu. Ama bu açılır menü eklentisi sayesinde açılır menü oluşturabiliyoruz ve ayrıntılı olarak kategorilere ayırabiliyoruz.

Açılır menü eklentisi Blogger'a nasıl eklenir?


1. İlk olarak Blogger kullanıcı panelinde sol tarafta yer alan "Yerleşim" sekmesine tıklayın.

2. Açılan "Gadget" alanında, açılır menüyü eklemek istediğiniz alan için "Gadget ekle" ye tıklayın ardından açılan küçük pencerede "HTML/JavaScript" seçin ve aşağıda yer alan kodları ekleyin.
<style>
/*------ CSS3 açılır menü eklentisi ---------*/
#mbt-menu, #mbt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#mbt-menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#mbt-menu:before,
#mbt-menu:after {
content: "";
display: table;
}
#mbt-menu:after {
clear: both;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#mbt-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#mbt-menu li:hover > a {
color: #fafafa;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#mbt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mbt-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#mbt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<ul id="mbt-menu">
<li><a href="#">MENÜ1</a></li>
<li>
<a href="#">KATEGORİLER</a>
<ul>
<li><a href="#">Kateoriler1</a></li>
<li><a href="#">Kateoriler2</a></li>
<li><a href="#">Kateoriler3</a></li> 
</ul>
</li>
<li><a href="#">MENÜ2</a></li>
<li><a href="#">MENÜ3</a></li>
<li><a href="#">MENÜ4</a></li>
</ul>
3. Son olarak eklentiyi (widget) kaydedin ve blogunuzu kontrol edin.

Kodların arasında kırmızı renkle belirttiğim 960, menünün genişliği. Bunu temanızın genişliğine uygun olarak düzenlemelisiniz. Ayrıca kodların en sonunda yer alan yeşil renkli kelimeler menüde görünecek olan sekmeler. Ve mavi renkle belirttiğim # yerine de linkleri eklemeyi unutmayın. Takıldığınız yerler olursa yorum yaparak bana bildirebilirsiniz.

✋Bu içerik Kişisel Blog - BlogTecrübem tarafından hazırlanmıştır.

69 yorum:

  1. Allahım bambaşka bir dil bu, kesinlikle öğrenmem gereken :)

    Elinize sağlık,

    YanıtlaSil
  2. Güzel ve faydalı eklenti..Hem de uygulaması çok kolay..teşekkürler

    YanıtlaSil
    Yanıtlar
    1. Aynen eklenti olarak basit bir şekilde ekleyebiliyoruz. Rica ederim..

      Sil
  3. oturup çalışmalıyım galiba bunu denemek için:)))
    paylaşım için teşekkürler..

    YanıtlaSil
  4. Hocam menüyü siteye ekleyince yama gibi oldu, sitemintemasıyla renkleri uyuşmadı, menü arkaplan rengini nasıl değiştirebilirim?

    YanıtlaSil
    Yanıtlar
    1. background-image: linear-gradient(#444, #111); bu kodda olan 444 ve 111 değerleri yerine istediğiniz renklerin kodunu girebilirsiniz. Üstten ve alttan iki renk ekleyip 3 boyutlu görünüm verebilirsiniz. Ayrıca çizgi rengi içinde border: 1px solid #222; deki 222 değerini de değiştirin. Renk kodları için bu siteden faydalanabilirsiniz -> http://html-color-codes.info/

      Sil
    2. teşekkürler hocam. Bir sorum da blogumda bulunan .tr uzantısı. Bunu kaldırmak istedim ama bu seferde bir süre sonra sitem çok yavaşladı. bir öneriniz var mı bunun için?

      Sil
    3. Rica ederim. ".tr" uzantısını ben de blogumdan kaldırdım. Her hangi bir sorun yaşamadım açıkçası. Blogunuzun adresi nedir?

      Sil
    4. http://turkilizce.blogspot.com.tr hocam, sitenizde ki script kodlarını ekledim, ekleyince site açılmıyor, açılması çok yavaşlıyor. ama kodları kaldırınca tekrar düzeliyor. Öncesinde böyle bişey olmuyordu ama dün olmaya başladı

      Sil
    5. Hasan bey ben biraz önce verdiğiniz linke tıkladım tr gözükmedi.. haber vereyim dedim..

      Sil
    6. ewt, problemi buldum, benm tarayıcıda varmış, brz önce bura ki bir linke de tıkladım .tr den yönlendirme yapmadı, o zamn farkettim, tarayıcıda problem olduğunu, bende tekrardan ekledim.

      Sil
    7. Halletmenize sevindim Hasan bey

      Sil
    8. Merhabalar, ben blogunuzu kontrol ettim Hasan Bey, sevgili Momentos'un dediği gibi tr yok ve herhangi bir sorun göremedim. tarayıcıdan halletmişsiniz, sevindim..

      Sil
    9. teşekkürler hocam, farkettim takip etmiştiniz, bunun için de ayrıca teşekkür ederm.

      Sil
  5. Ben de silmek isterim o uzantıyı.. nasıl yapacağız Blog Tecrübem?

    YanıtlaSil
    Yanıtlar
    1. blogunuza girdikten sonra, sırasıyla "Şablon => HTML yi düzenle" seçeneklerine tıklayın. açılan sayfada ctrl+f yaparak "head" ı aratın, zaten büyük ihtimal en üstlerdedir. Orada Head etiketinin altına Script kodlarını yapıştırmanız lazım. Kodları sitede arayıp bulamadım. başaka sitenin linkinide atmak istemiyorum. Eğer site de varsa hocam gelince yardımcı olur size

      Sil
    2. Çok teşekkür ederim :)

      Sil
    3. Bu konuyla ilgili bir içerik paylaşmadım henüz. Yakın zamanda paylaşırım. Ama konuyla ilgili içerik paylaşan bir site varsa, Hasan Bey tabi ki linkini ekleyebilir buraya benim için bir mahsuru yok.

      Sil
  6. Yanıtlar
    1. Hıcamız da izin verdiğine göre yardımcı olayım hemen. buyrun ben burdaki siteden aldım script kodlarını. siteye girince anlatıyor zaten nasıl yapmanız gerektiğini
      http://blogger-tr-kaldirma.blogspot.com/

      Sil
    2. :) Teşekkürler Hasan bey.. hemen bakıyorum

      Sil
    3. Rica ederim, inş yardımcı olabilmişimdir. Bu arada hesap ismini değiştiğimden isim farklı görünebilir

      Sil
    4. Evet evet.. oldunuz Hasan bey.. ikinize de teşekkür ederim :)

      Sil
  7. mrb hocam, üstteki temayı siteye ekledim fakat mobilden girince o tema görünmüyor, yardımcı olabilirmisiniz?

    YanıtlaSil
  8. sizin sitenizi mobilden kontrol ettim, sizin ki gibi nasıl yapabilirim ?

    YanıtlaSil
    Yanıtlar
    1. Üstteki menü barın mobilde görünmesi için temanın mobil uyumlu olması gerekir. Bunun yerine Sayfalar eklentisini kullanabilirsiniz. Ben Blogger'ın hazır mobil temasını kullanıyorum. Bunu şablon kısmından ayarlayabilirsiniz. Ayrıca Sayfalar eklentisini de kullanıyorum.

      Sil
    2. Hocam bende blogger ın temasını kullanıyorum. Ama dediğiniz gibi ilk girişte (mobilde) üstte ki açılır menüde sayfalar kısmı çıkıyor. bunu şablondan nasıl ayarlayabilirim hocam?

      Sil
    3. Ben kontrol ettim şimdi blogunuzu, masaüstü görünümü aktif mobilde ve herhangi bir sorun yok. Masaüstünde nasıl görünüyorsa mobilde de aynı şekilde görünüyor. Şablon sekmesinden mobil görünümü de ayarlarsanız benim blogum ki gibi bir görünüm elde edebilirsiniz.

      Sil
    4. Hocam mobil görünümünü ayarlayamadığımdan dolayı masa üstü görünümü aktif ettim. mobil görünümünü açınca sizinki gibi açılır menü açılıyor ama açılır menüde, bloğumun yan sekmesinde bulunan sayfalar adlı kategoride yer alan başlıklar var. Yani benm açılır mnü için en üste eklediğim başlıklar mobil de açılır menüde görünmüyolar.

      Sil
    5. Mobil tema da görünmez bu açılır menü eklentisi. Görünmesi için mobil tema seçeneklerinden "Özel" seçeneğini deneyin. Burada da görünmezse, özel olarak mobil temanın düzenlenmesi gerekir..

      Sil
  9. özel seçeneği ile nasıl yapabilirim hocam, denedim ama olmadı

    YanıtlaSil
    Yanıtlar
    1. Şu görseli inceleyin.. http://i.hizliresim.com/dPo39V.png

      Sil
    2. hocsm o kısmını biliyorum, özel yapıncada olmuyor,

      Sil
    3. Blogger "sayfalar" eklentisini kullanmanızda fayda var...

      Sil
  10. Merhaba, menü 4 ten sonra menü 5'i nasıl oluşturabiliriz?

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, kodların sonunda yer alan menü2, 3, 4 ün yer aldığı kod satırını kopyalayıp, çoğaltarak menüde yer alan sekmeleri arttırabilirsiniz...

      Sil
  11. Benimde Mobil uyumlu temam var sadece html ye bikaç ekleme ile açılır menü yapamazmıyım acaba çünkü orjinal hali daha güzel

    YanıtlaSil
    Yanıtlar
    1. Blogunuzun linki nedir? Hangi temayı kullanıyorsunuz?

      Sil
    2. Şuan baska blog uzerinde oynama yapmaya calisiyorum https://heblehebele.blogspot.com.tr

      Sil
    3. Alt menü olarak eklemek istediğiniz bağlantı isminin başına _ koyarak deneyin.

      Sil
  12. hocam ben bunu ekleyince direkt gadgette görünüyor, menü yerinde yine eski menüm duruyor,
    bu sorunu nasıl çözebilirim?

    YanıtlaSil
    Yanıtlar
    1. Kodlarda bir sorun yok. Adımları doğru uyguladığınızdan emin olun.

      Sil
  13. merhaba,menüyü sayfamızda nasıl saga sola oynatabiliriz acaba.

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, #mbt-menu kodunun altına margin-left, margin-right kodlarını ekleyip değer vererek, sağa sola oynatabilirsiniz. Örneğin sağa çekmek isterseniz margin-left:18px; şeklinde ekleme yapın. Buradaki 18 değerini azaltıp arttırarak dilediğiniz gibi konumlandırabilirsiniz.

      Sil
    2. Hocam zahmet olmazsa bir sorum daha olacak.Örnegin kategori1 den bir menü daha nasıl açarız.

      Sil
    3. Şu linki inceleyin lütfen (https://docs.google.com/document/d/1jjdhaI4rY9jcVBLC5LgYSqLYEG2EgsTaBT3d6-m_gM8/edit?usp=sharing)

      Sil
    4. Hocam çok oldum biliyorum:)
      Birde alt kategorileri kategorinin sağından nasıl çıkarabiliriz.

      Sil
    5. Estağfurullah, #mbt-menu ul ul kodunun altına float: right; kodunu eklemeyi deneyin.

      Sil
    6. Hocam alt kategori 1 kategori 2 nin yanında çıkıyor.Alt kategori 1'i bir üste nasıl alacagız.

      Sil
    7. Hocam gerek kalmadı kendim hallettim.Yardımlarınız için teşekkürler.

      Sil
  14. Merhaba benım de bir blogum var. Bu menüyü oluşturmak istiyorum. Nasıl durur acaba. www.maviayda.blogspot.com

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, şu an ki görünümden memnun değilseniz deneyebilirsiniz.

      Sil
  15. Hocam bir de bloga girdiyseniz mobildn girince en üstteki reklamı nasıl küçültebilirim yada kaldırabılırım

    YanıtlaSil
    Yanıtlar
    1. Reklam boyutu olarak otomatik boyutlandırmayı tercih edin. Bu şekilde reklam boyutu otomatik olarak düzenlenecektir. Ama masaüstü görünümünde de pek hoş durmuyor açıkçası, tamamen kaldırabilirsiniz.

      Sil
  16. MErhaba web siteme (fotolarlaturkiye.blogspot.com) sol tarafa kodu yerleştirdim. menüler sağa doğru açılıyor. Aynı kodu sağ tarafa gadget yerleştiriyorum (orayada yurt dışı kategorileri koyacağım) ama ordada menü sağa açılıyor. sağ gadgettaki açılır menüyü sola doğru site içine doğru nasıl açabilirim, hangi kodu değiştirmem gerekiyor, çok teşk ederim.

    YanıtlaSil
    Yanıtlar
    1. en alttaki float:left; yazan yeri right yaptım olmadı. üst tarafta left:149px olan yerleri -149px yaptım bu sefer her iki gadgetta sola açıldı. Ben sol gadget sağa sağ gadget sola açılsın istiyorum tam olarak hangi kodu değişmem gerekli bi türlü bulamadım. Yardımı olursanız çok sevinirim. Şu anda sağ gadget yok eğer siteye bakarsanız, olmuyor diye eklemedim

      Sil
  17. reis menu olduda kodu girmeme ragmen rengı degişmiot

    YanıtlaSil
    Yanıtlar
    1. Renk kodları üst kısımda, dilediğiniz gibi düzenleyebilirsiniz.

      Sil
  18. Linki girmeme rağmen menüde gözükmüyor

    YanıtlaSil
  19. Ben ekledim ama sağ kösede gözüküyor tam ortada gözükmesi için ne yapabilirim

    YanıtlaSil
  20. üstad selamlar. siteye bunun gibi 2-3 css tane kod ekledim. menu görünüyor ama alt başlıklar yani kategoriler açılmıyor bu menu kodunda veya başka kodlarda da görünmüyor sebebi nedir bi yardımcı olursan sevinirim şimdiden teşekküler

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, blogunuza baktım gayet güzel olmuş ve çalışıyor. Bir sorun göremedim. Sorun olan sitenin linkini paylaşabilir misiniz?

      Sil
  21. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  22. Merhaba kardeşim çok güzel anlatmisin benim bir sorunum JavaScript mantiksal degisenlerle ilgili nerde aradimsa bulamadim bana yardimci olma imkanin varmi?

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, maalesef bu konu hakkında bilgim yok.

      Sil
  23. merhabalar, blogger notable temas kullanıyorum. menüler kolaylıkla eklendi fakat masa üstü görünümde menü başlıkları tam ortaya yerleşti(sola yanaşık olmasını istiyorum) ve yine mobil görünümde de sağa yanaşık olduğu için sayfa açıldığında tüm başlıklar gözükmüyor. genişlik ayarlarından denedim ama düzeltemedim.

    YanıtlaSil
  24. Mobil görünümü nasıl etkiler bilemedim, denemek lazım. Paylaşım için teşekkür ederim.

    YanıtlaSil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
3. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanın.

Copyright © 2016 - 2024 Blog Tecrübem. All rights reserved. Powered by Dijidal.com and Blogger. I Google
Sitede yer alan tüm içerikler Blog Tecrübem'e aittir, kullanım koşulları çerçevesinde alıntı yapılabilir.