5 Şubat 2014 Çarşamba

Minimal Süper Menü

43 yorum

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.

43 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. gerçek bir takipçin oldum hocam, her gün girmeden duramıyorum :)

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

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

    YanıtlaSil
  6. 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
  7. Bu yorum yazar tarafından silindi.

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

    YanıtlaSil
  11. 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
  12. Hazır şablonların hepsine olmuyor galiba, bende <div id='content-wrapper diye bir kod yok.

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

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

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

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

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

    YanıtlaSil
  19. 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
  20. Merhaba öncelikle çok teşekkür ederim çok güzel oldu

    YanıtlaSil
  21. 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
  22. @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
  23. @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
  24. 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
  25. 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
  26. Bu menüye arama butonu eklememiz mümkün mü? Veya arama butonuna sahip bir dropdown menü önerir misiniz?

    YanıtlaSil
  27. 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
  28. hocam yaptım ama menü sağa, sosyal ağ butonları sola dayandı.. nasıl ortalarım ?

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

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

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

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

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

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

    YanıtlaSil

Picardes

LİNKLER