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ı

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ı

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ı

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!!!