Blogger şablonunu özelleştirmek ( Bölüm III )

Blog’umuzun genişliğini ve blog başlığının arka planını ayarladıktan  sonra şimdide blog’uğuma eklediğim Gadgetların bulunduğu bölüm olan kenar çubuğunu özelleştirmekle devam ediyorum. 

 

         Screenshot_10

 

Bloguğumun kaynak kodlarında  gadgetlarımın da adını belirleyen H2 etiketine sahip kodu bulduktan sonra bu bölümün arka planı olarak PNG formatında hazırladığım görseli kullanmayı düşünüyorum. Bunun içinde hazırladığım görseli  internette ücretsiz bir servise yükleyip linkini almam yeterli.

 

Yine Google’un ücretsiz bir servisi olan Picasa Web albümleri işimi fazlası ile görecektir.

Google hesabımla Picasa Web albümlerine giriş yaptıktan sonra, hazırladığım görseli bir kaç tıklama sayesinde kolayca yüklüyorum.

 

Görselimi yükledikten sonra linkini kopyalayıp şablonumdaki h2 etiketinin arka planı olarak bu görseli atıyorum.

background: url(http://arka plan olarak kullanmak istediğiniz görselin web adresi);

 

Kodlarda yaptığım değişikliklerde şöyle…

 

Önceki

Sonraki

h2 {

margin:1.5em 0 .75em;

font:normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color:#999999;

 

}

h2 {

background: url(http//h2-arkaplan.png);

margin:1em 0em 0em em;

font:normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color:#999999;

}

 

Bu işlemden sonra yine gadgetların geldiği bölüm olan  sidebar’ında beyaz olan arka planını değiştirmek için background:#F9F9F9; diye bir kod ekliyorum. Eklediğim bu kod gadgetların arka planın grinin açık bir tonunda görünmesini sağlayacaktır.

 

 

Önceki

Sonraki

.sidebar {

color: #666666;

line-height: 1.5em;

 

}

.sidebar {

background:#F9F9F9;

color: #666666;

line-height: 1.5em;

}

Farzedelim ki siz arka planın gri değil de kırmızı görünmesini istiyorsunuz bunun içinde  background:#F9F9F9; yerine background:#FF0000; yazarsanız istediğiniz bölümün arka planı kırmızı olarak gösterebilirsiniz.

Farklı renklerin kodlarını da buradaki http://www.colorpicker.com/ sitesinden bulabilirsiniz. 

 

Bu işlemden sonra blog’uğuma eklediğim yazıların yeniden eskiye doğru üst üste sıralandığı(post) bölümü özelleştirmekle devam ediyorum.

 

Bu bölümde yine yazı başlıklarının geldiği yer (H3) ve yazıların sonunda yer alan gönderen,zaman,yorum gibi bilgilerin yer aldığı yazılar hakkında bilgilerin bulunduğu post-footer bölümü için  köşeleri yuvarlatılmış birer görsel kullanacağım. 

 

İlk parçayı post bölümüne arka plan olarak atıyorum.

background: url(http://lh3.ggpht.com/_OAaYyqbZjJY/S-0If-AaIpI/AAAAAAAACfg/ZNux8lQxOvE/Screenshot_1_thumb2.png?imgmax=800) ;

 Screenshot_1

 

İkinci parçayı da post-footer bölümününe arka plan olarak atıyorum.

background: url(http://lh6.ggpht.com/_OAaYyqbZjJY/S-0Ig6cF-mI/AAAAAAAACfo/BhRS8EsU0pU/postfooterbg_thumb2.png?imgmax=800) ;

 post-footer-bg

 

Son olarak ta  başlıklarımın  ve post-footer arasında kalan yazılarımın geldiği bölüm olan post-body’nin arka planı olarak görsel kullana bilme imkanım bulunmasına rağmen  background:#F9F9F9; diye tanımlayarak  aynı işlemi  görsel kullanmadan halletmiş oluyorum. Ayrıca sağdan ve soldan 1px değerinde kenarlık kullanarak ta görsellerimle uyumlu hale getirmiş oluyorum.

Post bölümünün en alt kısmında bulunan 1px değerindeki bordürü de sildikten sonra yazılarım arasında yukarıdan ve aşağıdan boşluk vermek amacı ile margin:.5em 0 1.5em; etiketini  sadece aşağıdan 1em değerinde boşluk verecek şekilde ayarlıyorum.

 

Buradaki em de px gibi uzunluk ölçüsüdür.

 

Post bölümünün kodları üzerinde yaptığım tüm  değişiklikleri de aşağıda görebilirsiniz.

 

Önceki

Sonraki

.post {

margin:.5em 0 1.5em;

border-bottom:1px dotted #cccccc;

padding-bottom:1.5em;

}

 

.post h3 {

margin:.25em 0 0;

padding:0 0 4px;

font-size:140%;

font-weight:normal;

line-height:1.4em;

color:#cc6600;

}

 

.post-header-line-1{

margin:0 0;

padding:0px 5px 4px 48px;

font-size:80%;

font-weight:normal;

line-height:1.4em;

}

 

.post h3 a, .post h3 a:visited, .post h3 strong {

display:block;

text-decoration:none;

color:#cc6600;

font-weight:normal;

}

 

.post-body {

margin:0 0 .75em;

line-height:1.6em;

}

.post-footer {

margin: .75em 0;

color:#999999;

text-transform:uppercase;

letter-spacing:.1em;

font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;

line-height: 1.4em;

 

}

.post {

background: url(http://lh6.ggpht.com/_OAaYyqbZjJY/S-0Ig6cF-mI/AAAAAAAACfo/BhRS8EsU0pU/postfooterbg_thumb2.png?imgmax=800); margin:0 0 1em 0 ;

}

.post h3 {

margin:0 0;

padding: 4px 5px 0px 46px;

font-size:140%;

font-weight:normal;

line-height:1.4em;

color:#cc6600;

}

.post-header-line-1{

margin:0 0;

padding:0px 5px 4px 48px;

font-size:80%;

font-weight:normal;

line-height:1.4em;

}

.post h3 a, .post h3 a:visited, .post h3 strong {

border-bottom: 1px solid #000;

display:inline;

text-decoration:none;

color: #000;

font-weight:normal;

}

.post-body {

background:#F9F9F9;

border-right: 1px solid #e7e7e7;

border-left: 1px solid #e7e7e7;

padding:10px 5px 5px 10px;

margin:0 0 0;

line-height:1.6em;

}

.post-footer {

background: url(http://lh6.ggpht.com/_OAaYyqbZjJY/S-0Ig6cF-mI/AAAAAAAACfo/BhRS8EsU0pU/postfooterbg_thumb2.png?imgmax=800);

}

 

Bu değişiklikleri görebilmeniz için blog’umuzun ilk haline buradan bakabilirsiniz.Yukarıda bulunan işlemleri uyguladıktan sonra elde ettiğimiz sonuca da buradan bakabilirsiniz.

 

Blog’umuza ilk haline baktıktan sonra sizin de kolayca farkedeceğiniz gibi  blog’uğumuzun üst kısmında bulunan navbar da görünmüyor Blogger navbarın nasıl kaldırıldığını  buradaki ayrıntılı anlatımda görebilirsiniz.

 

Tayfun Bir blog’un içeriği elbette blog’u ayakta tutacak olan asıl öğedir ancak her şey tasarımla başlar. Siteniz veya blog’unuz kullanıcıya kolaylık sağlamayan bir tasarıma sahipse içeriğiniz ne kadar zengin olursa olsun ziyaretçileriniz alternatif bloglar’a yöneleceklerdir. Gözü yoran bir biriyle uyumsuz renklerle tasarlanmış bir blog kullanıcılarını pek mennun etmeyecektir.Bu hesaba katıp Tasarımlarda kullanabileceğiniz bir birleriyle uyumlu renk örneklerini görmek için Colorcombos sitesine bakabilirsiniz.

Bu konu ile ilgili diğer yazılar                                                                Şablon Tasarımı  ➜
Paylaş !

5 yorum:

  1. Slm kendi bloğuma güzel bir tasarım yapmak istedim ama yapamadım siz yaparmısınız?

    YanıtlaSil
  2. yılmaz usta her isteyene şablon yaptığımızı düşünün ... size mantıklı bir istek geliyormu

    YanıtlaSil
  3. Sitemize sponsor olun siz sitenin tasarımını yaparsınız bizde blogger modifiyenin reklamını yaparız ayrıca videoladada reklamınızı yaparızz..

    YanıtlaSil
  4. arkadşım kimseye özel şablon tasarlayacak vaktimiz yok,kusur bakma..

    YanıtlaSil
  5. Muhtemelen yanlış yere yazıyorum sorumu. Fakat çok uygun da bir yer bulamadım. Tayfun bey benim yapmak istediğim şey arka planı biraz daha özelleştirmek. Bütün sayfa için beyazdan maviye bir gradient yapmak istiyorum. Saatlerdir araştırdım , uğraştım. Fakat tüm sayfa için bunu yapabilen bir kod bulamadım. Yani yaptığım kodlar sadece üst kısımda açılış ekranında etkili oluyor. Aşağı scroll yaptıkça arka arkaya 3 tane gradient oluyor.Umarım sorum anlaşılmıştır...
    Eğer bunu yapmak mümkün değilse tam footer'ın üzerine resim eklemem mümkün mü ? Footer'ım body'den çok bağımsız gözüktüğünden böyle bir işleme gerek duyuyorum.

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz