Menambah Dua Kolom Diatas/bawah Postingan

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by Unknown Rabu, 24 Agustus 2011 0 komentar
Mengotak-atik template blogspot adalah hal yang sangat paling menyenangkan apalagi kalau kita berhasil mengotak-atik template blogspot sehingga menjadi bagus dan menarik, bahkan  menarik orang lain untuk memilikinya. Nah kembali ke topik yaitu "Menambah dua kolom dibawah/diatas post body", pengertian post body sendiri yaitu area di blog Anda untuk postingan Anda.

Contohnya bisa dilihat pada gambar di bawah ini muncul 2 kolom gadget di bawah postingan


Sehingga jika Anda menambahkan dua kolom dibawah postingan, Anda dapat menyimpan gadget/widget di atas/bawah postingan misalkan adsense,iklan, atau widget yang lainya.

Apakah Anda ingin menambahkan dua kolom diatas/bawah post body blog Anda?
coba ikuti langkah dibawah ini..


Pastikan Anda sudah Log In ke blogspot jangan wordpress/lainya, hehehe lalu pilih menu Layout
kemudian masuk menu Edit HTML

Taruh Code CSS dibawah ini diatas Code ]]></b:skin>
/*Under Post

-----------------------------*/

#underpost h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}

#underpost{
width:530px;
}

#underleft{
width:257px;
/*lebar kolom kiri*/
float:left;
margin:4px;
}

#underright{
width:250px;
/*lebar kolom kanan*/
float:right;
margin:4px;
}

Perhatikan code yang berwarna merah diatas, samakan dengan lebar (width) post body atau main-wrapper di blog Anda. Untuk mengetahhui lebar post body cari code css dibawah ini

#main-wrapper {
width: 410px;

Nah ukuranya adalah yang tercetak tebal diatas.

Jangan lupa untuk membagi dua area kolom kiri dan kanan, perhatikan code yang berwarna biru diatas tadi, misalnya lebar post body atau main wrapper blog anda 410px maka bagi antara kolom kiri dan kanan. Jangan lupa atur margin dan padding untuk jarak tepi antara kolom kiri dan kanan (baca disni untuk tutorial padding dan marginya).

Setelah langkah pertama selesai mari ke langkah selanjutnya, masih di area Edit HTML, lalu cari code dibawah 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>
Jika ingin menambahkan dua kolom dibawah post body maka tambah code yang berwarna merah tepat dibawah code yang berwarna biru dan masih didalam code yang
berwarna hijau diatas.

Dan jika ingin menambah dua kolom diatasnya maka taruh code yang berwarna
merah diatas code yang berwarna biru dan didalam code yang berwarna hijau

<div
id='underpost'>

<b:section
class='underleft' id='underleft'/>

<b:section
class='underright' id='underright'/>

</div>

Sehingga kurang lebih codenya menjadi seperti Dua kolom dibawah Postingan

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

Dua kolom diatas postingan

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

Nah jika semuanya sudah beres tinggal SAVE TEMPLATE.

Coba lihat di area page element muncul dua kolom dibawah/diatas postingan.

Code-codenya sesuiakan saja dengan template Anda, karena semua template codenya agak berbeda-beda.

Nah jika kolom kiri dan kanan tidak bisa sejajar maka atur lebar
(width) kolom kiri dan kanan, juga atur padding dan marginya (baca) mengenai padding/margin.
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Menambah Dua Kolom Diatas/bawah Postingan
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://cintafido.blogspot.com/2011/08/menambah-dua-kolom-diatasbawah.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Online Skill - Cinta fido Fido | Kopi kanan Akherat | Kisah Nabi Muhammad | Sahabat | Belajar Blogger | Template | HTML | Tutorial | Komputer.

investasi semoga anda senang

kurs mata uang BCA-2


Selamat datang di blog cinta fido, semoga anda diberi keSehatan oleh alloh SWT

Islam itu Cinta Damai Agama Islam Cinta Damai
jihad Damai adalah amal kebaikan yang Allah perintahkan dan menjadi sebab kokoh dan kemuliaan umat islam