Kode ini sebenarnya untuk membuat 2 kolom di bawah header yang aku dapatkan dari SURIYADI'S BLOG dan sudah aku coba untuk lakukan dan berhasil. Cuma setelah itu aku jadi berubah pikiran dan ingin membuat 2 kolom page elemen itu adanya di bawah kolom postingan. Setelah aku goggling cari-cari informasi, ternyata kode yang sama bisa digunakan hanya saja kode akhir untuk memunculkan page elemen itu yang letaknya berbeda.
Cara membuat 2 kolom page elemen di bawah kolom posting-nya adalah sebagai berikut:
1. Login ke Blogspot --> Layout --> Edit HTML
2. Untuk jaga-jaga bila nanti ada kesalahan dalam proses edit HTML, download dulu template awal ya.
3. Cari kode ]]></b:skin> dan letakan kode berikut tepat diatasnya:
/* KolomAtas2
—————————- */
#kolomatas2 {
width: 860px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:none;
padding: 15px 0 15px 0;
}
#kolomatas2 h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
font-size: 12px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}
#kolomatas2 ul {
padding: 0;
margin: 0;
}
#kolomatas2 ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dotted #fff;
/* border-bottom: 1px dashed #031c5d; */
}
#kolomatas2 ul li a {
display: block;
padding: 0 10px;
text-decoration: none;
}
#kolomatas2 ul li a:hover {
background: #B1ACB1;
}
#left-kolomatas2 { /* yang ini nih kode kolom kiri */
width: 500px;
float: left;
padding-left:15px;
}
#right-kolomatas2 { /* kalo yg ini kode kolom kanan */
width: 340px;
float: left;
padding: 0 5px 0 15px;
}
</div> <!-- end content-wrapper -->
dan letakan kode dibawah ini tepat berada dibawah kode diatas
<div id='kolomatas2'>
<b:section class='kolomatas2' id='left-kolomatas2'>
</b:section>
<b:section class='kolomatas2' id='right-kolomatas2'>
</b:section>
</div>
5. Simpan templates, kemudian lihat hasilnya di bagian Page Elements
Cara membuat 2 kolom page elemen di bawah kolom posting-nya adalah sebagai berikut:
1. Login ke Blogspot --> Layout --> Edit HTML
2. Untuk jaga-jaga bila nanti ada kesalahan dalam proses edit HTML, download dulu template awal ya.
3. Cari kode ]]></b:skin> dan letakan kode berikut tepat diatasnya:
/* KolomAtas2
—————————- */
#kolomatas2 {
width: 860px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:none;
padding: 15px 0 15px 0;
}
#kolomatas2 h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
font-size: 12px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}
#kolomatas2 ul {
padding: 0;
margin: 0;
}
#kolomatas2 ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dotted #fff;
/* border-bottom: 1px dashed #031c5d; */
}
#kolomatas2 ul li a {
display: block;
padding: 0 10px;
text-decoration: none;
}
#kolomatas2 ul li a:hover {
background: #B1ACB1;
}
#left-kolomatas2 { /* yang ini nih kode kolom kiri */
width: 500px;
float: left;
padding-left:15px;
}
#right-kolomatas2 { /* kalo yg ini kode kolom kanan */
width: 340px;
float: left;
padding: 0 5px 0 15px;
}
Catatan:4. Sekarang cari kode seperti dibawah
Nama baris kodenya tidak diganti, yaitu kolomatas, seperti aslinya, hanya saja ditambahi angka 2, jadi kolomatas2, agar berbeda dengan nama baris kode yang digunakan untuk membuat 2 kolom dibawah header.
Baris kode yang ditandai dengan warna merah yaitu 860 itu adalah lebar kolom keseluruhan, dan ini bisa dirubah disesuaikan dengan lebar kolom masing-masing template; begitu juga dengan lebar kolom kiri 500px dan lebar kolom kanan 340px bisa disesuaikan dengan keinginan masing-masing. Jarak/padding page elemen nya juga bisa disesuaikan.
</div> <!-- end content-wrapper -->
dan letakan kode dibawah ini tepat berada dibawah kode diatas
<div id='kolomatas2'>
<b:section class='kolomatas2' id='left-kolomatas2'>
</b:section>
<b:section class='kolomatas2' id='right-kolomatas2'>
</b:section>
</div>
5. Simpan templates, kemudian lihat hasilnya di bagian Page Elements
Catatan: Kalau template tidak bisa disimpan, coba tanda petik ('), yang diberi warna merah, pada kode diatas dihapus dan ditulis ulang, setelah itu simpan.Selamat mencoba.
1 komentar:
coba dulu ya.....
Posting Komentar