Bagi anda yang ingin mengetahui bagaimana cara Membuat Side Bar Dua Kolom di Blogspot seperti gambar di bawah ini:
Berikut adalah langkah-langkanya:
- Login dengan akun anda ke Dashboard , kemudian pilih Layout --> Edit HTML
- Klik Download Full Template, ini penting sebagai backupan template anda, jika nanti terjadi hal-hal yang tidak diinginkan...wah bahasanya.... : ) hehe.... template anda bisa direstore kembali seperti semula...
- Kemudian anda cari kode ini ]]></b:skin>
- Lalu copy kode di bawah ini, kemudian anda simpan diatas kode ]]></b:skin> tadi.
#lsidebar-wrapper {
float: left;
margin:0 10px 0 5px;
padding:0;
width:150px;
display:inline;
}
.lsidebar {
line-height: 1.5em;
}
.lsidebar .widget {
background: #FFFFFF;
float:left;
width: 140px;
margin: 0 0 10px 0;
padding: 10px;
border:1px solid #f1f1f1;
}
#rsidebar-wrapper {
float: right;
margin-right:10px;
padding:0;
width:140px;
}
.rsidebar {
line-height: 1.5em;
}
.rsidebar .widget {
background: #FFFFFF;
float:right;
width: 130px;
margin: 0 0 10px 0;
padding: 10px;
border:1px solid #f1f1f1;
}(Kode dengan warna merah bisa anda atur sesuai dengan selera anda)
Atau bisa juga anda simpan setelah kode di bawah ini, silahkan pilih sesuai selera
/*- Sidebar -*/
#sidebar {
float: left;
width: 320px;
margin: 6px 0px 5px 0px;
padding:0px;
line-height: 18px;
display: inline;
} - Setelah langkah diatas, kemudian dilanjutkan dengan mencari kode seperti di bawah ini atau yang nampak mirip2 :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
</b:section>
</div> - Setelah ketemu, hapus dulu kode </div> nya, lalu anda copy kode berikut dan letakkan di bawahnya.
<div id='lsidebar-wrapper'>
<b:section class='lsidebar' id='lsidebar' preferred='yes'>
</b:section>
</div>
<div id='rsidebar-wrapper'>
<b:section class='rsidebar' id='rsidebar' preferred='yes'>
</b:section>
</div>
</div>
Jadi kode tersebut akan tampak seperti ini:
<div id='sidebar-wrapper'> - Jika sudah selesai semua, tinggal anda Save Template sekarang.
- Silahkan anda lihat hasilnya dengan cara click Page Elements.
Sekarang anda sudah berhasil Membuat Side Bar Dua Kolom di Blogspot...
Semoga membantu.............
0 komentar:
Posting Komentar