Blogger için menü alternatiflerine “minimal süper menü” isminde yeni bir menü daha ekleyelim. Son zamanlarda dağıtılan Blogger temalarında çok sık gördüğümüz bu menüyü ben de hazır bir temanın içinden aldım ve bazı küçük değişiklikler yaparak paylaşmak istedim.
Menüye neden bu ismi verdiğimi açıklamak istiyorum. Menüde küçük yazı boyutu ve ikonlar kullanlmış. Bu yüzden az yer kaplıyor ve minimal. Ayrıca menünün sağ köşesinde sosyal ikonlar mevcut. Yani menü hem blog içi navigasyonu, hem de sosyal platformlardaki hesaplarınız arasındaki navigasyonu sağlıyor. Bu yüzden süper :)
Menüde istediğiniz yerleri açılır sekme gibi göstererek alt menü öğeleri de ekleyebilirsiniz. Aşağıdaki demo videoyu izlediğiniz Menü linkinin üzerine geldiğin açıldığını ve alt öğeler çıktığını göreceksiniz.
Bu menüye blogunuza eklemek için öncelikle Blogger kumanda paneline girip Şablon > HTML’yi düzenle diyerek şablonun kodlarını açın ve Ctrl + F kuş kombinasyonuyla açılan arama kutusunun yardımıyla ]]></b:skin> kodunu bulun. Bunun hemen üzerine aşağıdaki stil kodlarını yapıştırın.
/* BH Minimal Süper Menü Stil Kodları
----------------------------------------------- */
#itbnav {
background:#F1921A;
padding:0;
height: 29px;
font-size:12px;
position: relative;
border:1px dotted #000;}
#itbnav .wrapnya,
#nav .wrap,
#headisi,
#content-wrapper {
margin:0 auto;
width:98%;
}
#itbnav .tgltop {
float:left;
color:#E2E2E2;
display:block;
line-height:20px;margin-top: 4px;
}.sf-menu,
.sf-menu * {
margin:0;
padding:0;
list-style:none;
}
.sf-menu li {
position:relative;
}
.sf-menu ul {
position:absolute;
display:none;
top:100%;
left:0;
z-index:99;
}
.sf-menu > li {
float:left;
margin:0 1px;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
display:block;
}
.sf-menu a {
display:block;
position:relative;
}
#menunav > li > a {
font: normal normal 90% 'Open Sans', serif ,Sans-serif;
line-height: 50px;
text-transform: uppercase;
font-weight: 600;
height: 50px;
}
.sf-menu ul ul {
top:0;
left:100%;
}
.sf-menu {
float:left;
}
.sf-menu ul {
min-width:12em;
*width:12em;
}
.sf-menu a {
padding:0 10px;
height:50px;
line-height:50px;
text-decoration:none;
zoom:1;
}
.sf-menu a.home, .sf-menu > li > a.home.current {
background-color:#007ABE;
text-indent:-9999px;
padding:0;
width:50px;
}
.sf-menu a {
color:#E6E6E6;
font-size:11px;
}
#itbnav .sf-menu a {
color:#fff;
height: 29px;
line-height: 29px;
}
.sf-menu li {
white-space:nowrap;
*white-space:normal;
-moz-transition:background-color .2s;
-webkit-transition:background-color .2s;
transition:background-color .2s;
position:relative;
}
.sf-menu ul li {
background-color:#007ABE;
margin:1px 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#itbnav .sf-menu ul li, #itbnav .sf-menu ul ul li {
background-color:#F1921A;
}
.sf-menu ul a {
font-weight:normal;
height:28px;
line-height:28px;
}
#itbnav .sf-menu ul a {
height:25px;
line-height:25px;
}
.sf-menu ul a:hover {
padding-left:12px;
}
.sf-menu ul ul li {
background:#007ABE;
margin:0 0 1px 2px;
}
.sf-menu li:hover > a,
.sf-menu li.sfHover > a,
.sf-menu > li > a.current {
background-color:#000;
-moz-transition:none;
-webkit-transition:none;
transition:none;
color:#E6E6E6;
}
#itbnav .sf-menu li:hover > a,
#itbnav .sf-menu li.sfHover > a,
#itbnav .sf-menu > li > a.current {
background-color:#679EC9;
color:#E2E2E2;
}
.sf-arrows .sf-with-ul {
padding-right:2em;
*padding-right:1em;
}
.sf-arrows .sf-with-ul:after {
content:'';
position:absolute;
top:50%;
right:0.85em;
margin-top:-2px;
height:0;
width:0;
border:4px solid transparent;
border-top-color:#E6E6E6;
}
#itbnav .sf-arrows .sf-with-ul:after {
border-top-color:#007ABE;
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
border-top-color:#E6E6E6;
}
#itbnav .sf-arrows > li > .sf-with-ul:focus:after,
#itbnav .sf-arrows > li:hover > .sf-with-ul:after,
#itbnav .sf-arrows > .sfHover > .sf-with-ul:after {
border-top-color:#E2E2E2;
}
.sf-arrows ul .sf-with-ul:after {
margin-top:-4px;
margin-right:-3px;
border-color:transparent;
border-left-color:#E6E6E6;
}
#itbnav .sf-arrows ul .sf-with-ul:after {
border-left-color:#007ABE;
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after{
border-left-color:#E6E6E6;
}
#itbnav .sf-arrows ul li > .sf-with-ul:focus:after,
#itbnav .sf-arrows ul li:hover > .sf-with-ul:after,
#itbnav .sf-arrows ul .sfHover > .sf-with-ul:after {
border-left-color:#E2E2E2;
}
.sf-menu li > i {
position:absolute;
top: 3px;
right: 3px;
width: 27px;
height: 22px;
cursor:pointer;
display:none;
background-color:#c00000;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
outline:0;
}
.sf-menu li > i:after {
content: '+';
color: #fff;
font-size: 19px;
position: absolute;
left: 5px;
top: -2px;
}
.sf-menu li > i.active:after {
content:'-';
font-size:39px;
top:-14px;
}
#itbnav .sf-menu li > i {
width: 23px;
height: 19px;
top: 6px;
}
#itbnav .sf-menu li > i:after {
top: -4px;
left: 3px;
}
#itbnav .sf-menu li > i.active:after {
top: -13px;
font-size: 31px;
left: 4px;
}
.sf-menu a.home:before,.sf-menu a.home:before, #searchnya button:before, #view a:before, .breadcrumbs .homex:before {
text-indent: 0;
}
.sf-menu a.home:before {
width: 30px;
height: 30px;
}
.sf-menu a.home:before {
content: "\f015";
top: 0;
font-size: 29px;
left: 11px;
color: #FBFBFB;
}
#icon-socialmn {
margin: 0;
float: right;
}
#icon-socialmn li {
float: left;
}
#icon-socialmn a {
display: block;
text-indent: -9999px;
width: 26px;
height: 29px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8H9uvk0e9N8Gx17aMUj4x59NAwL2XpXPRGZj-kDUfVdMtoh6WJIRvKl1U4Sbp9msIMIf1rxSzecX7e4-9uiwqiMVB4-PcVQh1W2MJx5uz373uTFVeeKxl2q5B_lS6bF5anGhCMvKdiY90/s575/beyaz-sosyal-ikonlar.png);
background-repeat: no-repeat;
-webkit-transition: background .2s ease-out;
-moz-transition: background .2s ease-out;
-o-transition: background .2s ease-out;
transition: background .2s ease-out;
}
#icon-socialmn .sotw a {
background-position: 1px 2px;
}
#icon-socialmn .sofb a {
background-position: -24px 2px;
}
#icon-socialmn .sogo a {
background-position: -49px 2px;
}
#icon-socialmn .sorss a {
background-position: -74px 2px;
}
#icon-socialmn .solinkn a {
background-position: -99px 2px;
}
#icon-socialmn .sopint a {
background-position: -150px 2px;
}
#icon-socialmn .sotw a:hover {
background-color: #2DAAE1;
}
#icon-socialmn .sofb a:hover {
background-color: #3C5B9B;
}
#icon-socialmn .sogo a:hover {
background-color: #F63E28;
}
#icon-socialmn .sorss a:hover {
background-color: #FA8C27;
}
#icon-socialmn .solinkn a:hover {
background-color: #0173B2;
}
#icon-socialmn .sopint a:hover {
background-color: #CB2027;
}
Sıra HTMLkodlarını eklemeye geldi. HTML kodlarını ekleyeceğiniz yer ile ilgili şu bilgiyi vermek istiyorum:
1. Blogger’ın kendi temalarından birini kullanıyorsaız HTML kodlarını <div class='tabs-outer'> kodnun hemen üstüne ekleyin.
2. Özel bir Blogger teması kullanıyorsanız HTML kodlarını <div id='content-wrapper'> kodunun hemen altına ekleyin.
<!--BH Minimal Süper Menü HTML Kodları-->
<div id='itbnav'>
<ul class='sf-menu' id='topmenunav'>
<li><a href='http://bloghocam.blogspot.com/'>Ana Sayfa</a></li>
<li><a href='http://bloghocam.blogspot.com/p/hakkmda.html'>Hakkımda</a></li>
<li><a href='http://bloghocam.blogspot.com/p/misafir-blogculuk.html'>Misafir Blogculuk</a></li>
<li><a href='http://bloghocam.blogspot.com/p/destek-ol.html'>Destek Ol</a></li>
<li><a href='http://bloghocam.blogspot.com/p/takip-et.html'>Takip Et</a></li>
<li><a href='http://bloghocam.blogspot.com/p/ne-dediler.html'>Ne Dediler?</a></li>
<li><a href='http://bloghocam.blogspot.com/p/arsiv.html'>Arşiv</a></li>
<li><a href='http://bloghocam.blogspot.com/p/galeri.html'>Reklam</a></li>
<li><a href='http://bloghocam.blogspot.com/p/iletisim.html'>İletişim</a></li>
<li><a href='#'>Menü</a>
<ul><li><a href='http://bloghocam.blogspot.com/2011/04/feedburner-kurulumu-ve-ayarlar.html'>Feedburner</a></li>
<li><a href='http://bloghocam.blogspot.com/2012/06/acemiler-icin-google-analytics-rehberi.html'>Google Analytics</a></li>
<li><a href='http://bloghocam.blogspot.com/2012/08/herkesin-bir-gravatar-olsun.html'>Gravatar</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/09/paypal-nedir-bloggerlar-icin-neden.html'>Paypal</a></li></ul>
</li>
</ul>
<ul class='sociico' id='icon-socialmn'>
<li class='sotw'><a href='https://twitter.com/BlogHocam' target='_blank'>twitter</a></li>
<li class='sofb'><a href='http://www.facebook.com/bloghocam' target='_blank'>facebook</a></li>
<li class='sogo'><a href='http://www.google.com/+BloghocamBlogspot' target='_blank'>google</a></li>
<li class='sorss'><a href='http://feeds.feedburner.com/bloghocam' target='_blank'>rss</a></li>
<li class='solinkn'><a href='http://linkedin.com' target='_blank'>linkedin</a></li>
<li class='sopint'><a href='http://pinterest.com/bloghocam' target='_blank'>pinterest</a></li>
</ul>
</div>
HTML kodlarında menü öğelerini kendinize göre düzenleyeblir, istemediğiniz öğelere ait kod satırını silerek menüden kaldırabilirsiniz.
