Sayfa Başlık Üstüne Yatay Rainbow Resim Ekle

Birçok sitenin başlık üst kısmında gördüğünüz muhtelif resimler gibi, blog üst alan olarak bilinen header başlığınıza Css kod yardımı ile gökkuşağı, Rainbow eklentisini kurarak blog görünümünüzü 2015 yılı için yenileyin. Rainbow,  gökkuşağı eklentisi, Google ve birçok geliştiricilerin site başlık header ve alt widget alanı footer kısmında gördüğünüz mavi, turuncu, renklerden oluşmaktadır.  Css kodlarını blog’unuza ekledikten sonraki görüntüsünü Adnan Güney klasik blog’umdan  inceleyebilirsiniz.

Sayfa başlık üstüne yatay Rainbow resim ekleme açıklamaları :

1. Blogger’un varsayılan şablonlarında bulunan Navbar gadget’ini kapatma seçenekleri ile kapasanız dahi başlık kısmında yaklaşık 90 px. yüksekliğinde bir boşluk oluşacaktır. Bu kadar büyük bir boşluk blog görünümünüzü güzel göstermeyeceği kesindir. Peki ne yapabiliriz ?
2. Önce blog’unuzdaki Navbar gadget’ini kaldırmanız gerekir. Blogger Navbar’ın kaldırılması ile ilgili anlatımları aşağıda verilen linklerden okuyarak diğer kurulum aşamalarına geçin.

Blogger Navbar’ı kaldırma ile İlgili konu başlık linkleri :

Blogger varsayılan Navbar’ın nasıl kaldırılacağı hakkında açıklama ve videoları inceleyin. Ancak her ihitimale karşı Blog’unuzun yedeğini alın. Blogger şablon’u nasıl yedek alınır.

Navbar’ı kaldırıldıktan sonraki yatay boşluğun düzenlenmesi :

Blogger varsayılan Navbar’ı kaldırdıktan sonra blog tema ana sayfanızda yaklaşık 30 px. yüksekliğinde görülen yatay boşluk alanını isteğinize göre düzenleyeceğiniz anlatım linki.
3. Yukarıda anlatılan işlemleri bitirdi iseniz, başlık üstüne koyacağınız gökkuşağı resimli Css kodların blog’unuza eklenmesi ile ilgili adımlar.
Blogger kumanda panelinize giriş yapın.
→ Şablon kodlarınızı açın ve aşağıdaki Css etiketini bulun. CSS kodları nerededir ? İnceleyin.
→ Şablon içinde CTRL + F klavye kısa yolu ile arama yaptırabilirsiniz.
]]></b:skin>
→ Bulduğunuz bu kodun hemen üstüne aşağıdaki CSS kodlarını ekleyin.
body:before {
   content: "";
   position: fixed;
   top: 1px;
   left: 0;
   width: 100%;
background: url('http://2.bp.blogspot.com/-4WX5IprRmS4/VHiuf-MtKcI/AAAAAAAAcTY/Y-_pL3vmdOk/s1600/rainbow.png') repeat-x;  
height: 3px;
z-index: 100;   
}

CSS kod açıklamaları :

1. top : Eklenen resimin en üst boşluk ayarıdır. Top 3 px. yaparsanız en üst ile resim arasında 3 px. yüksekliğinde boşluk ekler.
2. background: Blog başlığına eklediğiniz resim Url’sinin yanındaki linki masa üstüne indirip, blog editörünüze tasalak olarak kaydedin.Html modun da iken en üst kısımdaki linki kopyalayın ve kod içindeki link ile değiştirin.
Blog linkleri her kullanıcının kendi hesabına kayıtlıdır. farklı kullanıcı resim linkleri ileride silindiğinde sizin de blogunuzdan silinir. Kendinize ait bir resim link’i blogunuzu daha hızı açar.
3. height 3px : CSS kodlarındaki resim link yüksekliğidir. Resim 3 px. olarak düzenlendiğinden bu ayarı değiştirmenize gerek yoktur. Ancak farklı bir resim kullanıyor iseniz bu ayarı istediğiniz gibi düzenleyebilirsiniz. Farklı uygulamalarda buluşmak üzere.