6 Eylül 2009 Pazar

Blogger Arka Plan Değiştirme

Arkadaşlar gördüğünüz üzere blogun temasını değiştirdik,Arkaplan siyah olmuştu ama görüntü hiç hoşuma gitmedi o yüzden şuanki çizgili arkaplanı kullanmaya başladım,Blogger'in Arkaplanını değiştirene kadar internette gene bir çöplüğün karşısında odluğumu anlayamamıştım,Gene araştırmalarım bir sonuç vermedi. Herkes bilmediği,uygulamadığı,görmediği şeyleri yazmış çizmiş.

Tabii çok güzel kaynak olabilen siteler var,haklarını yemek gibi olmasın.

Öncelikle blogger arkaplanımı nerden buldum. Arkaplanımı bir site yardımıyla yaptım hemen o siteninde linkini burdan verelim.


Çizgili,renkli,Gradientli çok güzel arkaplan resimleri yapabilirsiniz. Yaptığınız arkaplanları Transparant ( Saydam ) .gif uzantısı veya arkaplan rengini seçerek .png olarak alabilirsiniz.
Burdan yaptığım arka planın linkini veriyorum,isteyenler kullanabilir.

Kendisi transparan oluyor,Bunu kullananlar Çizgilerin arasından mevcut arkaplanlarını veya rengini görecekler, görmek istemeyenler bunu kullanırken (birazdan anlatıcam) Birde #00000
Siyah rengini arkaplana boyarlarsa benim arkaplanım gibi bir görüntü elde edecekler.
Peki neden .png kullanıp hiç transparan olaylarına girmemeyi denemedik?

Çünkü png dosyasında yaklaşık 2 kat daha fazla renk olacak,Dolayısıyla kullanıcılar siteyi açarken çok udakta olsa bir zaman kaybı yaşayacaklar. Ama tarayıcının #00000 (siyah)
rengini algılayıp sitenin arkasını doldurması daha kısa sürecek.

Peki,Arkaplanımızı yaptık. Arkaplan sadece ufak bir karedir,Verdiğimiz komutlarla sürekli tekrar etmesini söyleyecez.

Şablonumuzun HTML Düzenle kısmına girdikten sonra Ctrl + F Tuşlarına basıyoruz. Çıkan alana
body { yazıyoruz. 1 tane sonuç çıkması lazım. Bu demektir ki,burdan sonra sitenin css ile ilgili olması gereken ayarlar bulunuyor.

Background: Seçeneğine kadar geliyoruz. Arkaplanınızda zaten resim varsa,kod bunun gibi birşey olabilir.

top:18px;height:13px;background:url(http://img407.imageshack.us/img407/6300/36264510000001000000dde.gif) #00000 ; repeat left; 
Baştaki top:18px;height:13px kodu bizi ilgileendirmiyor. Sonra başlıyor tarayıcıya arkaplanın neye benzeyeceğini anlatmaya.1. Adım > Arkaplana koncak resim şu url de bulunuyor. Kod[url(http://img407.imageshack.us/img407/6300/36264510000001000000dde.gif) ]
2. adım > Bu adım opsiyoneldir. Background için kullanacağınız resim transparant değilse ve resmi tekrar etme kullanıyorsanız buraya hangi renk kodunu girerseniz girin sizin için fark etmeyecektir. 3. Adım > repeat left; Soldan başlayarak tüm tarayıcıyı dolduracak kadar resim göster. Sağdan da başlayabilirsiniz. Resmi tekrar etmek istemiyorsanız, no-repeat; yazmanız gerekli.

4. Adım. Bu kodlardan sonra bir alt satıra geçip }yazıyoruz.
Bundan sonraki ayarı benim gibi bir arkaplan veya verdiğim siteden bir arkaplan yapmak isteyenler bu haliyle bıraksın. Eğer siz tam bir resim kullanıyorsanız,Rpeat kullanmıyorsanız
Bu ayarı Scroll olarak değiştirmelisiniz. Bu şekilde arkaplan Scroll kaydırıldığında
ekranı takip ederek aşağı inmeyecek. Fix yaparsanız (yani öyle bırakırsanız)
Scroll kaydırılarak sayfanın altına inildiğinde resim takip eder.(Bizim kullandığımız sistemde arkaplanın scrolu takip ettiği belli olmaz.)

ve kodumuzun son hali.
background:url(http://img407.imageshack.us/img407/6300/36264510000001000000dde.gif)#00000 ; repeat left;
}
/* background-attachment: scroll; */

0 yorum:

  ©Web Teknolojileri Blogunda Yayımlanan Tüm yazılar Creative Commons Lisans Haklarıyla korunmaktadır. Kaynak Gösterilmek şartıyla kullanılabilir.

Creative Commons License