Membuat tampilan posting 2 kolom pada blog. langsung saja kali ini saya
akan berbagi trik memmbuat tampilan posting pada home page blogspot
menjadi 2 kolom. Cara ini sangat mudah dan simpel, kita tak perlu
menambah java script ataupun merubah tata letak template kita, namun
kita hanya menggunakan CSS untuk merubah tampilannya.
Langsung saja Buka Dasbor Blog sobat kemudian pilih template selanjutnya edit HTML >> Proceed
selanjutnya cari kode ]]</b:skin> dan letakkan CSS berikut ini di bawahnya :
<!-- kondisi home -->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
.post {position: relative;width: 250px;height:200px;float:left; margin:0 10px 10px 0; BORDER: 1px solid #e9e6e6; padding:7px; }
.post-body { font-size:14px; line-height:20px;}
.post-footer {position: absolute; width: 245px;top: 180px; font-size: 10px;border-top: 1px solid #e9e6e6; text-transform:uppercase;}
.post-home-thumbnail img{float:left;margin:5px 5px 0 0;width: 75px;height:75px; padding:3px; border: 1px solid #CCC;}
.readmore {float:right;font-size:11px; display:none;}
#blog-pager{margin: 10px auto 10px auto; width: 550px; clear:both;}
#blog-pager-older-link{margin:0 20px 0 0;}
#Post title{display:none;}
#post title h1{font-size:200%;margin:10px 0 0;padding:0;}
</style>
</b:if></b:if>
keterangan : warna merah adalah kode tinggi dan lebar tampilan posting yang akan tampil nantinya ( silahkan ganti sesuai kebutuhan sobat ), untuk menyesuaikan tampilannya preview dulu sebelum sobat mensave templatenya dan sesuaikan CSSnya menurut selera sobat.
selanjutnya yang harus di lakukan adalah SAVE template dan lihat hasilnya
Langsung saja Buka Dasbor Blog sobat kemudian pilih template selanjutnya edit HTML >> Proceed
selanjutnya cari kode ]]</b:skin> dan letakkan CSS berikut ini di bawahnya :
<!-- kondisi home -->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
.post {position: relative;width: 250px;height:200px;float:left; margin:0 10px 10px 0; BORDER: 1px solid #e9e6e6; padding:7px; }
.post-body { font-size:14px; line-height:20px;}
.post-footer {position: absolute; width: 245px;top: 180px; font-size: 10px;border-top: 1px solid #e9e6e6; text-transform:uppercase;}
.post-home-thumbnail img{float:left;margin:5px 5px 0 0;width: 75px;height:75px; padding:3px; border: 1px solid #CCC;}
.readmore {float:right;font-size:11px; display:none;}
#blog-pager{margin: 10px auto 10px auto; width: 550px; clear:both;}
#blog-pager-older-link{margin:0 20px 0 0;}
#Post title{display:none;}
#post title h1{font-size:200%;margin:10px 0 0;padding:0;}
</style>
</b:if></b:if>
keterangan : warna merah adalah kode tinggi dan lebar tampilan posting yang akan tampil nantinya ( silahkan ganti sesuai kebutuhan sobat ), untuk menyesuaikan tampilannya preview dulu sebelum sobat mensave templatenya dan sesuaikan CSSnya menurut selera sobat.
selanjutnya yang harus di lakukan adalah SAVE template dan lihat hasilnya