Nasıl Yaptım?

Hepimiz blogda listelere ekleme yaptığımız için sayfanın html haline aşinayız diye düşünüyorum. Ancak bazı şeyler benim daha önce seçtiğim şablona (template) özel olabilir, ama benzerleri sizin şablolarda da vardır.

Sadece mevcut şablodaki bazı resimleri değiştirerek ve biraz da deneme yanılma ile bu değişiklikleri yaptım. Yaptığım değişiklikleri adım adım anlatayım.

• Template tab'ına gidelim.
• Blog'un template kodunu değiştirmeden önce burda yazılı olanları notepad'le kaydedelim.
• Herhangi bir hatalı değişikliğe önlem olarak sayfanın yedeğini almış olduk.
• Sayfadaki değişiklikleri adım adım yapalım. Eğer yaptımız değişiklik tamam ise o andaki şablon kodunun yedeğini bir başka dosyaya alalım ki, bir sonraki değişiklikte sorun olduğunda bir önceki şablona geri dönebilelim.
• Kod içinde .gif ifadesini aratalım.
• background: url(http://www.blogblog.com/tictac/tictac_orange.gif) no-repeat 0 6px; gibi satırlar göreceksiniz, başka bir browser açıp burdaki url içinde yazan linki kopyalayın ve böylece sayfadaki mevcut resimlerin kodun neresinde kullanıldığını keşfetmiş olacağız.
• Eğer hangi resmin ekranda nasıl kullanıldığını not etmek isterseniz /* ---( header and site name )--- */ gibi yorumlar ekleyebilirsiniz. /* yorum başlangıcı demek, */ de yorumun bitişi demektir.
• Koymak istediğim resimleri post yazarken kullandığımız 'Add Image' ile yükledim, 'Edit HTML' kısmına geçip resimlerin blogger'daki linklerini aldım.
• Resimler iki boyutta aktarılıyor, 320 ile gösteriliyor, üstüne tıklayınca 1600'le daha büyük halini gösterir.
• http://photos1.blogger.com/img/119/6255/1600/kalip.jpg
  http://photos1.blogger.com/img/119/6255/320/kalip.jpg
• Resmin büyüklüğü ayarlayıp yüklerseniz daha iyi olur. Daha önce mevcut resimlerimden denemiştim, ama olmamıştı. Banner için kullandığım resim üzerinde bir değişiklik yapmama gerek kalmadı. Arka plan için 320, banner için 1600 olanını kullandım.
• Sayfanın arka planı alttaki kodda, Body bölümünün özellikleri belirleniyor. Background (arka plan) yazan yerde daha önceden bir renk vardı, onu sildim, yerine url ile arka plan olacak resmin linkini yazdım.

/* ---( page defaults )--- */
body {

margin: 0; padding: 0; font-family: Verdana, sans-serif; font-size: small; text-align: center; color: #333;

background: url(http://photos1.blogger.com/blogger/6270/829/320/bbybg1c.gif) repeat top left; }

• Aşağıdaki kodda sağ kolonda (linklerin ve bilgileri olduğu kolon - sidebar) dalga şeklinde gri bir resim vardı, onun görüntülenmesini istemediğim için o satırları kapattım.

#sidebar {

margin: 0 41px 0 547px; padding: 20px 0 0 0; font-size: 85%; line-height: 1.4em; color: #999;

/* --- background: url(http://www.blogblog.com/tictac/sidebar_bg.gif) no-repeat 0 0 --- */; }

• Aşağıdaki kodda ise banner, yani sayfanın başlık resmini değiştirdim. Koyduğunuz resmin tekrarlanmasını istiyorsanız 'no-repeat' yerine 'repeat' yazabilirsiniz. Top, bottom ve left, right ile resmin konumunu değiştirebilirsiniz.
  

#blog-header {

margin: 0; padding: 0; font-family: "Lucida Grande", "Trebuchet MS";

background: #fff url(http://photos1.blogger.com/blogger/6270/829/1600/gradln1a1.gif) no-repeat bottom right; }

• #fff ise resmin konduğu zeminin rengini ifade eder. http://html-color-codes.com/ bu linkten renklerin kodunu bulabilirsiniz.
• Seçtiğim şabloda başlık resminin altında çubuk şeklinde bir resim daha vardı. Bunu ve başlıkta yazan İncik Boncuk yazısının rengini, büyüklüğünü ve konumunu bu koddan değiştiridim.
• Bu kod bloğu üstteki bloğun devamı şeklinde : /* ---( header and site name )--- */

#blog-header h1 {

margin: 0; padding: 35px 60px 45px 50px; font-size: 300%; color: #336600; text-shadow: #81A75B 2px 2px 2px;

background: url(http://photos1.blogger.com/blogger/6270/829/1600/h213.jpg) no-repeat bottom right; }

• 50px daha önceden 160'tı ve İncik Boncuk daha ortadaydı. Yazıyı sola çekmek için bu değeri düşürdüm.
• Font büyüklüğünü ve rengini işaretlediğim yerlede değiştirebilirsiniz.

Bu anlattıklarım umarım işinize yarar.

Sevgiler