Blogger da Renkli Tek Sıra Menü Nasıl Oluşturulur

Anasayfanıza eklediğiniz menünün görsellik açısından renkli olması durumunda okuyucuların daha fazla ilgisini çekecektir.Bu menüyü ilgi çekici hale getirmek için drop drown menü kullanacağınız gibi tek sıra halinde renkli olarak da kullanabilirsiniz.Eğer kategori sayınız az ise tek sıra halinde görüntülemeyi tercih edebilirsiniz.Bu yüzden size alternatif olması açısından fare ile üzerine gelindiğinde renklenen yatay menü nasıl oluşturulur onu paylaşacağım.Aşağıda paylaştığım kodları tamamen kendinize göre özelleştirebilirsiniz.Kodlarda ilgili yerleri değiştirdiğiniz takdirde arka plan rengi, fare ile üzerinde delince değişen renk gibi kısımları değiştirebilirsiniz.
Capture
Bu menüyü blogunuza eklemek isterseniz :
  • Blogger hesabınıza giriş yapın
  • Tasarım kısmına gelerek Yerleşimden Html/JavaScript ekle seçeneğini seçin.
  • Aşağıdaki kodları kopyalayın ve Html/Javascript kutusuna yapıştırın.
<style>
#wrapper {
margin:0px;
padding:0px;
width:100%
}
#menu {
margin:0px;
padding:0px;
width:960px;
}
#menu ul {
margin:0px;
padding:0px;
}
#menu li {
display:inline;
}
#menu a {
width:150px;
height:30px;
padding:10px 0px 0px 0px;
float:left;
display:block;
border-right:1px solid #666;
text-align:center;
text-decoration:none;
color:#000000;
font-weight:bold;
font-size:16px;
background-color: #CCC;
background-image: -moz-linear-gradient(#CCC, #999);
background-image: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#999));
background-image: -webkit-linear-gradient(#CCC, #999);
background-image: -o-linear-gradient(#CCC, #999);
background-image: -ms-linear-gradient(#CCC, #999);
background-image: linear-gradient(#CCC, #999);
text-shadow:1px 1px 1px #ccc;
}
#menu a:hover {
background-color: #CCC;
background-image: -moz-linear-gradient(#0066B3, #00477D);
background-image: -webkit-gradient(linear, left top, left bottom, from(#0066b3), to(#00477d));
background-image: -webkit-linear-gradient(#0066B3, #00477D);
background-image: -o-linear-gradient(#0066B3, #00477D);
background-image: -ms-linear-gradient(#0066B3, #00477D);
background-image: linear-gradient(#0066B3, #00477D);
color:#EEEEEE;
text-shadow:1px 2px 1px #000;
}
</style>
<div id="wrapper">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Hakkımda</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Kategoriler</a></li>
<li><a href="#">Reklam</a></li>
</ul>
</div>
</div>
Yukarıdaki kodları isteğinize göre düzenleyebilirsiniz.Genişliği ayarlayabilir ve fare ile üzerine gelindiğinde olması gereken renk kısmını belirleyebilirsiniz.Gerekli düzeltmeleri yaptıysanız kaydedip blogunuzu görüntüleyin.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

7 yorum:

  1. Sağolun işime ilerde yarayacak.

    YanıtlaSil
  2. hocam burdaki renkleri nasıl çevirebilirim x tam tersi olsun istiyorum ama başaramadım _
    görünen ana renk MAVİ - YAZISI BYZ - MAUS ÜSTÜNDEYKENDE GRİ - YAZI SİYAH.

    TEŞEKKÜRLER

    YanıtlaSil
    Yanıtlar
    1. background color daki renk kodlarını değiştirerek istediğiniz renkleri ayarlayabilirsiniz.Tavsiyem online html editor de renk kodlarını değiştirerek farkı görmeniz

      Sil
  3. Peki bu işlemi yaptıktan sonra ekledigimiz menulerin içerigini nasıl yazmamız gerekiyor? Tıklayınca yeni bir sayfada acılan baglantı olmasını istiyorum. Yardımcı olabilirmisiniz? Tesekkurler

    YanıtlaSil
    Yanıtlar
    1. En alt tarafta renkli olarak belirttiğim kısımları değiştirmeniz yeterli olacaktır.

      Sil
  4. menü çubuğundaki home,hakkımda,vs.başlıklarını sayfalara nasıl yönlendiriyoruz?
    butonları nasıl çalıştıracağız? konu yarım kalmış,bilen arkadaşlardan yardım rica olunur.

    YanıtlaSil
    Yanıtlar
    1. Yukarıda sarı renkle belirttim.Hemen href ile başlayan kodda linkinizi de ekliyorsunuz.

      Sil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.