AD (728x60)

Sabtu, 12 November 2011

cara membuat 2 kolom di bawah header

Share & Comment


1) Login ke Blogger dengan akun kawan
2) Klik template
3  Klik tab Edit HTML
4) Klik tab  Download Template Lengkap.
   silakan simpan dulu template anda, ini jaga-jaga bila ada kesalahan pada pengeditan
5) Kemudian cari kode ]]></b:skin>


Nb   :Untuk mempercepat pencarian kawan bisa gunakan tombol Ctrl + F atau (F3).
      Jika sudah ketemu ,copy kode di bawah ini dan paste di atas kode  ]]></b:skin>.
#yangdiatas {
width: 950px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:none;
padding: 15px 0 15px 0;
}

#yangdiatas h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 12px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#yangdiatas ul {
padding: 0;
margin: 0;
}

#yangdiatas ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dotted #fff;
/* border-bottom: 1px dashed #ccc; */
}

#yangdiatas ul li a {
display: block;
padding: 0 10px;
color:#FFFF33;
text-decoration: none;

}
#yangdiatas ul li a:hover {
background: #b1acb1;
}

#left-yangdiatas { /* kode kolom kiri */
width: 450px;
float: left;
padding-left:15px;
}

#yangdiatas-kolomatas { /* kode kolom kanan */
width: 450px;
float: left;
padding: 0 5px 0 15px;
}
 Nb : kode yang ditandai dengan warna biru yaitu 950px itu adalah lebar kolom keseluruhan; kemudian       karena ingin dijadikan 2 kolom maka harus dibagi 2 menjadi 450px - 450px kiri dan kanan. Sedang sisa jaraknya (50px) digunakan untuk jarak kiri (padding) kiri 15px, tengah 20px dan kanan 15px.
Sekarang cari kode seperti dibawah
<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1′>
<b:widget id='Header1′ locked='true ' title='Nama Blog Anda' type='Header'/>
</b:section>
</div>
 dan letakan kode dibawah ini tepat berada dibawah kode diatas
<div id='yangdiatas'>
<b:section class='yangdiatas' id='left-yangdiatas'>
</b:section>
<b:section class='yangdiatas' id='right-yangdiatas'>
</b:section>
</div>
Jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya.

Selamat mencoba


Tags:

Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

0 komentar:

Posting Komentar

 

Popular Content

Recent Posts

Popular Posts

Follow on Facebook

tutorial blog

Popular Posts

Why to Choose RedHood?

Copyright © tutorial blogger | Designed by Templateism.com