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:

Ş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:

ayrı-kutu
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….

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

16 yorum:

  1. Bisey daha sorsam , blogger in yeni ozelligi olan sayfa eklemeden faydalanip bir sayfa ekledim, yeni actigim bu sayfaya ayri ayri notlar nasil eklerim acaba >?
    tesekkuler..

    YanıtlaSil
  2. Ayrı ayrı not derken neyi kastettiniz?Posting sekmesi altında Edit PAges sekmesi ile sayfanızı düzenleyebilirsinz.

    YanıtlaSil
  3. ee hani yeni sayfa ekliyoruz ya bloga o sayfada ekledigim tum yazilar ayni sayfdada gorunuyor, yani ben yeni sayfaya ekledigim her yazinin ayri kutularda gorunmesini istiyorum ama olmuyo , anca ana sayfada ayyri kutularda gorunuyo yeni sayfalardda gorunmuyor.

    O sayfada gorunsun ama ayri kutularda olsun yani ?

    Nasil yaparim acaba bi fikriniz varmi ?

    Tesekkurler..

    YanıtlaSil
  4. Dediğiniz gibi bu kod anasayfada ayrı kutu şeklinde gösterilmesi için.Ama sayfa olayını ben bilmiyorum aslında gerek var mı onu da bilmiyorum.Yani sayfa deyince benim aklıma hakkında, iletişim sayfası gibi bir durum geliyor.

    YanıtlaSil
  5. Mesela ornek veriyorum sizin blogunuzda Blogger ipuclari sayfasina girdigimde konular ayri basliklar altinda toplanmis bunu nasil yaptiniz acaba,baska bi yontemi varmi bunun ?
    Tesekkurler..

    YanıtlaSil
  6. Tamam şimdi oldu.Bu konu hakkında önümüzdeki günlerde yazacağım.

    YanıtlaSil
  7. Tesekkurler bekliyorum..

    YanıtlaSil
  8. Bide sitenizin anasayfasinda slayt i nasil yaptiginizi sormustum ?Tesekkurler..

    YanıtlaSil
  9. Bu soruyu sizden ilk kez duydum.Daha önce yorum yaptıysanız bna gelmedi.Neyse slayt olmasını istiyorsanız slaytlı tema mevcut onları seçebilirsiniz.Ama ben mevcut temama slayt eklemek istiyorum derseniz biraz kod bilgisi gerekecek.istediğiniz yerlere yerleştirmek falan.Biraz uğraştıracaktır gibi geliyor.Renk Tonlarını ayarlayacaksınız yerleşimi ayarlayacaksınız.Slayt kodlarını bulmakta sorun yok

    YanıtlaSil
  10. Evet yazımı tamamladım.Burada ulaşabilirsinz
    http://ehl-iblog.blogspot.com/2010/09/etiket-ve-arsiv-sayfalarnzda-sadece-yaz.html

    YanıtlaSil
  11. yazinizda anlattiklarinizi uyguladim ama malesef olmadi, bu istlemi yaptiktan sonra normalde gorunen yazilarimda gorunmemeye basladi ..?
    :(

    YanıtlaSil
  12. Son yazdığım yazımdan bahsediyorsanız yorumlar ilgili kısımdan devam etsek iyi olur.

    YanıtlaSil
  13. Sayın blog ehli, şimdilik bu konuyla bir alakam yok ben birşey danışmaya geldim. Ben gariban,teknolojiden pek anlamayan bir blog yazarıyım.Ne oldu nasıl olduysa blogta bir haltlar karıştırdım,Blog sayfamı açtığımda sağ kenarda epeyyyce bir boşluk var. Sol kenarda bulunan boşlukla sağ kenarda eşit değil ve bu beni çok rahatsız ediyor. Baktım,birçok blogta aynı durum sözkonusu.Genişlik ayarlamada denedim her türlü genişlik değişti ama o sabit kaldı bir türlü işin içinden çıkamadım. Ehline danışmak geldi aklıma çünkü birçok şeyi sizin yazdıklarınızdan takip ederek ayarladım. Şimdi ben bu sorunu nasıl çözebilirim?Bloğuma girip bakarsanız görürsünüz zaten. Siz de öyle bir durum yok.Çok recaa ediyorum yardım ediniz.İyi geceler efem.

    YanıtlaSil
  14. güzel yorumlarınız için teşekkür ederim.Şimdi blogunuza girdim ama dediğiniz gibi bir durumla karşılaşmadım.Yazılarınız gayet ortalı duruyor.Sağ ve soldaki boşluklar eşit.Bir sorun yok gibi.Siz blogunuzun ekran görüntüsünü alıp gönderebilir misiniz?

    YanıtlaSil
  15. Sayın blog ehli, biraz garip gelecek size ama siz gayet normal diyince masa üstü bilgisayarı açtım baktım hakikaten boşluklar eşit. ben ufacık tabletten giriyorum yazılarım ordan takip ediyorum,ekran küçük diye sanırım bana öyle göründü. Ama büyük ekranda hakikaten hiçbir sorun yok. Meşgul ettiğim için özür dilerim.Çok teşekkürler. Soru sorunca cevap veren nadir blog yazarlarındansınız. Kolaylıklar diliyorum...

    YanıtlaSil
  16. Çok teşekkür ederim.Sorununuzu çözdüysek ne mutlu bana.İyi Çalışmalar...

    YanıtlaSil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.