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 .
Expand Template Widget;
2. Cari kode ]]></b:skin>
3. Letakkan kode di bawah ini di atas kode]]></b:skin>
---------------------------- */
#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;
#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>
<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>
<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.
elemen baru dibawah header blog kamu.Atau kamu bisa Klik Tata Letak untuk melihat element baru
tersebut.
Semoga berhasil.
0 komentar:
Posting Komentar
Terimakasih telah membaca artikel ini, komentar Anda sangat membantu blog ini :)