Blogger için Statik Menü Navigasyon Sekmesi

Blogger kullanıcıları için, Css3 saf kodlama ile tasarlanmış, maus üzerine gelince farklı bir renk ile clone olarak açılan statik link v...

...

Blogger kullanıcıları için, Css3 saf kodlama ile tasarlanmış, maus üzerine gelince farklı bir renk ile clone olarak açılan statik link ve etiket kategorisi oluşturabileceğiniz sade hover renkli menü navigasyon çubuğu. Blog menü navigasyon sekmesini ben sade kullanmayı severim diyenler için oldukca kullanışlı bir eklenti. Css3 saf kodlama ile tasarlanmıştır yazılmasının anlamı ise kodlar içinde hiçbir Json veya Javascrip kodlarının kullanılmamış olmasıdır. Blog’unuz için statik sayfalar (hakkında, hakkımda, iletişim,) formatında kullanabileceğiniz gibi, etiketlerinizden oluşan birçok yazınıza bağlantı veren link formatı ile de kullanabilirsiniz.
Etiket link formatının nasıl olduğunu aşağıda verilen kalıptan inceleyin.

Örnek link : http://guney59.blogspot.com/search/label/Adsense

Örnek format : http://blogunuzunurlsi/search/label/etiketiniz

Menü sekmesinin görünümünü yukarıdaki resimden, canlı uygulamasını ise demo link’inden inceleyin. DEMO

Menü navigasyon sekmesinin kurulum uygulaması :

1. Blogger kumanda paneline giriş yapın.
2. Yerleşim → Gadget ekle → Html/JavaScript gadget’inizi açın ve aşağıdaki Html kodlarını ekleyin.

<nav id='rolling-nav'>
    <ul>
        <li><a href='http://guney4.blogspot.com' data-clone='Ana Sayfa'>Ana Sayfa</a></li>
        <li><a href='http://guney4.blogspot.com/p/hakknda.html' data-clone='Hakkında'>Hakkında</a></li>
        <li><a href='#' data-clone='İletİşİm'>İletİşİm</a></li>
        <li><a href='#' data-clone='Blogger'>Blogger</a></li>
        <li><a href='#' data-clone='Eklentİyİ Al'>Eklentİyİ Al</a></li>
    </ul>
</nav>

Html kodlarının Özelleştirilmesi :

1. Ana sayfa isminin solundaki URL’i kendi blog URL’niz ile değiştirin.
2. Dikkat ederseniz 2 ad. Ana sayfa ismi yazılıdır. Yukarıda yapılan açıklamada Clone diye isim kullandım. Yani kopyalanmış çift görünüm demektir. İlk isme ne yazacaksanız ikinci isminde aynısı olması gerekir. Bu şekilde kullanarak ilk görünüm renkli, üzerine maus yanaştırıldığında farklı bir renk yeni bir pencere açılacaktır.
3. # : bu işaretin olduğu yere bağlantı linkini ekleyeceksiniz. Bu statik bir bağlantı linki olabildiği gibi, bir etiket linkide olabilir. Etiket linki kullanırsanız, yazınıza bağlantı verdiğiniz  etiketiniz de topladığınız tüm yazılar tıklandığında blog sayfanızda sıralanarak açılır.
4. Yeni bir link eklemek istiyorsanız aşağıda verilen örnek gibi başlangıç ve bitiş kodlarını kopyalayın bir alt satıra yapıştırın ve isim ve link'i değiştirip kaydedin.
Örnek : Kopyalayıp yapıştıracağınız satır biçimi.

<li><a href='#' data-clone='Blogger'>Blogger</a></li>

5. Yukarıda verilen kodları yapılandırdı iseniz, şimdide aşağıdaki saf Css3 kodlarını blog'unuza ekleyin. İlgili adımları takip edin.
6. Blogger kumanda paneli → Şablon → Htm’yi düzenle ile aşağıdaki etiketi Ctrl+f klavye kısa yolu ile aratın.

]]></b:skin> 

7. Bulduğunuz bu etiketin hemen üstüne aşağıdaki kodları yapıştırın.

#rolling-nav {
  font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:white;
  text-transform:uppercase;
}

#rolling-nav ul {
  height:50px;
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}

#rolling-nav li {
  float:left;
  display:inline;
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

#rolling-nav a,
#rolling-nav a:before {
  display:block;
  margin:0px 0px;
  padding:0px 30px;
  line-height:50px;
  color:white;
  text-decoration:none;
  background-color:#900;
  background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  position:relative;
  /* CSS Transisi */
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

#rolling-nav a:before {
  content:attr(data-clone); /* Memuat data atribut */
  position:absolute;
  top:100%;
  left:0px;
  display:block;
  background-color:white;
  background-image:-webkit-linear-gradient(top, #ddd, white);
  background-image:-moz-linear-gradient(top, #ddd, white);
  background-image:-ms-linear-gradient(top, #ddd, white);
  background-image:-o-linear-gradient(top, #ddd, white);
  background-image:linear-gradient(top, #ddd, white);
  border-top:2px solid rgba(0,0,0,0.2);
  color:#333;
}

#rolling-nav a:hover {
  margin-top:-50px;
  margin-bottom:1px;
}

8. Tüm işleminiz bitmiş durumda blog’unuzu kaydedin ve yeni menü navigasyon sekmenizi kullanmanın tadını çıkarın.

Ayrıca ⇒ Menü Oluşturma ile ilgili diğer konulara da bakabilirsiniz.