Home » » Cara Membuat Menambah Dua Kolom Diatas dan Dibawah Posting

Cara Membuat Menambah Dua Kolom Diatas dan Dibawah Posting

Written By RACHMAT SR on Selasa, 11 Oktober 2011 | 21.30

Cara Menambah Dua Kolom Diatas dan Dibawah Posting

bahas bagaimana cara menambah 2 kolom lagi diatas atau dibawah tubuh posting. Coba sobat perhatikan gambar disamping tersebut, disitu ada dua kolom baru dibawah kolom posting. Dengan menambahkan dua kolom dibawah posting seperti pada gambar tersebut, sobat bisa menyimpan gadget/widget dibawah posting, misalkan untuk artikel berkaitan, iklan ataupun gadget/widget yang lainnya.
Kalo sobat tertarik membuatnya di template BLOG sobat, ikuti langkah berikut :
1. Masuk ke menu Layout/Tata Letak
2. Pilih Edit HTML lalu backup terlebih dahulu template sobat.
3. Cari kode ]]></b:skin>, gunakan CTRL+F untuk memudahkan pencarian.
4. Kalo udah ketemu, paste kode dibawah ini tepat diatas kode ]]></b:skin>


/*Under Post
-----------------------------*/
#underpost h2{
font-size:13px;  (120%)
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;  (25px)
}
#underpost{
width:480px;
}
#underleft{
width:230px; /*lebar kolom kiri*/
float:left;
margin:5px;
}
#underright{
width:230px; /*lebar kolom kanan*/
float:right;
margin:5px;
}
Atau juga dapat kopipaste kode dibawah ini.Pengganti kode diatas.

-------------------------------------------
/*Under Post menambah 2 kolo dibawah posting
-----------------------------*/
#underpost h2{
font-size:20px;  (120%)
font-weight:bold;
color:#FDF0E7;
background:#3890C6;
border-bottom:2px solid #A7A6A7; /*batas bawah judul padding left lapisan kiri*/
border-left:1px solid #3890C6;
border-right:1px solid #3890C6;
border-top:2px solid #3890C6;
padding-left: 0 0 10px;  (25px)
}
#underpost{
width:600px;
clear:both;
float:left;
color:#333;
background:#fff;
margin:0 auto;
padding: 0 0 10px
}
#underleft{
width:265px; /*lebar kolom kiri*/
float:left;
margin:0 auto; /*batas*/
border-left:1px solid #3890C6;
border-right:1px solid #3890C6;
border-bottom:5px solid #3890C6; /*karis bawah kolom*/
}
#underright{
width:300px; /*lebar kolom kanan*/
float:right;
margin:0 auto;
border-left:1px solid #3890C6;
border-right:1px solid #3890C6;
border-bottom:5px solid #3890C6;
}

----------------------------------------------
Perhatikan kode yang berwarna merah width:480px, itu merupakan lebar dari kolom posting BLOG. Sesuaikan saja dengan lebar pada template sobat, biasanya untuk mengetahui lebar/width kolom posting, kita cari kode seperti ini :

#main-wrapper {
width: 480px;

Misalkan saja lebar/width kolom posting seperti contoh diatas yaitu 480px, maka bagi lebar tersebut menjadi dua, karena kita akan membuat dua kolom dibagian kiri dan kanan, sisakan nilainya untuk margin dan padding untuk memberi jarak antara gadget yang lain dengan gadget yang lain.

5. Kalo sudah, cari kode seperti ini :

<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>

- Kalo sobat mau menambahkan dua kolom dibawah posting, sobat paste kode dibawah ini tepat dibawah kode yang berwarna merah tersebut.

<div id='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div>


- Kalo sobat mau menambahkan dua kolom diatas posting, sobat paste kode dibawah ini tepat diatas kode yang berwarna merah tersebut.

Sehingga kurang lebih kodenya akan terlihat seperti ini :
* Untuk dua kolom dibawah posting :

<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 id='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div>
</div>

* Untuk dua kolom diatas posting :

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

6. Simpan dan perhatikan template sobat pada bagian page elemen, akan ada dua kolom tambahan dibawah post body atau tubuh posting.

Selamat mencoba dan semoga bermanfaat ^_^

Sumber oleh
Share this article :

0 komentar:

Poskan Komentar

Thank for your visit, leave your suggestions and comments in the fields below ...

Silahkan meninggalkan komentar anda sehingga kita dapat berbagi pemikiran Anda dengan pengunjung lainnya.



 
Support : Al Islam | Paalem 3 | Mushola
Copyright © 2013. Panduan Blogger - All Rights Reserved
Template Created by Creating Website Modified by CaraGampang.Com
Proudly powered by Blogger