Pages

Sabtu, 14 Agustus 2010

Cara Membuat Sidebar Berada Di kanan/kiri Postingan

y entry-content">
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 SEMOGA KALIAN SUKSES AMIEEEEN !!!!!!!!!!






Tidak ada komentar:

Posting Komentar

 

Sample text

Sample Text

Sample Text