Blogger İçin Şık Görünümlü Bir Menü
   Merhaba arkadaşlar birkaç blog sitelerinizde kullanabileceğiniz çok şık bir eklenti paylaşmak istiyorum sizlerle resimden de göründüğü gibi menü’yü sitenize eklediğiniz zaman bu şekilde görünecek yani renk olarak tabi isterseniz rengini değiştirebilirsiniz kendi sitenize göre artık size kalmış , hemen eklentinin kodlarını paylaşmak istiyorum aşağıdaki 1. kodları sitenizin şablon kısmına gelip Css bölümüne ekleyeceksiniz  , 2. kodları ise menü’nün nerede olmasını istiyorsanız oraya ekleyeceksiniz bunu gadget ekle yardımı ile yapabilirsiniz


Blogger İçin Şık Görünümlü Bir Menü

1.KODLAR CSS KODLARI

.main-nav {
float: center;
}
.main-nav ul {
margin: 0;
}
.main-nav ul li {
padding-left: 0 !important;
position: relative;
list-style: none;
float: left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
margin-right: 2px;
}
.main-nav ul li a {
display: block;
background: transparent !important;
color: #333;
text-align: center;
line-height: 39px;
text-transform: capitalize;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
padding: 0 9px;
border-radius: 3px;
}
.main-nav ul li a:hover {
text-decoration: none;
}
.main-nav li ul li a {
text-align: left;
color: #99a1a9;
padding-left: 0 !important;
}
.main-nav li > ul {
display: none;
}
.main-nav li:hover {
background: #ff304e;
border-radius: 3px;
}

.main-nav li.active {
background: #ee6177;
border-radius: 2px;
color:#fff;
}

.main-nav li.active a{color:#fff}
.main-nav li:hover > a {
color: #ffffff;
}
.main-nav li:hover > ul {
display: block;
position: absolute;
background: #ffffff;
top: 39px;
z-index: 9999999;
}
.main-nav li ul li:hover {
background-color: #ffffff;
}
.main-nav li ul li:hover > a {
color: #FF304E;
}
.main-nav li > ul li a {
width: 180px;
margin: 0 18px;
height: 40px;
line-height: 40px;
font-weight: 700;
font-size: 11px;
border-bottom: 1px solid #f2f2f2;
}
.main-nav li > ul li, .main-nav li > ul li:hover {
border-bottom: none;
}
.main-nav ul li ul li:hover > ul {
left: 200px;
top: 0;
}
.main-nav ul li ul li ul li:hover> ul {
left: 200px;
top: 0;
}
.sub-menu {
padding: 0;
}

 

2.KODLAR HTML KODLARI