Cara Membuat Sidebar Berada Di kanan/kiri Postingan

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 */
}

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:

Adam Cheater's, 12 December 2010 at 23:29 | [Reply]

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

Muhammad Ikhsan, 11 July 2011 at 00:27 | [Reply]

kok malah acak-acakan sih punya saya ..
mohon bantuannya ..

vaidika, 28 September 2011 at 04:26 | [Reply]

jika tmen-tmen mencari software ma game gratis kunjungilah blog saya di bagaskara-vaidika.blogspot.com

jaenalcreativity, 5 November 2011 at 18:09 | [Reply]

gk dha code ntukh nya gan..

Andri, 18 April 2013 at 00:08 | [Reply]

mantap infonya ,jgn lupamampir .: kink-exclusive.blogspot.com

Anonymous, 27 April 2013 at 01:08 | [Reply]

Keren, makasih gan
Bakol Gadget

Post a Comment

Kotak Komentar Klasik Klik Di sini

« Prev Next » Home