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 Yayınlarında Otomatik İçindekiler Dizini Oluşturma
- Blog Yazı Yayınlarında Kullanılan Kısa Kodeksler
- Blog Yayınlarında Izgara Sistemi Kullanma
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.