Blogger'da Çok Sütunlu Yazılar Nasıl Yazılır?

Klasik blog yazıları blogumuzda tek sütun halinde yer alır. Tıpkı bu yazıda ve blogda olduğu gibi. Ancak bazı Wordpress ve HTML sitelerde görebileceğiniz gibi yazıları yan yana iki veya daha fazla sütun halinde yazmak Blogger’da da mümkün.

Ne demek istediğimi gözünüzde canlandıramadıysanız aşağıda resimli örneklerle blog yazılarını Blogger’da 2, 3 ve 4 ve sütun halinde nasıl  yazabileceğinizi anlattım.

Öncelikle Blogger Kumanda Paneli > Tema > HTML’yi Düzenle yolunu izleyerek ]]></b:skin> kodunu bulun ve bunun üzerine aşağıdaki CSS kodlarını ekleyin.

.iki-sutun, .uc-sutun, .dort-sutun{text-align:justify!important;} .bhsutunlar .iki-sutun, .bhsutunlar .uc-sutun, .bhsutunlar .dort-sutun{ display: block; padding: 0 10px; float: left;!important;} .bhsutunlar { margin: 15px 0; } .bhsutunlar *, .bhsutunlar *:after, .bhsutunlar *:before { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .bhsutunlar:after, .bhsutunlar:before { content: ""; display: block; clear: both; } .bhsutunlar .iki-sutun { width: 50%; } .bhsutunlar .uc-sutun { width: 33%; } .bhsutunlar .dort-sutun { display: block; width: 25%; }

Ardından blogunuza normal bir yazı yazıyormuş gibi yazı editörünü açın ve burada HTML kısmına aşağıdaki kodları ekleyerek 2,3 ve 4 sütunlu yazılar oluşturabilirsiniz.

2 Sütunlu Yazı

2 sütunlu yazı


Resimdeki örnekte gördüğünüz gibi yazıları yan yana 2 sütun halinde yazmak için şu kodları kullanacaksınız:

<div class="bhsutunlar">
<div class="iki-sutun">
Buraya ilk sütunun metnini girin</div>
<div class="iki-sutun">
Buraya ikinci sütunun metnini girin
</div>
</div>

3 Sütunlu Yazı

3 sütunlu yazı


Resimdeki örnekte gördüğünüz gibi yazıları yan yana 3 sütun halinde yazmak için şu kodları kullanacaksınız:

<div class="bhsutunlar">
<div class="uc-sutun">
Buraya ilk sütunun metnini girin</div>
<div class="uc-sutun">
Buraya ikinci sütunun metnini girin</div>
<div class="uc-sutun">
Buraya üçüncü sütunun metnini girin</div>
</div>


4 Sütunlu Yazı


4 sütunlu yazı


Resimdeki örnekte gördüğünüz gibi yazıları yan yana 4 sütun halinde yazmak için şu kodları kullanacaksınız:

<div class='bhsutunlar'>
<div class='dort-sutun'>Buraya ilk sütunun metnini girin</div>
<div class='dort-sutun'>Buraya ikinci sütunun metnini girin</div>
<div class='dort-sutun'>Buraya üçüncü sütunun metnini girin</div>
<div class='dort-sutun'>Buraya dördüncü sütunun metnini girin
</div>
</div>


Çok sık olmasa da zaman zaman bu şekilde çok sütunlu yazılara ihtiyaç duyabiliyoruz. Umarım işinize yarar.

İyi bloglar!!!

16 yorum:

  1. Elinize sağlık Serdar hocam, çok işimize yarayacak :)

    YanıtlaSil
  2. Hocam ameğinize sağlık gayet güzel yazı olmuş. ve bilmediğimiz o kadar şey var ki blog ve Blogger hakkında sağolsun sizden öğreniyoruz.

    YanıtlaSil
  3. İkili sütun şeklinde yazı paylaşmıştım. 3 ve 4 sütunlar bana fazla gelir ama bilgi açısından kıymetli. kullanışlı olduğu kesin.

    YanıtlaSil
  4. Çok faydalı bir konu. Not alıyorum lazım olursa diye.
    Teşekkürler :)

    YanıtlaSil
  5. konuyla alakasız ama eski tema daha iyi değil miydi hocam?

    YanıtlaSil
    Yanıtlar
    1. Çok yavaştı, çok sıkıntısı vardı. Değiştirmek şart olmuştu artık.

      Sil
    2. Tesekkurler

      Sil
  6. Bu Temayı'da eski tema gibi ben yaptım de hadii.

    YanıtlaSil
  7. Uzun yazan arkadaşlar için kullanışlı bir eklenti bu eklentiyi kullanacagim..

    Teşekkürler.

    YanıtlaSil
  8. Temanızı Paylaşırmısınız.?

    YanıtlaSil
  9. Hoca. Tema eskisinden yavaş değilmi

    YanıtlaSil
    Yanıtlar
    1. Birader para para lazım. O tema daha hızlı ancaj reklam konmuyor. Baksana maşallah her yer reklam yapmış.

      Sil
    2. Hayır eski temada çok fazla gereksiz kod ve grafik vardı.

      Sil
    3. adsız kardeş her insan emeğinden para kazanmak ister ama fazla reklam ve link siteye fazla zarar buna da biz karışamayız. Teşekkürler.

      Sil
  10. Temanızı değiştirmişiniz hayırlısı olsun.Benim merak ettiğim tema değişikliği hit kaybına sebep olmuyor mu? Siz hit kaybı yaşamadınız mı? Ayrıca temayı bloğa nasıl uyguladınız anlatırsanız,bilmeyen arkadaşlar için çok faydalı olur.Güle güle kullanın,iyi çalışmalar.

    YanıtlaSil

Blogger tarafından desteklenmektedir.