Membuat Post Menjadi 2 Kolom Di Homepage. itu adalah judul posting yang akan kita bahas sobat di tahun 2013 ini, sebenernya tadi saya bingung mau bahas apa untuk posting hari ini ehhhh ternyata ada ide dari teman FB saya yang menanyakan gini kepada saya:
cara bikin 2 kolom posting kaya agan bagaimana ? nahh dari situlah saya dapat ide untuk posting hari ini yaitu
Membuat Post Menjadi 2 Kolom Di Homepage. cukup dulu bincang"nya kali ini kita langsung menju ke poko pembahasan sobat, untuk membuat post menjadi 2 kolom silahkan ikuti langkah" berikut ini
1. Login account blogger
2. Masuk ke menu tata letak
3. Pilih Edit HTML
4. Cari Kode seperti ini:
]]></b:skin>
5. Kemudian letakkan kode di bawah ini tepat di bawah kode
]]></b:skin>
<!-- kondisi home -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.post {position: relative;width: 369px;height:228px;float:left; margin:0 10px 10px 0; BORDER: 1px solid #e9e6e6; padding:7px; }
.post-body { font-size:12px; line-height:20px;}
.post-footer { background:#000;position: absolute; width: 380px;top: 240px; font-size: 10px;border-top: 1px solid #e9e6e6; text-transform:uppercase; margin:0 0 0 -7px; color:#fff; }
.post-footer a{ color:#fff;}
.post-footer:before {content:&quot;&quot;;position:absolute;top:-8px;left:97%;width:0px; height:0px;border-width:4px;border-style:solid;border-color: transparent transparent #000 #000 ;}
.post-author {margin: 0 0 0 10px;}
.post-home-thumbnail img{float:left;margin:5px 5px 0 5px;width: 75px;height:75px; padding:3px; border: 1px solid #CCC; background: #fff; border: 3px solid #ccc; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
.post:hover:hover .post-home-thumbnail img { border: 3px solid #cccccc;-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);}
.post:hover { background: #f2f2f2; -webkit-box-shadow:0px 0px 7px -5px #333333; -moz-box-shadow:0px 0px 7px -5px #333333; -o-box-shadow:0px 0px 7px -5px #333333; -ms-box-shadow:0px 0px 7px -5px #333333; box-shadow:0px 0px 7px -5px #333333;}
#post-home a{font-size:10px; font-style:italic !important;}
#blog-pager{margin: 10px auto 10px auto; width: 550px; clear:both;}
#blog-pager-older-link{margin:0 20px 0 0;}
#judul-atas{display:none;}
#judul-atas h1{font-size:200%;margin:10px 0 0;padding:0;}
li.home{display:none;}
.comment-link{margin: 0 0 0 15px;}
.home-link{display:none;}
</style>
</b:if>
</b:if>
<!-- kondisi artikel pada halaman posting -->
Kode yang berwarna merah silahkan sobat atur sendiri sesuai ukuran template sobat
6. Simpan Template
Sekian dulu pembahasn hari ini semoga bisa berguna bagi sobat sekalian, dan jika ada masalah dengan kode di atas silahkan tannyakan saja ^_^ langsung kepada saya. kurang lebihnya saya ucapkan Terimakasih ^_^