English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
Yazılarımız Hakkında Yorum Yazmayı Unutmayın:)!!!

7 Eylül 2012 Cuma

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.Blogger Navigasyonlu yatay menüyü blogunuza eklemek için;

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">

12 yorum:

ekleme yaptığımız sırada bu linkler çalışmıyor neden acaba

Ekleme yaptığımız sırada derken ne demek istediğinizi anlayamadım,kusura bakmayın,dha açık yazarsanız size cevap verebilirim.

merhaba bu paneldekı sayfaları yonetıp yazı yazıldıgı zaman ana sayfadakı gıbı baslık bolumu cıkmadıgından yazılar bırbırınden ayrılmıyorlar hepsı alt alta sıralanıyorlar baslık kullanarak yada baska bır sekılde yatay cubuktakı bolumlere yazı nasıl yazabılırım cok tskr ederm

neden cevaplanılmıyo sureklı yenılenen bı sıte degılmı bu!:/

sorunuz bu eklenti ile ilgilimi, yoksa ayrı bir şey mi soruyorsunuz,tam olarak anlayamadım?

 
Karakter sayısını azaltmayı deneyin,yani bir satıra sığacak kadar kelime yazın uzun yazarsanız alta geçecektir.

Kopyaladığımız yerdeki kodları silerek mi yapıştıracağız bu kodları?

Teşekkürler .. Kodlar çalışmakta (:

]]> yazını cıkmıyor ne yapacağım ?

]]> yazısı cıkmıyor ne yapmalıyım

Yorum Gönder

................................Reklam...............................

 

BlogMimarını Facebookta Takibedin

Bu Siteye Katılın

Blog Mimarını Twitterda Takibedin