Bu yazıda maddeler halinde;
* Blogger Arka Plan Rengi Değiştirme,
* Blogger Arka Plan Resim Ekle
* Resim Döşeme
* Resim Sabitleme veya Kaydırma
* Resim Konumlandırma
* Aynı Anda Resim ve Renk Kullanımı
gibi konulara dikkat çekilmiştir.
Blogger standart temasını kullanıyorsanız temanızın arka plan rengini değiştirmek çok basit bir işlem. Sadece Yerleşim > Yazı Tipleri ve Renkler yolunu izleyerek istenen kısmın rengi değiştirilir. Ancak standart temalardan farklı olarak tasarlanmış tema kullanıyorsanız;
Temanızda alttaki kodu bulun;
body {background:$bgcolor;margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Yukarıdaki kod temanıza göre farklılık gösterebilir önemli olan body kısmını bulmak ve body kısmı içerisindeki arka plan rengini belirleyen kısmı düzenlemektir. Yukarıdaki kodda arkaplan olarak bir renk kodu atanmıştır.
Arka plan rengini değiştirmek isteniyorsanız background kısmından sonra herhangi bir renk kodu yazılabileceği gibi arka plan olarak resim kullanılmak isteniyorsa kullanılmak istenen resmin url adresi yazılır. Örnek olarak altta her iki durum içinde örnek verilmiştir. Bu örnekleri, Test Blogu Oluşturun ve öncelikle o blogda uygulayın.
Arka Plan Rengini Değiştirmek
Alttaki kodda görüleceği gibi kodda sadece arka plan rengini değiştirdim. Tabi arka plan rengine uygun bir yazı rengi seçmeyi unutmayın. Bunun için color kısmını yanına istenen rengin kodunu yazabilirsiniz.
body {
background:#cc0000;
margin:0;color:$textcolor;font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Arka Plan Olarak Resim Kullanma
Blogger arka plan rengi nasıl değiştirilirin cevabı kadar basit bir cevap daha. Düzenlenmek istenen blogger blogun arka plan rengi olarak kullanılacak olan resim önce yükleyici sitelerden birine yüklenir ve resmin adresi not edilir. Ardından altta renkli kısım ile değiştirilir. Ardından düzenlenen kod temada var olan kod ile değiştirilir. Hepsi bu kadar.
body {
background:url("http://RESIM-LINKI.png");
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Arka Plan Olarak Resim Kullanma Yöntemleri
Esas Arka Plan Olarak Resim Kullanma Yöntemleri yazının en önemli kısmıdır. Genel olarak çok önemli olmasa da okumuş olduğunuz yazının en önemli kısmındasınız.1. Arka Plan Resim Döşeme Seçenekleri
Kullanılacak olan resim farklı döşeme seçenekleri ile şablona yayılabilir. Resim şablonda, ister tüm sayfaya yayılarak ister yatay ya da dikey olarak tek bir düzlem doğrultusunda kullanılır.
1.1. Resimi Tüm Sayfada Görüntüleme - Döşeme
Blogger temanıza eklenen resim değişik pozisyonlarda blogunuza yerleştirilebilir. İlk resim ekleme örneğindeki koddaki gibi bir arka plan resim ekleme yöntemi kullanılırsa; resim, blogunuzun sol üst köşesinden görüntülenmeye başlar ve resmin boyutu ne ise o kadarlık bir alanda görünütlenir. Resim yüksekliğinin ya da genişliğinin yetersiz kaldığı yerde resim tekrar devreye girer ve ikinci kez görüntülenmeye başlar. Bu sitede görsel açıdan istenmeyen bir durum oluşturur. Ancak bu yöntemin avantajı şudur; kullanılan arka plan resmi küçük bir resim ise bol tekrar ile sanki tema içine döşenmiş gibi olacaktır. Ve ufak kare resim tüm sayfayı kaplayacak ve tek bir arka plan resmi gibi görüntülenecektir.
body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9x0flcbZA4NqLWRUiDHE5SmCq16kgBS3v16Y3DBxhezvJGSp-AMT6c8RDINi9nzudV2W769z3_EzjCvzT-CiA2QRngJeXj1V0D8VYHlD4AJbEfpOB7zcXeEiqzNGH4cIioCNrQdBKP1k/s1600-h/desen-2.png);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Bu tarz bir kullanım için en uygun resim şekli kare ya da dikdörtgendir. Resim linki yerine istediğiniz desenlere sahip resmi kullanabilirsiniz. Kullanmak istedğiniz resmi yükleyeci sitelerden birine yükleyin ve adresini yukarıdaki kodda kırmızı ile renklendirilmiş olan kısma yapıştırın. Temanıza ekleyin ve ön izleme yapın. 1.2. Blogger Arka Plan Resmini Sadece Dikey Düzlemde Tekrarlama - Döşeme
Kullanılacak olan resmi sadece dikey düzlemde görüntüleyebiliriz. Bunun için yapılması gereken temaya arka plan resmi olarak eklenen resim kodunun sonuna, resmin tekrar edilmesi istenen düzlem belirtilmelidir.
body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9x0flcbZA4NqLWRUiDHE5SmCq16kgBS3v16Y3DBxhezvJGSp-AMT6c8RDINi9nzudV2W769z3_EzjCvzT-CiA2QRngJeXj1V0D8VYHlD4AJbEfpOB7zcXeEiqzNGH4cIioCNrQdBKP1k/s1600-h/desen-2.png) repeat-y;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Yukarıdaki örnek kodda diğerlerinden farklı olarak arka plan resmi dikey düzelemde tekrar etsin komutu verilmiştir. (repeat-y)1.3. Blogger Arka Plan Resmini Sadece Yatay Düzlemde Tekrarlama - Döşeme
Dikey düzlemde tekrar ettirilen arka plan resminde olduğu gibi, resim eğer yatay düzlemde tekrar ettirilmek isteniyorsa arka plan resmi olarak kullanılmak üzere temaya eklenmiş olan resim kodunun sonuna düzlemi belirtilmelidir. Sadece, dikey düzlem (y) yerine yatay düzlem (x) ifadesi değiştirilir.
Arka plan resmini tekrarsız kullanım, yatay tekrar ve dikey tekrar kullanımları ile örnekledik. Bu örnek ile yanda gördüğünüz resim sayfanızın en üstünde bir arka plan resmi gibi şablonunuzun boyutuna uygun hale gelerek görüntülenecek. Ayrıca arka plan resmi olarak büyük boyutlu bir resim kullanılmak istenirse no-repeat kodunu kullanabilir.
body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaRc4mTWlTIw9jE6ARs8d4j30VxbmUxSNfi2Z2bcfD2Xh7y-_RI8APCJ_IkdIvC0EIBTJAGNIE6YTYAwfCFqYjC2YQh0bLZKLaCmsLgpOZmvSbDlFZjCSIAdEOvnqpkJ2rqkNZHjlheks/s320/fading_background_21.png) repeat-x;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
2. Blogger Arka Plan Resmi Sabitleme veya Kaydırma
Arka plan resimleri sayfa içerisinde dikey doğrultuda fare ile hareket edildiğinde sabit ya da hareketli gibi görüntülenebilir. Öncelikle bu özellikten bahsedelim. Eğer bir artalan resmi belirtilmişse bu nitelikle resmin görüntü alanına göre sabit mi (fixed) yoksa kaydırılabilir mi (scroll) olacağı belirtilir.
body {
background:url(http://www.w3schools.com/css/img_tree.png) no-repeat;
background-attachment:fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
3. Blogger Arka Plan Resmini Konumlandırma
İstenilen arka plan resmi bir konuma sabitlenebilir. Resim sadece belli bir bölümde yer alabileceği gibi temanızın genişliği ve yüksekliği ile paralel olup tüm arka planınıza da konumlandırılabilir. Bu kısımda resmin boyutu devreye girer. Eğer resim boyutu küçük ise belli bir bölgeye konumlandırılmalıdır. Eğer resim boyutları büyük ise tüm arka planda gösterilecek şekilde olması mantıklıdır. Ayrıca görsel açıdan daha kullanışlıdır. Tamamen, keyfinize kalmış bir durum, Keyfinize göre istediğnizi yapabilirsiniz.
Hiçbir düzenleme yapılmadığında arka plan resmi sayfanızın sağ üst köşesinde görüntülenecektir. Bu tabiki sizin resmi tekralamanız ya da tek resim olarak kullanmanıza göre değişir. Bununla beraber tek kullanılan bir resmi blogunuzda istediğiniz yere konumlandırabilirsiniz.
background:url(http://www.w3schools.com/css/img_tree.png) konum-kodları no-repeat;
yukarıdaki kodda konum kodları yazan yere alttaki sıralanmış konumlardan istediğinizi yazabilirsiniz. Böylece, resim sadece sizin istediğiniz yerde konumlanacak.
* top left : sol üst
* top center : orta üst
* top right : sağ üst
* center left : orta sol
* center center : sayfanın tam ortası ( merkez )
* center right : orta sağ
* bottom left : sol alt
* bottom center : orta alt
* bottom right : sağ alt
Tabiki bu uygulamaların farklı browser kullanımlarında değişiklik gösterebileceğini unutmamak gerekir. Siz kullandığınız ekran çözünürlüğü ve web tarayıcınız ile sitenizi çok güzel görüntülerken, farklı web tarayıcıları kullanan ziyaretçileriniz bazı sorunlar ile karşılaşabilir. Bunu aşmak için; Sayfa Görünümünü Test Edin
4. Blogger Arka Planında Resim ve Renk Kullanımı
Yukarıda hem renk değiştirme hem de resim ekleme konularına değinildi. Her ikisinin de aynı anda kullanılacağına dair örnekle konuyu bitirelim.
background: #cc0000 url(http://www.w3schools.com/css/img_tree.png) bottom right no-repeat;Bu örnekler sadece temanın arka plan resmi olarak düşünülmemeli, başlık alanı, sütunlar, sayfa altlığı alanlarında da benzer uygulamarı kullanabilirsiniz.
Umarım temel bilgi niteliğindeki bu konu, blogger blog düzenlemerinizde faydalı bir kaynak olarak arşivinizde yerini alır.
Kolay Gelsin...
takipteyiz.blogspot
Hiç yorum yok:
Yorum Gönder