Minimal Süper Menü
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://lh6.googleusercontent.com/-Gh7uFlI8fTM/Uuov_xtMqQI/AAAAAAAAKHk/rwDyLZbZN3Y/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.
Bir kaç gündür aradığım menü teşekkürler.
YanıtlaSilPaylaşım için çok teşekkürler.
YanıtlaSilsaolun hocam...
YanıtlaSilgerçek bir takipçin oldum hocam, her gün girmeden duramıyorum :)
YanıtlaSilSitemin bu hale gelmesinde büyük emek oynayan hocama teşekkürler gene çok güzel bir yazı tebrik ederim
YanıtlaSilGüzelmiş
YanıtlaSilHocam temamda bu kod yok <div id='content-wrapper buna alternatif hangi kodu bulauım
YanıtlaSilSayın Hocam artık bloghocam değilde blogger hocam olun yeni çıkan profesyonel temalar ve yeni tip menülere geçmenizi tavsiye ediyorum, umarım yanlış anlaşılmamşımdır.
YanıtlaSilnick: allasen
iyi
YanıtlaSilBu yorum yazar tarafından silindi.
YanıtlaSilHOCAM BENDE BLOGUMDA değişik kodlar paylaşıyorum. Kendi Hazırladığım kodları bile paylaşamıyorum değişik kod gösteme kutuları denedim css olarak eklenen ve yayın içine +++++ olayını denedim ama html kodu olunca kod yayında oluşuyor. Nasıl diyim yani gadget olarak eklemişim gibi oluyor. Bunu yayını hazırlarken OLUŞTUR VEYA HTML olarak denedim yayını paylaşınca kod oluşuyor. sorunun çözümünü bir türlü bulamadım. onlarca kod gösterme kutusu denedim olmadı. Ama şöyle bir çözüm var (pek çözüm denmesede) kodu tamamlamıyorum yani başındaki veya sonundaki ''<,>'' işaretlerinden birini kaldırıyorum yani kodu açık bırakıyorum o zaman çalışıyor. eskiden böyle bir durum yoktu 2014 le beraber geldi sanırım. Lütfen Yardımcı Olun
YanıtlaSilYine çok faydalı bir paylaşım olmuş. Ben hala sizden bulduğum bence en güzel açılır menüyü kullanıyorum hiç sorunsuz. Yanlız bir sorum olacak bir çok siteye baktım ama bulamadım sizin wep görünümde olan menü mobil görünümde de görünüyor bende kendi menümüm mobil görünümde de çıkmasını istiyorum bunu nasıl yapabilirim? Önceden de bildiğim üzere blog yazarlarına İlginizi çok takdir ediyor şimdiden teşekkür ediyorum.
YanıtlaSilhata oldu diyor bilmem kaçıncı satırda hocam yardım edin
YanıtlaSilhocam yazınız çok faydalı ve daha çok işime yarayacak yazılarınızı gördüm en kısa zaman da hepsinden faydalanacağım yeniyim blog yazmakta sizlerinde desteğini bekliyorum. çok iyi güzel yazılar hep bizimle olsun ... bende sizi blogumu takibe beklerim. teşekkürler...
YanıtlaSilhttp://meyveguzelligi.blogspot.com.tr/
Hazır şablonların hepsine olmuyor galiba, bende <div id='content-wrapper diye bir kod yok.
YanıtlaSil@Türkçe Öğretmeni
YanıtlaSilHayır hepsine olur ama kodlarda farklılıklar olabilir.
O kod yerine hangi kodu aramalıyız, teşekkürler.
YanıtlaSilKullandığınız şablonda o kodun yerine hangi kodun kullanıldığını bilmediğim için bir şey diyemem ama isterseniz yerleşimden blog kayıtlarının üstündeki alana gadget olarak eklemeyi deneyin.
YanıtlaSilDeneyerek yaptım ve oldu :)
YanıtlaSilBilgisayarımda internet explorer da çalışmıyor neden olabilir? Benden mi kaynaklı ne yapmalıyım?
YanıtlaSil@Özge
YanıtlaSilBen kontrol ettim explorerda da çalışıyor. Sizde neden çalışmadı bilemedim.
Gereksiz kod dolu.Buyrun düzenlenledim buda düzenlenmiş hali
YanıtlaSilhttps://www.dropbox.com/s/94ti5penl2v97hc/%C3%BCst%20hover%20men%C3%BC.txt
Merhaba öncelikle çok teşekkür ederim çok güzel oldu
YanıtlaSilBu menüyü Sementit Temanızdaki menü ile değiştirmek istiyorum.. Ancak Sementit Temanızdaki menünün kodlarını bulamadığım için silemiyorum. Lütfen yardımcı olur musunuz..
YanıtlaSil@Serdar Kara Bu menüyü Sementit Temanızdaki menü ile değiştirmek istiyorum.. Ancak Sementit Temanızdaki menünün kodlarını bulamadığım için silemiyorum. Lütfen yardımcı olur musunuz..
YanıtlaSil@Barış Gökçe
YanıtlaSilSementit'te menü kodları şu satır ile başlar:
<div id='tabs'>
Yani tabs komutunu silmeden sadece altındaki menü kodlarını mı silip bu menüyü ekliycez ?
SilO satırı da silin.
YanıtlaSilSerdar hocam http://uyumsuzuz.blogspot.com lütfen bi bakabilir misiniz sidebar aşağı kaydı bu şekilde :S Sementit Temasındaki Menü yerine nasıl yerleştirebilirim?
YanıtlaSilHTML kodlarını div sidebar altına yerleştirdiğimde menü yerine oturuyor ama sidebar tamamen aşağı kaydı lütfen yardımcı olur musunuz.. @Serdar Kara
YanıtlaSilTeşekkürler
YanıtlaSilBu menüye arama butonu eklememiz mümkün mü? Veya arama butonuna sahip bir dropdown menü önerir misiniz?
YanıtlaSilMerhabalar
YanıtlaSilAçılır menüyü yaptım ,hatta ufakta olsa değişiklikler yaptım.En sondaki menüyü anasayfanın peşine koyup alt menüler oluşturdum ama alt menülere link verdiğimde genel görünür olarak degilde benim göreceğim şekilde yani yayın ayarları,etiketler seklinde geliyor ,nerede hata yapmış olabilirim?
Çok soru yöneltiyorum ama bu işi yapmak istiyorum.
hocam yaptım ama menü sağa, sosyal ağ butonları sola dayandı.. nasıl ortalarım ?
YanıtlaSilPeki hocam açılır mnelülere sayfa değilde o etiketli sayfaların açılmasını istersek nasıl olacak. Yani üst menüdeki bölüme tıklandığı zaman aynı etiketteki sayfalar açılacak..
YanıtlaSilmenü yazı rengini değiştiremiyorum yardım
YanıtlaSilMerhaba. Öncellikle sonsuz teşekkürler bu yazı için. yazılarımı yayınlamak isterken menü içerisinde böyle bir sayfa bulunmuyor diyor. neden olabilir?
YanıtlaSilhocam olmuyor nasıl yapabilirim
YanıtlaSilDeğerli hocam bu menüdeki bulunan yazıların puntosunu nasıl artırabiliriz. Cevbaınız için şimdiden teşekkür ederim.
YanıtlaSilYazı puntosunu artırmak için font-size değerini değiştirebilirsiniz.
YanıtlaSil]]> bende böyle bi kod yok nereye kopyalamam lazım
YanıtlaSilb:skin böyle bi kod yok
YanıtlaSilOldu işte http://www.tmrarbak.com/
YanıtlaSilmerhaba,
YanıtlaSilöncelikle çok teşekkürler bilgiler için çok faydalı oldu. bişey sormak istiyorum, yazıları bu menü başlıklarına nasıl bağlıycam. teşekkürler.
Merhaba,
SilŞöyle örnek verelim:
<a href='http://bloghocam.blogspot.com/2011/04/feedburner-kurulumu-ve-ayarlar.html'>Feedburner</a>
Bunun anlamı feedburner kelimesine tıklayınca yanında yazan urlyi açmasıdır. Siz de mesela menüye saç botoxu kelimesi ekleyip buna tıkladığında o yazının açılmasını istiyorsanız verdiğim kodu şu şekilde düzenleyeceksiniz:
<a href='https://ozlemsarkaya.blogspot.com.tr/2018/02/sac-botoxu-nedir-nasl-uygulanr.html'>Saç Botoxu</a>
Serdar bey mail adresinize ne yapmak istediğimi yazsam olur mu?
SilOlur tabi bloghocam@gmail.com adresine yazabilirsiniz.
SilKodları girdiğimde menü alt alta olarak görünüyor nedeni nedir aceba?
YanıtlaSil