Blogger Ve Blogcular İçin Yatay CSS menü [ Hareketli ] !

Arkadaşlar bugünkü yazımda sizlere yatay CSS menü yapacağım.Bu menü fareye duyarlı yani şçyle diyeyim butonların üzerine geldiğimiz zaman butonlarımız haret ediyor.Ve aynnı zamanda bu menüyü Blogcular Bloggerlar ve diğer sistemleri kulşlanan arkadaşlar sadece CSS ve HTML kodlarından oluştuğundan dolayı kullanabilirler.

Menüden bir görünüm:

 

Demo

Dilerseniz CSS kodlarımızı yerleştirmeye başlayalım.

Blogcu Arkadaşlarmız </style> Kodundan önce Blogger Arkadaşlarmız İse ]]</b:skin> kodundan çnce aşağıda kodları ekliyorlar.

.cleaner {
  clear: both;
}
 
#fly-menu, #fly-glow-menu {
  margin: 1em auto 0 auto;
}
 
  #fly-menu li, #fly-glow-menu li {
 
    /* Basic style */
    list-style-type: none;
    margin-right: .5em;
    float: left;
    font-size: 15px;
    background: #cacaca;
    padding: 10px;
    cursor: pointer;
 
    /* Add shadow */
    -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
    -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
    box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
 
    /*
      Add animation using transition
      -webkit : Safari & Chrome.
      -moz : Firefox
      -o : Op
    era
    */
    -webkit-transition: .3s ease-in-out;
      -moz-transition: .3s ease-in-out;
      -o-transition: .3s ease-in-out;
  }
#fly-menu li:hover {
  margin-top: -1em;
}
 
#fly-glow-menu li:hover {
 
  margin-top: -1em;
  background: #fff;
 
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
  -moz-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
  box-shadow: 0px 0px 10px rgba(0,0,0, .3);
}

Şimdi Ekleyeceğimiz Kodları Aşağıda veriyorum şablonunuzun herhangi bir bölümüne ekleyebilirsiniz.

<ul id="fly-glow-menu">
  <li>
    <a href="http://mucozer.blogspot.com">
      <img src="http://i49.tinypic.com/ao6yad.png" alt="mucozer" /> MucOzeR Anasayfa
    </a></li>
  <li>
    <a href="http://feeds.feedburner.com/mucozer">
      <img src="http://i50.tinypic.com/xat3ds.png" alt="rss" /> MucOzeR RSS
    </a></li>
  <li>
    <a href="http://feedburner.google.com/fb/a/mailverify?uri=mucozer">
      <img src="//i46.tinypic.com/25g9tfn.png" alt="email" /> MucOzeR E-Mail
    </a></li>
  <li>
    <a href="http://twitter.com/mucozer">
      <img src="http://i50.tinypic.com/2h7hocp.png" alt="twitter" /> MucOzeR Twitter
    </a></li>
</ul>

Kodları kendinize göre ayarlayın  ve kullanaıma hazır artık menümüz :).

Hayırlı olsun.