Blogger’da iç içe geçmiş alternatif menü yapımı

                                                       

    

Bugün, Blogger sayfalarımızın vazgeçilmez öğeleri olan menülerimiz için klasiklerinin dışında bir tasarıma sahip menü yapımından bahsetmek istiyorum. Basit olarak iç içe geçmiş dairelerden oluşan bu menü, farklılık isteyen Blogger kullanıcıları için sitelerine estetik katacaktır. Menüde yer alan bağlantılardan tıklanmak için üzerine gelinen, diğer dairelerin önüne geçiyor. Normal durumda ise arka arkaya dizilmiş daire dizisi görünümünde duruyor. Denemek isteyenler için daha fazla oyalanmadan bu menüyü sitemize nasıl ekleyeceğimizi anlatıyorum.

Ö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/AVvXsEjlT-dhHnSCbPlKojvxRgcRsFWsVz1GZ1_2tMaflcg02Ocz_O8oW20bnSogNM-P8SalfuhaiAcESB-qyiGT5eyt6v1QGS0ur_Se3EknnvLX_wJY8sgD795n8e1OPfZxg0LTO4741ArvfHQ/s1600/arkamenu2.png) no-repeat 0 -160px;
margin-left:-40px;
z-index:3;
}
a.icem:hover {
background-position:0 0;
z-index:9!important;
}

Ve son olarak menümüzü yerleştirmek istediğimiz yere aşağıdaki kodları ekliyoruz.

<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: Menüde kırmızıyla belirtilen # kısımlara bağlantı adreslerinizi yazabilirsiniz.

etiketler ; 

Blogger’da iç içe geçmiş alternatif menü yapımı , Blogger modern menü , blogger animasyonlu menü , blogger menü yap