Saya sudah pernah membahas tentang bagaimana Cara Membuat Sidebar 2 Kolom. 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.
SELAMAT MENCOBA.............
6 komentar:
gk Ada bacaan :
#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 */
Gimana sih Comment >> http://adampointblanksejati.blogspot.com
kok malah acak-acakan sih punya saya ..
mohon bantuannya ..
jika tmen-tmen mencari software ma game gratis kunjungilah blog saya di bagaskara-vaidika.blogspot.com
gk dha code ntukh nya gan..
mantap infonya ,jgn lupamampir .: kink-exclusive.blogspot.com
Keren, makasih gan
Bakol Gadget
Post a Comment