Blog İpucu 1: Sidebar Düzenleme

Merhaba, bugün sizlere ilk blog ipucumu vereceğim :) Her ne kadar kendimde yeni bir blogger olsam da bazı şeyler araştırmayla oluyor. Bugünkü ipucumuz başlıkta da gördüğünüz gibi kenar başlıklarını (sidebar) şekillendirme ve daha güzel bir şekle sokma. Kenar başlığı dediğim hani şu bloglardaki gadgetlar var ya en basitinden popüler yayınlar,  genellikle blogların sağ kenarlarında bulunurlar. İşte o gadgetları düzenlerken başlık yazarız. Bugün o başlıkları düzenlemeyi öğreneceğiz. Eğer hazırsanız hemen başlayalım :)

Blogumun görselli sidebar eklenmeden önceki hali şöyle:

Sidebar görseli eklendikten sonraki hali de bu:

Bu değişikliği yapmak için öncelikle blogumuza uygun bir sidebar görseli bulmamız gerekiyor. Benim blog temam kuşlar üzerine olduğu için ben de kuşlu bir sidebar görseli buldum kendim için.

Siz de kendi temanıza uygun bir sidebar görseli bulup onu 220x60 civarlarında bir boyuta dönüştürün. Bu boyutu kendi sidebarınıza göre değiştirebilirsiniz. Resmimizi ayarladığımıza göre sırada sidebarı yerleştirmek var.

Önce Bloggerınıza giriş yapın. Ardından Şablon kısmını açıp Özelleştir'i tıklayın. Şimdi de Gelişmiş kısmına tıklayın. Sonra da Gelişmiş'teki CSS kısmına tıklayın. Şimdi bu kısma aşağıda vereceğim kodu düzenleyerek ekleyelim. Bu kodla hem hazırladığımız resmi yerleştirmiş olacağız hem de 

.sidebar h2 {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG0OumrPQ70TMGAMnSrfluZR2ZdDoCW7s62PfPycuDbJFmCbOFgHE817UzJOvl9zwj9GYsEuCsKP7-zdOxuiYEWzrBK-BuQZ2t4_sFhIHIO8SJVLNafc-nADxgGsFpW8x_gvocUe1Wcfpl/s1600/birds-on-wire-2.png); /*Metnin arkasındaki resmin urlsi*/
background-position: top center;  /*Metnin arkasındaki resmi ortalar*/
background-repeat: no-repeat; 
height: 53px; /* Arkadaki resmin px  değerindeki boyutu */
color:#000000; /*Kenar başlığının rengi*/
font-size: 18px;    /* Kenar başlığının boyutu*/
text-align: center;   /* Başlığı ortalar*/
text-transform: uppercase; /* Bu isteğe bağlıdır. Başlıktaki tüm harfleri büyük yapar. Eğer küçük harf isterseniz "uppercase" yerine "lowercase" yazın */
}

NOT: /*.........................................../  bu şekilde yazılmış Türkçe metinleri koddan kodu kaydetmeden önce silin.

NOT 2: Kırmızı yazdığım yere kendi sidebar görselimin adres linkini yapıştırdım. Siz de kendi resminizin linkini oraya yapıştırın. Eğer resminizi kendiniz yaptıysanız ve linki de haliyle yoksa resminizi Hızlı Resim adlı siteye iki saniyede yükleyebilirsiniz.

NOT 3: Bu düzenlemeyi yaparken şu blogdan yardım aldım. Ne derler bilirsiniz: Çalıntı değil, alıntı yapın!! Site için: TIK TIK!

NOT 4: Sizler için bir kaç sidebar arka planı resmi ayarladım. Buyurun hayrını görün: