Blog Yazılarını Sütunlara Bölme Eklentisi

2.11.17
Blog Yazılarını Sütunlara Bölme Eklentisi

Bu yazımızda blog yazılarının yan yana sütunlar halinde bölmesi ile ilgili bilgiler paylaşacağım. Blog yazılarının ayrıntılı ve daha iyi anlaşılması için, yazıları sıralayarak veya iki ve daha fazla sütunlara bölerek oluşturmak gerekir.

Daha önceki yazılarımızda blog yazılarının oluşturulmasında kullanılan bazı önemli ipuçlarını paylaşmıştık.


Blog yazılarını iki veya daha fazla sütuna bölmek için aşağıdaki adımları takip edin.

Blog'da Çok Sütunlu Yazılar Nasıl Oluşturulur?


1- Aşağıdaki CSS kodlarını şablon editör sayfanızda bulunan ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.column-row {display:inline-block;margin:0;padding:20px}
.column-row:before {display: table;content:" "}
.column-row:after {clear:both}
hr {margin-top:20px;margin-bottom:20px;border:0;border-top: 1px solid #eee;height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
@media (min-width:480px) {.column-2,.column-3,.column-4,.column-5{float:left;padding-right:15px;padding-left:15px}.column-2{width:50%}.column-3{width:33.33333333%}.column-4{width:25%}.column-5{width:66.66666667%}}

2- Aşağıdaki HTML kodları blog yazılarınızda iki veya daha fazla sütuna bölmek istediğiniz yazıları ekleyerek yayınları oluşturduğunuz editör sayfasının HTML bölümüne ekleyin.

Yazıları iki sütuna ayırma

<div class="column-row">
<div class="column-2">
<b>Başlık</b>
<p>Açıklama</p>
</div>
<div class="column-2">
<b>Başlık</b>
<p>Açıklama</p>
</div>
</div>

Yazıları üç sütuna ayırma

<div class="column-row">
<div class="column-3">
<b>Başlık</b>
<p>Açıklama</p>
</div>
<div class="column-3">
<b>Başlık</b>
<p>Açıklama</p>
</div>
<div class="column-3">
<b>Başlık</b>
<p>Açıklama</p>
</div>
</div>

Yazıları dört sütuna ayırma

<div class="column-row">
<div class="column-4">
<b>Başlık</b>
<p>Açıklama</p>
</div>
<div class="column-4">
<b>Başlık</b>
<p>Açıklama</p>
</div>
<div class="column-4">
<b>Başlık</b>
<p>Açıklama</p>
</div>
<div class="column-4">
<b>Başlık</b>
<p>Açıklama</p>
</div>
</div>

Yazıları 2/3 ve 1/3 şeklinde iki sütuna ayırma

<div class="column-row">
<div class="column-5">
<b>Başlık</b>
<p>Açıklama</p>
</div>
<div class="column-3">
<b>Başlık</b>
<p>Açıklama</p>
</div>
</div>

Yazıları 1/3 ve 2/3 şeklinde iki sütuna ayırma

<div class="column-row">
<div class="column-3">
<b>Başlık</b>
<p>Açıklama</p>
</div>
<div class="column-5">
<b>Başlık</b>
<p>Açıklama</p>
</div>
</div>

Yukarıdaki HTML kodları kullanarak blog yazılarınızı yan yana sürunlar halinde bölebilirsiniz. HTML kodlar içerisinde bulunan,

  • column-2: Blog yazılarını iki sütuna ayırmak için kullanılan HTML kodlar.
  • column-3: Blog yazılarını üç sütuna ayırmak için kullanılan HTML kodlar.
  • column-4: Blog yazılarını dört sütuna ayırmak için kullanılan HTML kodlar.
  • column-5: Blog yazılarını 2/3 oranında ayırmak için kullanılan HTML kodlar.

Blog yazılarını çoklu sütunlara ayırmak için kullanılan yukarıdaki HTML kodları daha ayrıntılı incelemek için aşağıdaki ön izleme butonuna tıklayın.


Bu yazımızda blog yazılarını yan yana iki ve daha fazla sütunlara bölmek için kullanılan kodlarını ve özelliklerini paylaştım. Bu yayın ile ilgili görüş ve sorularınız için yorum formunu kullanabilirsiniz.
Faydalı mı?
  1. Bak ben hep ne düşünüyorum biliyor musun? Senin blogun gibi bir sürü blog var. Ne bileyim işte blogtecrübem, Teknojest falan... Niye hepiniz ortak bir sitede içerik üretip canavar gibi bir site açmıyorsunuz? Herkes kendi kendine kral olmaya çalışıyor gibi geliyor bana.
    Aranızda da rekabet oluyor böyle olunca.

    YanıtlaSil
  2. Düşüncenize saygı duyarım. Kral olmak gibi bir niyetim yok. Diğer arkadaşlar da mutlaka emek veriyor birşeyler yapmak için. Fakat ben bahsettiğiniz sitelerin ne durum veya ne paylaştıklarını hiç bir zaman merak etmedim.

    YanıtlaSil
  3. hocam bende ne düşünüyorum biliyor musun hani onedio gibi blogger de de aşağı doğru indikçe sonraki sayfa yüklense ziyaretçiler öyle çok vakit harcıyor iniyorda iniyor
    sitede durma süresi uzar.
    kendimden biliyorum.

    YanıtlaSil
  4. Ona benzer bir muhteşem bir çalışma yapıyorum çok yakında yayınlayacağım ama ücretli.

    YanıtlaSil
  5. Başarılar Hocam
    Merakla bekliyoruz
    Konuları Satırlara bölmeyi
    Yapmışsın zaten bi şey kalmış aşağı doğru indikçe sayfa yenilenmeden
    Nextpage gelecek
    Blogger de
    Nextpage prev page metodları da var zaten
    Biraz uğraş biraz kafa patlatma sen yaparsın hocam

    YanıtlaSil
  6. Vallahi bunu arıyordum.Teşekkürler.

    YanıtlaSil