Home » » Membuat Dua Kolom Diatas dan Dibawah Posting

Membuat Dua Kolom Diatas dan Dibawah Posting

Redi Apri Handoko | 20.27 | 0 comments
Menulis memang membuat tangan menjadi pegal selain menguras otak tenaga dan uang. Memang segala sesuatu yang kita inginkan harus dilalui dengan pengorbanan dan kerja keras. Untuk itu kali ini saya akan memberikan trik kepada sobat bagaimana membuat dua kolom gadjet di atas dan dibawah posting. Langkahnya sangat mudah saja, untuk itu ikuti langsung caranya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan dan klik Edit HTML
3. Letakan kode dibawah ini diatas kode ]]></b:skin>
/*Dua Kolom di Posting by blogtrikdantips
-----------------------------*/
#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;
}
Keterangan:
Kode yang berwarna merah adalah lebar kedua kolom tersebut sedangkan kode berwarna hijau adalah lebar salah satu kolom. Tinggal diedit dan disesuaikan dengan lebar kolom posting anda.

4a. Jika ingin menambahkan dua kolom dibawah posting maka tambah code yang berwarna merah tepat dibawah code yang berwarna biru dan masih didalam code yang berwarna hijau diatas.
<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>
4b. Dan jika ingin menambah dua kolom diatas posting maka taruh code yang berwarna merah diatas code yang berwarna biru dan didalam code yang berwarna hijau
<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>
5. Simpan template anda

Oke deh selamat mencoba!!!
Berbagi Dengan Teman:

Posted by : Redi A.H ~ / Tutorial windows, SEO , Info gadget, Download game

Artikel Membuat Dua Kolom Diatas dan Dibawah Posting Di posting oleh Redi A.H pada 6 Jul 2009. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kontak atau komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging!!!

0 comments:

Posting Komentar

Terimakasih atas kunjungan anda semua, sebelumnya mohon maaf kami tidak menerima komentar yang berbau tentang pornografi.
TERIMAKASIH atas partisipasinya.

 
Site Meter :
Copyright © 2011. Tutorial Windows 7 - All Rights Reserved
Proudly powered by Blogger
Thank You For Google