Saya sudah pernah membahas tentang bagaimana . Sebenarnya tidak ada bedanya antara postingan saya yang ini dengan yang sebelumnya. Jika di posting sebelumnya saya hanya mengajarkan cara menambah sidebar menjadi 2 kolom, kali ini saya akan mengajarkan cara membuat sidebar berada di kanan kiri postingan. Cara membuatnya sangat mudah. Step by Step :
1. Login ke Blogger anda (wajib) > Tata letak (layout) > Edit HTML
2. cari kode berikut ini (fokuskan pencarian pada yang berwarna merah)
#sidebar-wrapper {
width: 430px;
float: $endSide;
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 */
}
1. Login ke Blogger anda (wajib) > Tata letak (layout) > Edit HTML
2. cari kode berikut ini (fokuskan pencarian pada yang berwarna merah)
#sidebar-wrapper {
width: 430px;
float: $endSide;
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 */
}
3. Tambahkan kode berikut di bawahnya, setelah tanda }
#sidebarbaru-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
contoh :
#sidebar-wrapper {
width: 430px;
float: $endSide;
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 */
}
#sidebarbaru-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
4. Jika sudah, cari kode <div id='main-wrapper'>
5. Tambahkan kode berikut di atas kode tadi
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
sehingga akan menjadi
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
<div id='main-wrapper'>
6. Save templates, dan lihat hasilnya.
Tidak ada komentar:
Posting Komentar