CSS ile hazırlanmış 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.