Minggu, 12 Mei 2013

Cara Membuat Sidebar Berada Di kanan/kiri Postingan

Saya sudah pernah membahas tentang bagaimana Membagi Sidebar Menjadi 2 Kolom di Blogspot. 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.............


Berkomentarlah dengan sopan dan tidak menggunakan Link aktif. EmoticonEmoticon

Diberdayakan oleh Blogger.