Blogger iç içe geçmiş alternatif menü

Merhaba sevgili blog severler bugün'den itibaren {Blogger eklentileri} hakkında paylaşımlar yapmaya karar verdim ve ilk olarak " iç içe geçmiş alternatif menü " paylaşıcam.
Blogger'a eklenişi oldukça basit ve kullanışlı bir tema dilerseniz kendinizde değişiklikler yapabilirsiniz menü üzerinde.

[ Demo ]


Öncelikle Blogger panelimizin Tasarım > Html’yi Düzenle bölümünü açarak aşağıdaki kodu buluyoruz.

]]></b:skin>

Bu kodun hemen üzerine menümüzün aşağıdaki CSS kodlarını ekliyoruz.

.icmenu {
padding:5px 0;
width:520px;
margin:15px auto;
height:160px;
}
a.icem {
position:relative;
float:left;
font-size:14px;
line-height:14px;
font-family:Tahoma;
text-align:center;
color: #fff;
width: 160px;
padding:73px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRT7USWFms4uyK9sNhmMNsYU6rdGfMYU0fYvIHFaeRw7391KiKS0QVOA-jkwE093hVZ9LSgAE3u7uIH1HSBWeVX4yd3pnixc7Ur2FSK3FL2X4CnucWJn0cc-NU_oxsGFCr9K-Q1OLlGH0/s1600/arkamenu2.png) no-repeat 0 -160px;
margin-left:-40px;
z-index:3;
}
a.icem:hover {
background-position:0 0;
z-index:9!important;
}

Evet üstteki css kodlarını ekledikten sonra blogu kaydediyor ve menüyü eklemek istediğimiz yere alttaki kodları yazarak ekliyoruz. ( Örneğin Gadget olarak ekleyebilirsiniz )

<div class='icmenu'>
<a class='icem' href='#' style='margin-left:0px;'>Anasayfa</a>
<a class='icem' href='#'>Hakkımızda</a>
<a class='icem' href='#'>Arşiv</a>
<a class='icem' href='#'>İletişim</a>
</div>

Not: [ # ] yerlerine linkinizi ekleyeceksiniz.