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

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.

39 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

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın. (Hemen silinir!)
3. Yazım ve dil bilgisi kurallarına uymaya çalışın lütfen. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

 

Bumerang - Yazarkafe

Copyright © 2016 - 2017 Blog Tecrübem - Kişisel Blog Sitesi. Tüm hakları saklıdır.
I Blogger!