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