Menu

Kullanışlı Yeşil Navigasyon Menü

Blogger Navigation Menüler ile site ziyaretçileriniz site kategorilerinize rahat bir şekilde ulaşabilirler.SEO açısından oldukça önemli olan site ziyeretçilerinin sitede kalma süresi bu gibi eklentilerle oldukça etkili olmaktadır.

Kullanışlı Yeşil Navigasyon Menü

---İnternetten Para Kazanmada Bütün Önemli Yöntemler

---Blogger Makale Seçenekleri Özelliği Ayarları

Blogger CSS Kodları ile oluşturulan aşağıdaki Blogger Yeşil Navigasyon Menü sade ve şık bir şekilde tasarlanmıştır.
Kullanışlı Yeşil Navigasyon Menü

Blogger Yeşil Navigasyon Menü 

Bu çok şık css olarak hazırlanmış menü kodunu kullana bilmeniz için html editörünü açıp ]]></b:skin> kodunu arattırıp hemen üstüne aşağıdaki kodu yapıştırınız.

---Yorumlarda SEO Nasıl Yapılır

---CSS3 İle Blogger Etiketlerini Düzenleme

Blogger Navigasyon Menü CSS Kodu:

/* Menu seo mektebi */
#seomektebi ul,
#seomektebi ul li,
#seomektebi ul li a {
  padding: 0;
  margin: 0;
  line-height: 1;
  font-family: 'Capriola', sans-serif;
}
#seomektebi:before,
#seomektebi:after,
#seomektebi > ul:before,
#seomektebi > ul:after {
  content: '';
  display: table;
}
#seomektebi:after,
#seomektebi > ul:after {
  clear: both;
}
#seomektebi {
  zoom: 1;
  height: 69px;
  background: url(https://lh4.googleusercontent.com/-lWpMiV8cH3I/U3yL33IbaRI/AAAAAAAAJdA/3gNhQ0ivPYY/s69-no/ye%25C5%259Fil+men%25C3%25BC+seo+mektebi+1.PNG) repeat-x center bottom;
  border-radius: 2px;
  width: auto;
}
#seomektebi ul {
  background: url(https://lh5.googleusercontent.com/-aEQ5qtHZr-g/U3yL34TLfGI/AAAAAAAAJdE/GiO8m3OIHJc/s59-no/ye%25C5%259Fil+men%25C3%25BC+seo+mektebi+2.png) repeat-x 0px 4px;
  height: 69px;
}
#seomektebi ul li {
  float: left;
  list-style: none;
}
#seomektebi ul li a {
  display: block;
  height: 37px;
  padding: 22px 30px 0;
  margin: 4px 2px 0;
  border-radius: 2px 2px 0 0;
  text-decoration: none;
  font-size: 15px;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  font-weight: 400;
  opacity: .9;
}
#seomektebi ul li:first-child a {
  margin: 4px 2px 0 0;
}
#seomektebi ul li a:hover,
#seomektebi ul li.active a {
  background: url(https://lh4.googleusercontent.com/-lWpMiV8cH3I/U3yL33IbaRI/AAAAAAAAJdA/3gNhQ0ivPYY/s69-no/ye%25C5%259Fil+men%25C3%25BC+seo+mektebi+1.PNG) center bottom;
  display: block;
  height: 37px;
  margin-top: 0px;
  padding-top: 26px;
  color: #004f7c;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
  opacity: 1;
}


Son olarak aşağıdaki kırmızı olan kodu kopyalayıp kodlarınızın içinde arama yapınız bulduğunuz bu kodun hemen üstüne aşağıdaki kodu yapıştırınız.

<div id='content-wrapper'> üstüne aşağıdaki kodu yapıştırınız.

<div id='seomektebi'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>


Kullanışlı Yeşil Navigasyon Menü  Düzenleme:

Yayınladığımız bu eklentiler içinde ki renk kodları #XXXX şeklinde olan kodlardır bunları aşağıdaki SEO
Mektebi renk kodları sayfasından istediğiniz renkleri seçerek ekleyebilirsiniz.



Ayrıca eklentiler içindeki sayısal değerlerle oynayarak site tasarımına uygun olan ölçüleri sağlayabilirsiniz.

Sonraki Yazılar
« Prev Post
Önceki Yazılar
Next Post »

Henüz Yorum Yapılmamış " Kullanışlı Yeşil Navigasyon Menü "

Önerilen Yazı
×