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ı?
Blogger
Disqus
Yorum Ekle

7 yorum

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.

Cevap

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.

Cevap

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.

Cevap

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

Cevap

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

Cevap

Vallahi bunu arıyordum.Teşekkürler.

Cevap

Güle güle kullanın

Cevap