09 Mart 2010

Temanızda illaki bazı değişiklikler, düzenlemler yapmışsınızıdır. Farklı renkler denemişsinizdir. Kendi adıma, çoğu zaman renk değiştirmenin faydası olduğunu söyleyebilirim. Blogger da tema değişiklikleri ve düzenlemeleri ile vakit harcamayı seviyorsanız, bu konu hakkında bilginiz vardır. Blogger Arka Plan Rengi Değiştir, Düzenle, Resim Ekle konusunun daha çok yeni başlayanlar için faydalı olacağını düşünüyorum. Blogger da arka plan olarak resim ekleme konusu da özellikle ilginizi çekebilir. 

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(http://2.bp.blogspot.com/_EM-O0UnGqZk/S5YVn-NwdlI/AAAAAAAABbs/Szs6A3fXLDM/s1600-h/desen-2.png);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

blogger-desenBu 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(http://2.bp.blogspot.com/_EM-O0UnGqZk/S5YVn-NwdlI/AAAAAAAABbs/Szs6A3fXLDM/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(http://1.bp.blogspot.com/_EM-O0UnGqZk/S5Yk2wpcukI/AAAAAAAABb4/Av4QEi8w8TQ/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...
Yorum
SirEvo dedi ki...
Ellerine sağlık abi, yine faydalı bir dökümana imza atmışsın...
Sade dedi ki...
Beğenmene sevindim.
SirEvo dedi ki...
Bunu beğendim ama diğer olay gelince bunun havası söndü :D
Sade dedi ki...
:) 'pabuça dama atıldı' sözü bu durumda iyi gider :)
SirEvo dedi ki...
Aynen. Bir de benim "resimlerin doğru düzgün görüntülenememe" problemi vardı hatırlarsan. :D
Gerçi şu yeni olay onu çözmüş gibi duruyor ama bendeki eklenti sayısının bir hayli fazla olmasından dolayı o yeni olayı kullanır mıyım bilemiyorum. Ah bir çözebilseydim şu problemi... :(
Sade dedi ki...
Resimlerinde nasıl bir sorun var? Hatırlayamadım.
SirEvo dedi ki...
Feysten konuşmuştuk hani :) 2 tane resim eklediğimde yan yana gelmek yerine alt alta çıkıyordu...
Sade dedi ki...
Tamam hatırladım ama o herkeste olan bir durum. şimdi hangi temaya göre anlatacağız bu işi :D
SirEvo dedi ki...
jquery'li bir eklenti ile halledilir demiştin.

Herkeste olan bir problem değil yav. Dediğim şekilde resim paylaşabilen onlarca bloga denk geldim ben :))
Adsız dedi ki...
Ben arkaplan resmimin sayfanın arkasında tekrar etmesini istiyorum.Ancak sadece sizin belirttiğiniz üzere x-y düzleminde döşeyebiliyorum.Sayfaya yaymak için ne yapmalıyım?
enes dedi ki...
Blogspotta sidebarın yani sağ tarafın arkaplanını değiştirmek istiyorum konuların bulunduğu renkle aynı renk yapıp aradaki köprüyü kaldırarak birleştrmek istiyorum yardımcı olurmusn enes_gundogdu@hotmail.com yardımcı olmak için bu adresi eklersen sevinirim.
Kukla'nın blogu dedi ki...
çok güzel teşekkürler:)
http://makyajlblog.blogspot.com/
sudamlası dedi ki...
bloguma arkaplan resmi eklemiştim çok önce şimdi lighbox eklemek için normal kendi temalarına geçmiştim yeniden kendim arkaplan ekleyemiyorum elimde kodda var nedense olmuyo hatırladığım kadariyle kalasik bi tema seçmiştim hangisi olduğunu hatırlayamadım yardım edermisiniz elimdeki kod bu

*/

body {
background-image: url(http://s1.directupload.net/images/110729/dbmpxx7z.jpg);
background-position: top;
background-repeat: repeat;
background-attachment: fixed;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}



birde arkaplan resmi ekledikten sonra lighbox eklentisini nasıl eklerim yada ekleyebilirmiyim...
Add PVP dedi ki...
Blog sayfamı sizin bilgileriniz sayesinde geliştirmeye devam ediyorum. Teşekkürler : )
Editör dedi ki...
Kardeş ben bunu yaptımda sitemin arkaplanı değişti ama Yeni yazdığım kayıtlarda arkpalan beyaz gözüküyor çok uyumsuz ve çirkin oluyor bir bakrmısın mesela anasyafa yeni yaptığım renkken iletiim sayfasına girdiğimde beyaz ve kendi yaptığım rekn karışıyor nasıl düzletebilirm sitem:

http://videodelisi.blogspot.com
servis dedi ki...
Paylaştığınız bu bilgiler gayet seviyeli ve hoş bilgiler . Saç ekme olarak sizi takip eder paylaşımlarınızın devamını bekleriz .
filimci dedi ki...
ben tema ekledım lakın rengı sıyah baslıkları degıstırmek ıstıyorum sadece hocam duzenleme için ornek yol gosterebılırmısınız tesekurler

http://izleburadan.blogspot.com/
servis dedi ki...
Tek kelimeyler mükemmel bir siteniz var, teşekkür ederim. Çavdar Güvenlik olarak kaliteli hizmet sunmaktayız.
Mt2 Online - ByGreat dedi ki...
Teşekkürler.
Servis dedi ki...
Paylaşımlarınız bize de çok yardımcı oluyor, dell dizüstü teknik servisi olarak paylaşımlarınızın devamlılığını dileriz.
hayatdevamediyorizle dedi ki...
bi sorum olucakti benim sitem. www.20dakikadizisi.org


bu sitedeki gibi chrome://newtabhttp//www.startv.com.tr/dizi/20-dakika


sağ sütuna star tv deki gibi tuba büyüküstünün reismini sağ boş sütuna ise diğer adamın resmini koymak istiyorum .. nasıl yapabilirim html kodlarndan ?
hayatdevamediyorizle dedi ki...
kurcaladım biraz buldum fakat tuba büyüküstün ve ilker aksum yazıları çok üstte kaldı az okunuyor onu çok az aşağı nasıl kaydırabilirim
hayatdevamediyorizle dedi ki...
cevap yok hala sizden
hayatdevamediyorizle dedi ki...
bloğunuza msj attim 2 gündür cvp alamadim :S
hayatdevamediyorizle dedi ki...
ne biçim bloggercisin sen ya bi cevap wermekten bu kadarmi acizsin.
Adsız dedi ki...
Harika bir çalışma çok teşekkürler paylaştığın için. Benim yapmak istediğim bir husus var ama bir türlü yapamıyorum. Arka planı değiştirebiliyoruz ama blog sayfamdaki yazılar bir çerçevenin içinde o çerçevenin yani belki de sutun demek lazım arka planını nasıl değiştirebilirim. Senin dediklerini yapınca çerçevenin dışında kalan arka plan değişiyor sadece :( Yardımcı olabilir misin acaba? Çok teşekkürler.
Yükleniyor...