Yeni Blogger menüsünde kullanıcıların işlerini kolaylaştırmak için hazırlanmış bu özel görünümlü oldukça şık navigation menü site tasarımınıza kaliteli bir görüntü sağlayacaktır.Bu Blogger menüsünde fazlaca kod kullanılmamaya özen gösterilmiştir CSS kodları kullanılarak oluşturulmuştur,bütün arama mororlarında düzgün çalışmaktadır.


Blogger için Css kodları ile oluşturulmuş bu CSS Navigation Menu Widget'nün nasıl göründüğünü test etmek istiyorsanız ve kodların çalışıp çalışmadığını kod deneme penceresinden öğrenebilirsiniz.Kod Deneme Penceresi


Blogger Html veya css kodlarından, Css kodları ile oynayarak site tasarımınıza uygun şekli ve renklerini de kendinize göre,zevkinize göre ayarlamak da mümkündür.






Yeni Blogger Navigation Menu Widget sitenize yüklemek için,ilk önce Blogger.com giriş yapınız sonra Yerleşim/Gedget Ekle/ HTML/JavaScript adımlarını takip ediniz.



Eklenti 66




HTML/JavaScript tıkladıktan sonra aşağıdaki kodu kopyalayarak resimdeki gibi boşluğa yapıştırınız, Yeni Blogger Navigation Widget Menü Eklentisini site tasarımınıza uygun olarak istediğiniz yere ekleyebilirsiniz.


Kod:
<style type="text/css">
#menu2 ul {
list-style:none;
font-family: "Trebuchet MS", sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.2em;
border:1px solid #000;
border-left:none;
float:left;
clear:both;
margin:20px;
border:5px dashed #fff;
}
#menu2 ul li{
float:left;
}
#menu2 ul li a{
display:block;
text-decoration:none;
background-color:#f0f0f0;
padding:5px 10px;
color:#666;
width:140px;
}
#menu2 ul li a span{
display:block;
text-align:center;


}
#menu2 ul li a span.title{
}
#menu2 ul li a:hover span.title{
color:#000;
}
#menu2 ul li a span.text{
font-size:12px;
font-style:italic;
padding:0px 5px;
border:1px solid #f0f0f0;
}
#menu2 ul li a:hover span.text{


}
#menu2 ul li a:hover span.text{
border:1px inset #ccc;
background-color:#fff;
}


</style>




<div id="menu2">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>


</div>