Blogger sitelerinizde kullanabileceğiniz alternatif  bir menü arkadaşlar , menü  resimde de gördüğünüz gibi , menü üzerine geldiğiniz zaman rengi değişiyor olması siteniz açısından güzel bir görünüm imkanı sunacak size eğer tasarıma önem veriyorsanız kullanmanızı tavsiye ederim , sitenize uygulaması çok kolay olsa da kodlardan anlamayan arkadaşlar için anlatacağım eğer yapamayanlar olursa yorum bölümünde belirtirseniz yardımcı olmaya çalışırım kodları aşağıda vereceğim.
 
Üzerine Gelince Rengi Değişen Menü

Yapmanız gerekenler;

Aşağıdaki 1.kodları Resimde gördüğünüz yere yani css bölümüne yapıştıracaksınız
Blogger panelinize girin  Şablon bölümünde HTML'yi Düzenle seçeneğinden sonra aşağıdaki ilk kodları ( Css kodları )  ]]></b:skin>  bu koddan hemen önce ekleyin.   Daha sonra 2. kodları yani Html kodlarını sitenizde görünmesini istediğiniz kısıma Yerleşim , Gadget Ekle seçeneği ile  HTML / JavaScipt  , seçeneği ile ekleyin hepsi bu kadar 
Artık menü kullanıma hazır , hayırlı olsun
 
Üzerine Gelince Rengi Değişen Menü
 
 
 
 

Css kodları

/*——[ Main-menu ]——-*/

.nav-menu {margin: 0 auto 0;padding: 0;width: 100%;display: block;float: left;clear: both;position:relative;top:-26px;z-index:100;}
.nav-menu ul {list-style: none;padding: 0px;margin: 0px auto;z-index: 1;display: table;width:auto;}
.nav-menu ul li {display: inline-block;float: left;position: relative;padding: 0px;margin: 0px;z-index: 1;list-style: none;border-left: 1px solid #E4E4E4;background: white;}
.nav-menu ul li:first-child {border: 0;}
.nav-menu li a {color: #333;margin: 0px;line-height: 1.1;padding: 18px 25px;font-size: 11px;font-weight: 700;display: block;text-transform: uppercase;font-family: roboto,sans-serif;}
.nav-menu li a:hover { color:white;}
.sticky { position: fixed; top: 0px; border-bottom: 1px solid #ddd; z-index: 99999; }
.nav-menu li:nth-child(1) > a,
.nav-menu li:nth-child(2) > a,
.nav-menu li:nth-child(3) > a,
.nav-menu li:nth-child(4) > a,
.nav-menu li:nth-child(5) > a,
.nav-menu li:nth-child(6) > a,
.nav-menu li:nth-child(7) > a,
.nav-menu li:nth-child(8) > a,
.nav-menu li:nth-child(9) > a,
.nav-menu li:nth-child(10) > a {
position: relative;}
.nav-menu li:nth-child(1) > a:before,
.nav-menu li:nth-child(2) > a:before,
.nav-menu li:nth-child(3) > a:before,
.nav-menu li:nth-child(4) > a:before,
.nav-menu li:nth-child(5) > a:before,
.nav-menu li:nth-child(6) > a:before,
.nav-menu li:nth-child(7) > a:before,
.nav-menu li:nth-child(8) > a:before,
.nav-menu li:nth-child(9) > a:before,
.nav-menu li:nth-child(10) > a:before{
content: "";
display: block;
height: 3px;
width: 102%;
position: absolute;
bottom: -3px;
left: -1px;}
.nav-menu li:nth-child(1) > a:before,.nav-menu li:nth-child(1) > a:hover{background: #1aaf5d;}
.nav-menu li:nth-child(2) > a:before,.nav-menu li:nth-child(2) > a:hover{background: #227ebb;}
.nav-menu li:nth-child(3) > a:before,.nav-menu li:nth-child(3) > a:hover {background: #2d97de;}
.nav-menu li:nth-child(4) > a:before,.nav-menu li:nth-child(4) > a:hover {background: #9c56b8;}
.nav-menu li:nth-child(5) > a:before,.nav-menu li:nth-child(5) > a:hover {background: #33485f;}
.nav-menu li:nth-child(6) > a:before,.nav-menu li:nth-child(6) > a:hover {background: #ea4b35;}
.nav-menu li:nth-child(7) > a:before,.nav-menu li:nth-child(7) > a:hover {background: #e87e04;}
.nav-menu li:nth-child(8) > a:before,.nav-menu li:nth-child(8) > a:hover {background: #f3c600;}
.nav-menu li:nth-child(9) a:before,.nav-menu li:nth-child(9) > a:hover {background: #ACEE21;}
.nav-menu li:nth-child(10) a:before,.nav-menu li:nth-child(10) > a:hover {background:#F30074 ;}

 

 

 

Html Kodları

 

 

<!– blog_main_navigation_menu –>
<div class='nav-menu'>
<div class='ct-wrapper'>
<ul class='clearfix'>
<li><a href='/'>Home</a></li>
<li><a href='/p/sample-page.html'>News</a></li>
<li><a href='#'>Lifestyle</a></li>
<li><a href='#'>Fashion</a></li>
<li><a href='#'>Nature</a></li>
<li><a href='#'>Health</a></li>
<li><a href='#'>Travel</a></li>
<li><a href='#'>Living</a></li>
<li><a href='#'>Food</a></li>
</ul>
</div>
</div>
</div>

YENİ YAZILARI KAÇIRMAMAK İÇİN ABONE OLABİLİRSİNİZ

Aşağıdaki kutucuğa e-posta adresini yazarak her yeni makaleden anında haberdar olabilirsin.

Abone Olduğunuz İçin Teşekkür Ederim.

Bir Şeyler Yanlış Gitti. Lütfen Tekrar Deneyin.