Tüm Yazılarınız Ayrı Kutuda Olsun

Bu yazımızda blogumuzdaki yazılarımızı birbirinden ayıracağız ve her bir yazımız kutu şeklinde resimdeki gibi gösterilecek.Aynı zamanda kutu şekline aldığımız yazımızı çerçeveleyen kutunun rengini ve yazılarımızın arkaplanını değiştirmeyi de bu yazımda sizlerle paylaşacağım.Daha önceki yazılarımda yazılarınız arasına nasıl resim ekleyebileceğinizi paylaşmıştım:

>>>>>http://www.ehliblog.com/2009/10/yazlarnz-arasna-resim-nasl-eklenir.html

Şimdi ise yazılarımızı kutu şekline almayı sizlerle paylaşacağım.

Ön izleme olması açısından aşağıdaki resimler yararlı olacaktır:

Evet gelelim Nasıl yapıldığına.

Herhangi bir değişiklik yapmadan önce şablonunuzun yedeğini almayı ihmal etmeyin…

Şimdi blogger hesabınıza giriş yapın.Yerleşim>>>Html düzenle kısmına gelerek asagıdaki kodu buluyoruz:(CTRL+f tuşları yardımyla)

h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}

Sizin kodunuz tamamen aynı olmayabilir ama bu şekilde olması gerekiyor.(Bazı şablonlarda .post kodu yer almayabliyor.Sorun değil.Siz h2.date-header{  ile başlayan kodu bulun yeterli)
Bu kodu bulduysanız kodunuzu aşağıdaki şekilde değiştiriyoruz:

h2.date-header {
margin:1.5em 0 .5em;
background:#FFDEAD;
border: 1px solid #E9967A;
padding-right:7px;
padding-left:7px;
}
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
background:#FFDEAD;
border: 1px solid #E9967A;
padding-right:7px;
padding-left:7px;
}

Hepsi Bu kadar.Buraya kadar işlemleri doğru yaptıysanız sizin yazılarınız da benim blogumdaki gibi kutu içerisinde yer alacak.Şablonunuzu kaydedip değişikliği görebilirsiniz.

Gelelim bu kodları özelleştirmeye.Diyelim kutunun kenarlarını farklı renkte yapmak istiyorsunuz. O zaman şu koddaki border: 1px solid #E9967A;  satırındaki #E9967A renk kodunu, belirlediğiniz renk kodu ile değiştirin.

Aynı şekilde eğer background u değiştirmek istiyorsanız  background:#FFDEAD; kod satırındaki #FFDEAD html renk kodunu belirlediğiniz renk kodu ile değiştiriniz.

Yazı renginde kullandıgım renklere dikkat edin.Mesela yukarıda kırmızı renkle yazdıgım kodları degistirmeniz gerekiyor.

Html Renk Kodları için http://html-color-codes.info/ adresini ziyaret edebilirsiniz…
Son bir uygulama daha.Eğer yazılarınızın arka planına resim eklemek istiyorsanız yapmanız gerekn çok basit.

background:#FFDEAD; kod satırını şu şekiilde değiştirin
background:url(RESİM URL NİZ);

Evet şimdi kısa bir toparlama yapmak gerekirse diyelim ben yazılarımın arka planına bir resim ekleyecem ve yazılarımı birbirinde ayıran çerçevenin renginin de siyah olmasını istiyorum.Eklemem gereken kod:

h2.date-header {
margin:1.5em 0 .5em;
background:#FFDEAD;
border: 1px solid #E9967A;
padding-right:7px;
padding-left:7px;
}
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
background:url(http://static-p3.fotolia.com/jpg/00/02/63/26/400_F_2632672_
OTz0AK89JxkGQE1gM9J7mQs2BUnxF3.jpg);
border: 1px solid #000000;
padding-right:7px;
padding-left:7px;
}

Ön izleme için http://ehl-iblog-deneme.blogspot.com/ adresine bakabilirsiniz.

Elimden geldiğince ayrıntılı bir şekilde açıklamaya çalıştım.Aklınıza takılan bir sorun olursa yorum bölümünde sorabilirsiniz….