.
Home » » Cara Membuat 3 Kolom di Bawah Header di blogspot

Cara Membuat 3 Kolom di Bawah Header di blogspot

Written By Admin on Selasa, 06 Desember 2011 | 1:48 AM

Bagi para sobat yang templatenya hanya mempunyai sedikit kolom atau elemen dibawah header atau bahkan tidak ada sama sekali, jangan khawatir saya akan sharing solusinya. 


Cara Membuat 3 Kolom di Bawah Header di blogspot .


1.  login dulu Blogger, pilih Rancangan/Layout => Edit HTML, kasih tanda centang pada  
    Expand Template   Widget;
2. Cari kode ]]></b:skin>
3. Letakkan kode di bawah ini di atas kode]]></b:skin> 

/* Top Header
---------------------------- */
#topheader {
width:930px;
clear:both;
float:left;
color:#333;
background:#fff;
margin:0 auto;
padding:0 0 10px;
}
#topheader a:visited {
color:gray;
text-decoration:none;
}
#topheader h2 {
font-size:11px;
font-weight:700;
line-height:1.4em;
text-transform:uppercase;
border-bottom:1px dotted silver;
margin:0 0 10px;
padding:20px 0 2px;
}
#topheader ul {
color:#333;
margin:0;
padding:0;
}
#topheader ul li {
list-style-type:none;
background:fff;
border-bottom:1px dotted #ccc;
padding-left:17px;
margin-top:2px;
}
#left-topheader {
width:360px;
float:left;
padding-left:15px;
}
#center-topheader {
width:230px;
float:left;
padding:0 20px;
}
#right-topheader {
width:260px;
float:right;
padding-right:15px;
}



*Keterangan:
#topheader adalah kode untuk kolom secara keseluruhan;
#left-topheader adalah kode untuk kolom sebelah kanan;
#center-topheader adalah kode untuk kolom pada posisi tengah;
#right-topheader adalah kode untuk kolom sebelah kiri;
Width: px adalah kode untuk ukuran lebar kolom;
Padding adalah jarak sela antara kolom satu dengan lainnya;

Silahkan dimodifikasi, dengan catatan harus sama dengan jumlah lebar pada template Anda dan untuk mengetahui ukuran lebar template, cari kode: #outer-wrapper dan lihat nilai width-nya;

4. Selanjunya cari kode seperti dibawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section> 

5. Tepat di bawah kode di atas, tambahkan kode di bawah ini: 

<div id='topheader'>
<b:section class='topheader' id='left-topheader' preferred='yes'/>
<b:section class='topheader' id='center-topheader' preferred='yes'/>
<b:section class='topheader' id='right-topheader' preferred='yes'/>
</div> 
6. Selanjutnya klik "Save Template" dan setelah tersimpan klik "Tata Letak" kemudain lihat hasilnya . ada  
     elemen baru dibawah header blog kamu.Atau kamu bisa Klik Tata Letak untuk melihat element baru 
     tersebut.


Semoga berhasil.
Share this article :

0 komentar:

Posting Komentar

Terimakasih telah membaca artikel ini, komentar Anda sangat membantu blog ini :)

Komentar Blogger Sejati

Saya adalah

Foto saya
Bekasi, Jawa Barat, Indonesia
Rizky Gunawan, Seorang yang lagi belajar menulis dan berbisnis online (Inernet Marketing) lahir di Rawa Panjang, Bekasi.
 
Support : Rizkygunawan1@gmail.com | Facebook | Twitter
Copyright © 2011. Catatan Rizgun - All Rights Reserved
Template Modify by Rizgun Blog
Proudly powered by Blogger