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

Bloggerda kullandığınız temanızda profesyonel bir menü olsun istiyorsanız; Bu CSS Drop Down Açılır Menü Eklentisi tam size göre.Blogger kullanıcılarına uygun yatay menü css ile oluşturulmuş alt açılır menülere de sahip.Bu menüyü blogunuza ekleyerek isterseniz etikete bağlı olarak da kullanabilirsiniz.
Css ile oluşturulmuş bu Menü, jQuery yada javascript kullanmaz, blogunuzun açılış hızına kesinlikle tesir etmez sade ve şık bir eklenti. Benim blogger temamda üst bölümde örneğini görebilirsiniz. Gelelim okuyucularınızın ve blogger kullanıcıların hoşuna gidecek bu sade eklentiyi nasıl ekleyeceğinize.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:relative;height:44px;z-index:300;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeOXEZjddAqXU3EDp6iTda23uguaEV_qcz_Z3vgiCjDYkvXmk5WvJKAvo8UbWUbwCrs_IsQwHMJ1PTz_je0j64IMRPdo6nD6QVyGAVKHKibt28JFMRyaFz7PwFmuSGOfLnv0vA6mxhs6Y/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/AVvXsEjeOXEZjddAqXU3EDp6iTda23uguaEV_qcz_Z3vgiCjDYkvXmk5WvJKAvo8UbWUbwCrs_IsQwHMJ1PTz_je0j64IMRPdo6nD6QVyGAVKHKibt28JFMRyaFz7PwFmuSGOfLnv0vA6mxhs6Y/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/AVvXsEi1iZx4dL3pHitgPM6j0XLuZE0AuIPlMLAphWcjSEYcWwaEfnwmC2D2e9uYJp4VSPyy8vpQq6zjYXdVOfnuTCOmyn7NM26H8-oSB0D2cbo_BlfMHBYNvOj54iGUxY_8N59v8ltKeCVAHXk/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='http://meftun-demo.blogspot.com'>ANA SAYFA</a></li>
<li><a href='#'>BLOGGER</a>
<ul class='children'>
<li><a href='http://meftunmede.blogspot.com/search/label/Blogger%20Eklentileri'>Blogger Eklentileri</a></li>
<li><a href='http://meftunmede.blogspot.com/search/label/Html%20Kodlar%C4%B1'>Html Kodları</a></li>
<li><a href='http://meftunmede.blogspot.com/search/label/%C4%B0nternet'>İnternet</a></li>
</ul>
</li>
<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>
<li><a href='#'>ARAÇLAR</a>
<ul class='children'>
<li><a href='http://meftunmede.blogspot.com/2013/02/online-html-editor.html'>Html Editor</a></li>
<li><a href='http://meftunmede.blogspot.com/2013/03/html-renk-kodu-bulucu.html'>Renk Kodu Bulucu</a></li>
<li><a href='http://meftunmede.blogspot.com/2014/01/kaynak-kodu-bicimlendirme-araci.html'>Kaynak Kodu Biçimlendirici</a></li>
<li><a href='http://meftunmede.blogspot.com/2014/01/web-sitenizin-hizini-olcun.html'>Web Sitesi Hız Testi</a></li>
</ul>
</li>
<li><a href='http://meftunmede.blogspot.com/search/label/Yemek%20Tarifleri'>YEMEK TARİFLERİ</a></li>
<li><a href='#'>SOSYAL MEDYA</a>
<ul class='children'>
<li><a href='http://meftunmede.blogspot.com/search/label/Sosyal%20Medya'>Eklentiler</a>
<ul class='children'>
<li><a href='http://meftunmede.blogspot.com/search/label/Jquery'>Jquery</a></li>
<li><a href='http://meftunmede.blogspot.com/search/label/Slider'>Slider</a></li>
<li><a href='http://meftunmede.blogspot.com/search/label/Slayt'>Slayt</a></li>
</ul>
</li>
<li><a href='http://meftunmede.blogspot.com/search/label/Blogger%20Widgets'>Blogger Widgets</a></li>
</ul>
</li>
<li><a href='http://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...