Untuk menambah sidebar di sebelah kiri, caranya adalah sebagai berikut:
1. Login ke Blogspot --> layout --> Edit HTML
2. Download template untuk jaga-jaga biar bila ada kesalahan dalam proses edit HTML, bisa dikembalikan lagi ke template awal.
3. Liat di bagian Outer Wrapper, tambahkan kode dan rubah beberapa variabel seperti dibawah ini:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 420px;
float: left;
padding: 5px;
border:1px solid $bordercolor;
background-color:#c77c7c;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 200px;
float: right;
padding: 5px;
border:1px solid $bordercolor;
background-color:#c77c7c;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar-wrapper {
width: 200px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
Catatan:
Kode dengan warna biru menunjukan kode aslinya.
Kode dengan warna hijau menunjukan kode yang ditambahkan.
Kode yang ditulis dengan angka merah merupakan variabel yang bisa dirubah harganya.
Outer wrapper merupakan lebar template, rubah angkanya seperti yang diinginkan; pada contoh diatas, lebarnya dari 660px dirubah jadi 840px.
Main wrapper adalah lebar kolom posting, pada contoh diatas lebarnya dari 410px diubah jadi 420px.
Sidebar wrapper adalah lebar sidebar yang dinginkan, pada contoh lebarnya dari 220px diubah jadi 200px.
Float menunjukan letak side bar di kiri atau dikanan.
4. Kemudian liat di bagian bawah, tambahkan kode di bawah ini sebelum kode <div id='main-wrapper'>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'/>
</div>
5. Simpan.
Selamat mencoba.
***** Tips Blogger lainnya:- Kode HTML untuk membuat Read More pada blogger/blogspot
- Pasang Menu Bar di blogger/blogspot
- Kode HTML untuk sembunyikan Navbar pada blogger/blogspot
- Atasi error bX-hq2u5m saat upload template baru di blogger/blogspot
- Pasang Recents Posts dan Recent Comments di Blogger
- Kode HTML untuk blogger/blogspot agar Title Posting lebih bersahabat dengan SEO
- Bikin Sidebar di Sebelah Kiri Pada Template Blogspot/Blogger
- Bikin 2 Kolom Page Elemen Di Bawah Header (di Atas Kolom Posting) Pada Template Blogspot/Blogger
- Bikin 2 Kolom Page Elemen Di Bawah Kolom Posting Pada Template Blogspot/Blogger
- Kode Untuk Memberi Warna Pada Background Posting
- Buat Garis Pinggir Atau Kotak Pada Kolom Posting dan Sidebar
MAKE MONEY on your PROFILE - ProfileDough.com
Terimakasih udah bisa.......pusing dech boleh aku copy ya... he he...
ReplyDeleteto Dhy: silahkan aja dikopi ya. salam kenal n makasi dah mampir
ReplyDeleteeh mau nanya kalo bikin judul sidebar ada warnanya gimana caranya?
ReplyDelete@heri: coba lihat di blogku yang ini ya: http://happydesug.blogspot.com/2009/05/blogger-tutorial-tips-and-tricks-how-to.html
ReplyDeletehallo salam kenal...aq boy.dod gmana caranya bwat ngasi walpaper di bloglines???thankz ya
ReplyDelete@boy: wah...kalo itu aku juga belum tahu ya..
ReplyDeletemakasih ya mas atas tutorialnya.....
ReplyDeleteMakasih tutorialnya Mas . .
ReplyDeletescript htmlnya yang bikin pusing untuk bloger pemula......tapi thanks infonya
ReplyDeletekode outer wrapper-nya g ada tuh ! Info aja template blogku Lazy Day...
ReplyDeleteItu untuk templete tipe lama yah??,klo yang keluaran 2011,Gimana??
ReplyDeletemakasih infonya gan!
ReplyDelete