Blogger Yatay Menu CSS3 ile Navigasyonlu

Daha önceden yayınladığımız blogger için yatay menüler serisine yenisini ekliyoruz.Eklemesi gayet basit bir o kadar kullanışlı olan CSS3 ile tasarlanmış ve html kodları içerisinde bir kelimelik kodu değiştirerek istediğiniz zaman rengini değiştirebileceğiniz blogger navigasyonlu yatay menüyü blogunuza eklemeyi anlatacağız.
DEMO GÖRÜNÜM
1-Blogger hesabımızla giriş yapıyoruz.
2-Şablon>Htmlyi Düzenle>Devam Et yolunu takip edip widget şablonlarını genişlet kutucuğunu işaretliyoruz.
3-Ctrl+F yardımı ile html kodları içerisinde </head> kodunu aratıp buluyoruz.
4-Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodundan önceki kısma yapıştırıyoruz.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

5-Yine Html kodları içerisinde ]]></b:skin> kodunu aratıp buluyoruz.
6-Aşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.

/*LAVALAMP MENU BY http://www.oyun04.com/ START*/

.lavalamp {

position: relative;

border: 1px solid #d6d6d6;

background: #fff;

padding: 15px;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

border-radius : 10px;

-moz-border-radius : 10px;

-webkit-border-radius : 10px;

background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));

height: 18px;

font-family: calibri;

}

.magenta {

background : rgb(190,64,120);

background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));

border: 1px solid #841144;

}

.cyan {

background : rgb(64,181,197);

background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));

border: 1px solid #2f8893;

}

.yellow {

background : rgb(255,199,79);

background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));

border: 1px solid #c08c1f;

}

.orange {

background : rgb(255,133,64);

background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));

border: 1px solid #c04f11;

}

.dark {

background : rgb(89,89,89);

background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));

border: 1px solid #272727;

}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{

color: #fff;

text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}

.lavalamp a {

text-decoration: none;

color: #262626;

line-height: 20px;

}

.lavalamp ul {

margin: 0;

padding: 0;

z-index: 300;

position: absolute;

}

.lavalamp ul li {

list-style: none;

float:left;

text-align: center;

}

.lavalamp ul li a {

padding: 0 20px;

text-align: center;

}

.floatr {

position: absolute;

top: 10px;

z-index: 50;

width: 70px;

height: 30px;

border-radius : 8px;

-moz-border-radius : 8px;

-webkit-border-radius : 8px;

background : rgba(0,0,0,.20);

-webkit-transition: all .4s ease-in-out;

-moz-transition: all .4s ease-in-out;

}

/*LAVALAMP MENU BY http://www.oyun04.com/ END*/

7-Şablonumuzu kaydedip çıkıyoruz.
8-Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascrip yolunu takip edip açılan gadget içerisine aşağıdaki kodu yapıştırıyoruz.

<div class="lavalamp dark">
 <ul>
  <li class="active"><a href="">Ana Sayfa</a></li>
  <li><a href="#">Blog Okulu</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">oyun04.com</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">İletişim</a></li>
  <li><a href="#">Blog Mimarı</a></li>
  <li><<a href="#">Hakkımızda</a></li>
 </ul>
 <div class="floatr"></div>
</div>

kod içerisinde
mavi renkle yazdığımız yere menüde görünecek kelimeyi, pembe renkli # yerine yazı linkimizi koyuyoruz. kırmızı renkle yazdığımız <div class="lavalamp dark"> kodu yerine aşağıda verdiğimiz listede seçtiğimiz renge ait kodu yazarak blogger yataymenü rengini  istediğimiz zaman değiştirebiliriz.

<div class="lavalamp">
<div class="lavalamp magenta">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
<div class="lavalamp dark">