Sebelumnya Saya pernah Membahas Cara Membuat 3 Kolom Elemen di Atas Footer
Cara membuatnya adalah sebagai berikut:
Login ke Blogger klik Rancangan klik Edit HTML klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
Beri tanda centang pada kotak di samping tulisan Expand Template Widget, kemudian cari kode ]]></b:skin>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol (F3)
Jika sudah ketemu tambahkan kode berikut di atasnya :
Keterangan : kode yang ditandai dengan warna biru yaitu 950px itu adalah lebar kolom keseluruhan; kemudian karena ingin dijadikan 2 kolom maka harus dibagi 2 menjadi450px - 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
dan letakan kode dibawah ini tepat berada dibawah kode diatas
Jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya.
Login ke Blogger klik Rancangan klik Edit HTML klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
Beri tanda centang pada kotak di samping tulisan Expand Template Widget, kemudian cari kode ]]></b:skin>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol (F3)
Jika sudah ketemu tambahkan kode berikut di atasnya :
#kolomatas {
width: 950px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:none;
padding: 15px 0 15px 0;
}
#kolomatas h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 12px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}
#kolomatas ul {
padding: 0;
margin: 0;
}
#kolomatas ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dotted #fff;
/* border-bottom: 1px dashed #ccc; */
}
#kolomatas ul li a {
display: block;
padding: 0 10px;
color:#FFFF33;
text-decoration: none;
}
#kolomatas ul li a:hover {
background: #b1acb1;
}
#left-kolomatas { /* kode kolom kiri */
width: 450px;
float: left;
padding-left:15px;
}
#right-kolomatas { /* kode kolom kanan */
width: 450px;
float: left;
padding: 0 5px 0 15px;
}
width: 950px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:none;
padding: 15px 0 15px 0;
}
#kolomatas h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 12px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}
#kolomatas ul {
padding: 0;
margin: 0;
}
#kolomatas ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dotted #fff;
/* border-bottom: 1px dashed #ccc; */
}
#kolomatas ul li a {
display: block;
padding: 0 10px;
color:#FFFF33;
text-decoration: none;
}
#kolomatas ul li a:hover {
background: #b1acb1;
}
#left-kolomatas { /* kode kolom kiri */
width: 450px;
float: left;
padding-left:15px;
}
#right-kolomatas { /* kode kolom kanan */
width: 450px;
float: left;
padding: 0 5px 0 15px;
}
Keterangan : kode yang ditandai dengan warna biru yaitu 950px itu adalah lebar kolom keseluruhan; kemudian karena ingin dijadikan 2 kolom maka harus dibagi 2 menjadi450px - 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>
<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='kolomatas'>
<b:section class='kolomatas' id='left-kolomatas'>
</b:section>
<b:section class='kolomatas' id='right-kolomatas'>
</b:section>
</div>
<b:section class='kolomatas' id='left-kolomatas'>
</b:section>
<b:section class='kolomatas' id='right-kolomatas'>
</b:section>
</div>
Jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya.
Selamat Mencoba :)
Sumber : (http://blogtutorialblogger.blogspot.com)
Related Posts : Blogger Tutorial,
Footer
Artikel
{ 2 comments... Read Them Below or add one }
berhasil om, walaupun sedikit kesulita :D
thx..
yottabaca.com
makasi triknya,sangat membantu kami.
http://www.superpelangsing.com/
Posting Komentar
Silahkan sahabat berkomentar sesuai dengan artikel postingan di atas. Apabila ada postingan yang rusak atau tidak bisa terbaca mohon beritahu di Komentar ini.Trimakasih telah berkunjung & berkomentar
Penting... Maaf,Tidak Diizinkan Memberikan Atribut Pada Komentar Anda..