Pages

Sabtu, 14 Agustus 2010

Cara Membuat Sidebar 2 kolom

Sebenarnya cara ini tidak mau saya ajarkan (walaupun di mbah google banyak). Tapi berhubung teman saya yang bernama Muhammad Yusuf sudah meminta caranya pada saya. yaa, apa boleh di kata. Langsung saja ok :



1. Login ke blogger anda > Layout > Edit HTML



2. Beri tanda centang pada "Expand Widget Templates"



3. Cari kode (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 */ }



4. Copy-paste kode berikut setelah tanda } #newsidebar-wrapper



{ width: 200px; float: $endSide; padding-left:5px; 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 */ }



Keterangan kode : width untuk ukuran lebar sidebar float untuk letak sidebar padding untuk jarak sidebar



5. Cari kode (fokuskan pencarian pada yang berwarna merah)  



<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> .......................................... .......................................... .......................................... </b:section> </div> titik-titik adalah lanjutan kodenya (tidak begitu penting untuk di ketahui) 6. Copy-paste kode berikut ini setelah </div> <div id='newsidebar-wrapper'> <b:section class='newsidebar' id='newsidebar' preferred='yes'></b:section> </div>



7. Save Templates, lihat hasilnya di PageElements (pasti ada perbedaan) Hasilnya akan seperti ini >







Keterangan, jika ada bagian yang berantakan anda bisa atur ukuran/tempat/jarak nya. Terima Kasih

Tidak ada komentar:

Posting Komentar

 

Sample text

Sample Text

Sample Text