Cara Membuat 3 Kolom di Bawah Postingan Blogger 9

Pada templete magazine mungkin kita sering mendapati 3 buah kolom di bawah postingan dan biasanya ini di gunakan untuk menampilkan postingan perlabel . Pada Postingan terdahulu saya pernah membahas tentang bagai mana cara membuat dua kolom di bawah postingan baca Cara Membuat Dua Kolom Di Bawah Postingan Blogger dengan trik tersebut kita akan mendapat kan 2 kolom di bawah postingan blog kita . Nah untuk saat ini sesuai dengan judul postingan yaitu Cara Membuat 3 Kolom di Bawah Postingan Blogger , Kita hanya akan menambahkan 1 kolom lagi di bawah postingan tersebut sehingga menjadi tiga kolom .

Dan adapun Cara Membuat 3 Kolom di Bawah Postingan Blogger adalah:

1. Pergi ke blogger dasbor >>> Pilih opsi lainya >>> Templete >>>Back Up Dulu templete anda.

2. Selanjutnya Klik Edit HTML dan Centang kotak kecil Expand Widget Templates.

3. Cari kode di bawah ini gunakan Ctrl + F atau F3 untuk memudahkan pencarian.

<div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
    </div>

4. Copy kode di bawah ini dan pastekan sebelum kode </div> diatas ( yang berwarna merah).

<div id='under-post-wrapper'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:section class='under-post' id='col-left' showaddelement='yes' />
   <b:section class='under-post' id='col-mid' showaddelement='yes' />
    <b:section class='under-post' id='col-right' showaddelement='yes'/>
    <div style='clear: both;'/>
    </b:if>
</div>

5. Selanjutnya cari kode ]]></b:skin> dan copy kode css di bawah ini lalu pastekan diatas kode ]]></b:skin> .

/*3 Kolom Under Post Css Start*/
#under-post-wrapper {background: #fff; margin: 0 auto;width:100%; padding: 0 0px  0px 0;}
.under-post  h2 { margin: 0px 0px 0px 0px; padding: 4px 0px 4px 0px; text-align: left; color: #000; background: #fff; font-weight: bold;font-size: 16px;}
.under-post .widget { margin: 0px 0 0 0px; border: 1px solid #fff; background: #fff;}
.under-post .widget-content { padding: 0px 0px 5px 0px; }
.under-post ul { list-style-type:square; margin-left:0px; }
#col-left, #col-mid {
display:inline-block;
width: 31%;
float:left; 
margin: 0px  18px 0px 0px; 
padding: 5px 0px 0px;
margin-top:5px;
color: #919090;
line-height: 1.0em;
font-size: 12px;
font-style:italic;
border:0px solid;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:0px 0px 0px #d100b2;
-webkit-box-shadow:0px 0px 0px #d100b2;
box-shadow:0px 0px 0px #ccc;
    }
#col-right{
display:inline-block;
width: 32%;
float:left; 
margin: 0px  0px 0px 0px; 
padding: 5px 0px 0px;
margin-top:5px;
color: #919090;
line-height: 1.0em;
font-size: 12px;
font-style:italic;
border:0px solid;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:0px 0px 0px #d100b2;
-webkit-box-shadow:0px 0px 0px #d100b2;
box-shadow:0px 0px 0px #ccc;
    }
/*3 Kolom Under Post Css End*/

6. Simpan templete anda.

Selesai dan selamat mencoba.....