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.

Blogger için minimal süper menü

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.

48 yorum:

  1. Bir kaç gündür aradığım menü teşekkürler.

    YanıtlaSil
  2. Paylaşım için çok teşekkürler.

    YanıtlaSil
  3. saolun hocam...

    YanıtlaSil
  4. gerçek bir takipçin oldum hocam, her gün girmeden duramıyorum :)

    YanıtlaSil
  5. Sitemin bu hale gelmesinde büyük emek oynayan hocama teşekkürler gene çok güzel bir yazı tebrik ederim

    YanıtlaSil
  6. Hocam temamda bu kod yok <div id='content-wrapper buna alternatif hangi kodu bulauım

    YanıtlaSil
  7. Sayı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.
    nick: allasen

    YanıtlaSil
  8. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  9. HOCAM 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ıtlaSil
  10. Yine ç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ıtlaSil
  11. hata oldu diyor bilmem kaçıncı satırda hocam yardım edin

    YanıtlaSil
  12. hocam 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...
    http://meyveguzelligi.blogspot.com.tr/

    YanıtlaSil
  13. Hazır şablonların hepsine olmuyor galiba, bende <div id='content-wrapper diye bir kod yok.

    YanıtlaSil
  14. @Türkçe Öğretmeni
    Hayır hepsine olur ama kodlarda farklılıklar olabilir.

    YanıtlaSil
  15. O kod yerine hangi kodu aramalıyız, teşekkürler.

    YanıtlaSil
  16. Kullandığı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ıtlaSil
  17. Deneyerek yaptım ve oldu :)

    YanıtlaSil
  18. Bilgisayarımda internet explorer da çalışmıyor neden olabilir? Benden mi kaynaklı ne yapmalıyım?

    YanıtlaSil
  19. @Özge
    Ben kontrol ettim explorerda da çalışıyor. Sizde neden çalışmadı bilemedim.

    YanıtlaSil
  20. Gereksiz kod dolu.Buyrun düzenlenledim buda düzenlenmiş hali

    https://www.dropbox.com/s/94ti5penl2v97hc/%C3%BCst%20hover%20men%C3%BC.txt

    YanıtlaSil
  21. Merhaba öncelikle çok teşekkür ederim çok güzel oldu

    YanıtlaSil
  22. 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
  23. @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
  24. @Barış Gökçe
    Sementit'te menü kodları şu satır ile başlar:
    <div id='tabs'>

    YanıtlaSil
    Yanıtlar
    1. Yani tabs komutunu silmeden sadece altındaki menü kodlarını mı silip bu menüyü ekliycez ?

      Sil
  25. Serdar 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ıtlaSil
  26. HTML 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ıtlaSil
  27. Bu menüye arama butonu eklememiz mümkün mü? Veya arama butonuna sahip bir dropdown menü önerir misiniz?

    YanıtlaSil
  28. Merhabalar
    Açı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.

    YanıtlaSil
  29. hocam yaptım ama menü sağa, sosyal ağ butonları sola dayandı.. nasıl ortalarım ?

    YanıtlaSil
  30. Peki 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ıtlaSil
  31. menü yazı rengini değiştiremiyorum yardım

    YanıtlaSil
  32. Merhaba. Ö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ıtlaSil
  33. hocam olmuyor nasıl yapabilirim

    YanıtlaSil
  34. Değ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ıtlaSil
  35. Yazı puntosunu artırmak için font-size değerini değiştirebilirsiniz.

    YanıtlaSil
  36. ]]> bende böyle bi kod yok nereye kopyalamam lazım

    YanıtlaSil
  37. b:skin böyle bi kod yok

    YanıtlaSil
  38. Oldu işte http://www.tmrarbak.com/

    YanıtlaSil
  39. merhaba,
    ö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.

    YanıtlaSil
    Yanıtlar
    1. Merhaba,
      Şö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>

      Sil
    2. Serdar bey mail adresinize ne yapmak istediğimi yazsam olur mu?

      Sil
    3. Olur tabi bloghocam@gmail.com adresine yazabilirsiniz.

      Sil
  40. Kodları girdiğimde menü alt alta olarak görünüyor nedeni nedir aceba?

    YanıtlaSil

Blogger tarafından desteklenmektedir.