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çerisindemavi 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"> | ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqKnwuEXOORQdDLmTp5GaUXPIuNYx43WcY7bUMFudRcphAG_9VLe1QUV7WFExVJPVVGEDpi-FpHEy6gIWSbc2osUPnRfhhN5tS3E1RVofAQLwUibVzDhnTEEWabksWu_I40vaHJMXQI5A/s1600/hb-menu-default.png) |
<div class="lavalamp magenta"> | ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJSxMhT37XEsa3diXskrLUWUly-liPMRywCDgCA7f_jxOAVW1XBY9C3I58zmqsE8HTK8ntfZEM98os6qF9kk2VoqTyldqGhBPy4xJN61p98b7a-ORDGOaxU4tx7vC2mHL1ImYboajPE7Y/s1600/hb-menu-magneta.png) |
<div class="lavalamp cyan"> | ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrfBVsRcrrtq-Zgp1rdfgAUiYRa175kiw9sbQIl4M4ORywzQtqdr1cNyTcz6EoeNbqWMD_TMt_J914MZoVtS1NzfCRX_OaztJPnHE5PDXl4R8LUiPJGEQzvuUdKUiVqscWpC393zmyoc/s1600/hb-menu-cyan.png) |
<div class="lavalamp yellow"> | ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-5HAQQQMEIhph0AX1p5Z1WEclf6jCFzAvUJStTH8N6Qyujj9yeb3IlnzuikE1ukVv-UkVR0RoSoOBXxXN0PkiEPZ8UmqwAt53NKDvqrvDf_GF_u87B3Ygxft-A7QDJorpog5fBVRLRgg/s1600/hb-menu-yellow.png) |
<div class="lavalamp orange"> | ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLUdLIFtEQyBMFo4FllzLZLcOyq_fprn6x14-UoaODCIDKNcgcYO1rEsGfgRwuACHqq-gZn6GyI2uY8u09ls6XKZ5v2wFxmrowToWP7MI_0mgpYCkwVnautfD_pXofBPXDzwJB6LI4xPY/s1600/hb-menu-orange.png) |
<div class="lavalamp dark"> | ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0lcNJrb0v5tQpZN8EhQWR5tQmJIN2Ei4zluY0B5CX-ucRImF0p71Aa2WxtL12v8ylie-5JMbD4AQLEXnzHUZi2bjKCR8_uGU222vIxV8ndjy_JXK5gDgZVADlQnRMTysUYiVoVkW4Rs4/s1600/hb-menu-dark.png) |