Cara Membuat 2 Postingan Kolum di Blog

Cara Membuat 2 Postingan Kolum di Blog - Kali ini saya akan share tutorial Cara Membuat 2 Postingan Kolum di Blog , Postingan ini merupakan Request dari sobat SCH-SHARE yang bernama Fauzan Hibatullah. Cara ini cukup mudah kok.. langsung saja ke tutorial berikut :

Cara 1
1. Login ke akun blogger masing-masing
2. Klik Template -> Edit HTML
3. Lalu cari kode </b:skin> (untuk mempermudah gunakan CTRL+F / F3 di keyboard)
4. Lalu taruh kode di bawah ini tepat di bawah kode </b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post {
margin: 0 10px 10px 0 !important;
float: left !important;
width: 45%;
height: 145px;
overflow: hidden;
display: inline;
box-shadow: 1px 1px 5px rgba(1,1,1,.1);
background: #f5f5f5;
position: relative;
padding: 8px;
margin: 0;
border: 1px solid #fff;
}
</b:if>
</b:if>
</style>

5. Setelah itu lihat pratinjau dulu, kalau sudah benar bisa disimpan templatenya.

Cara2 (Penjelasan)
Disini saya akan menjelaskan sedikit bagian-bagian dari kode di atas untuk memperjelas anda jika ada kode CSS yang tidak sesuai dengan blog agan, agan dengan cepat bisa memperbaikinya sendiri.
Di mulai dari kode

Kode1

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<!--CSS-->
</b:if>
</b:if>
</style>

Kode diatas merupakan pengkondisian IF jika blog anda ditampilkan pada homepage atau bukan pada artikel/post.

Kode 2

.post {
margin: 0 10px 10px 0 !important;
float: left !important;
width: 45%;
height: 145px;
overflow: hidden;
box-shadow: 1px 1px 5px rgba(1,1,1,.1);
background: #f5f5f5;
position: relative;
padding: 8px;
border: 1px solid #fff;
}

Berikut penjelasannya :

1. Merupakan CSS untuk post
2. Margin merupakan kode CSS untuk jarak
3. Float left untuk "Melayangkan" suatu objek ke kiri, jika kode ini hilang akan membuat objek berurut kebawah bukan berbaris kanan-kiri dan atas-bawah
4. Width merupakan kode CSS untuk lebar, untuk 2 kolum bisa menggunakan width 45%-50% atau bisa disesuaikan dengan pixel (contoh:243px)
5. Height merupakan kode CSS untuk ketinggian, bisa disesuaikan dengan selera anda
6. Overflow (hidden) kode CSS jika postingan dengan ketinggian melebihi height yang ditentukan bisa disembunyikan sehingga ketinggian post dapat terlihat sesuai dengan height
7. Box-Shadow untuk membuat bayangan pada box
8. Background untuk membuat warna latar bisa dapat menggunakan gambar dengan url, kodenya yaitu "url(http://urlandadisini.com/blablabla.png")"
9. Position untuk menentukan posisi
10. Padding untuk menentukan jarak antar .post dengan text postingan
11. Border untuk membuat seperti garis dengan tebal sesuai dengan pixel yang diinginkan

script by noval bintang