Postingan ini merupakan sebuah request dari teman saya di facebook "Ilham Yahya" yang menanyakan "Bagaimana Cara Membuat Post 2 Kolum di Blog" seperti template Hack4rt. Sebenarnya, tutorial ini cukup mudah untuk para blogger yang sudah mengerti untuk memodifikasi CSS template blog. Namun, untuk yang belum mengenal CSS, saya akan berikan cara1 agar tidak membingungkan. Dan cara2 untuk para blogger yang ingin mengenali dan mempelajari CSS. Langsung aja ke tutorial berikut
Cara 1
Sebelumnya anda sudah pergi ke "EDIT HTML" template anda. Caranya cukup mudah yaitu anda hanya memasukkan kode berikut tepat di bawah kode </b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
.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>
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
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<!--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
- Merupakan CSS untuk post
- Margin merupakan kode CSS untuk jarak
- Float left untuk "Melayangkan" suatu objek ke kiri, jika kode ini hilang akan membuat objek berurut kebawah bukan berbaris kanan-kiri dan atas-bawah
- Width merupakan kode CSS untuk lebar, untuk 2 kolum bisa menggunakan width 45%-50% atau bisa disesuaikan dengan pixel (contoh:243px)
- Height merupakan kode CSS untuk ketinggian, bisa disesuaikan dengan selera anda
- Overflow (hidden) kode CSS jika postingan dengan ketinggian melebihi height yang ditentukan bisa disembunyikan sehingga ketinggian post dapat terlihat sesuai dengan height
- Box-Shadow untuk membuat bayangan pada box
- Background untuk membuat warna latar bisa dapat menggunakan gambar dengan url, kodenya yaitu "url(http://urlandadisini.com/blablabla.png")"
- Position untuk menentukan posisi
- Padding untuk menentukan jarak antar .post dengan text postingan
- Border untuk membuat seperti garis dengan tebal sesuai dengan pixel yang diinginkan
- Gausah dijelasin, itu penutup dari CSS hehe
Semoga bisa mengerti penjelasan ane yang gak ahli dalam bidang menjelaskan yaa hehe
Terimakasih telah membaca artikel Cara Membuat Post 2 Kolum Di Blog. Anda bisa bookmark halaman ini dengan URL http://hack4rt-blog.blogspot.com/2013/03/cara-membuat-post-2-kolum-di-blog.html. Jika ingin copy paste artikel ini, jangan lupa untuk mencantumkan link sumber.
