• INFO DAFTAR CUG
  • WA:085200000285
  • PIN: D703CC94

Cara Membuat Sidebar berada di Kiri dan Kanan - arminaven

 

Advertisement
Solusi Nelpon SMS Paket Internet Telkomsel Murah - KLIK DISINI

Bagi sobat yang berminat untuk menempatkan kolom sidebar di sebelah kiri, sebelum membaca artikel ini ada baiknya membaca artikel yang di sini terlebih dahulu karena artikel ini merupakan lanjutan dari artikel tersebut, jika sobat langsung membaca artikel ini, saya khawatir sobat menjadi tambah bingung.

Sebelum memasuki kepada topik bahasan utama, saya sarankan kepada sobat yang mempraktekan teori yang akan saya tulis sebaiknya bukan pada blog utama, akan tetapi pada blog untuk percobaan. Ini untuk menghindarkan kejadian yang tidak di inginkan, sayang apabila blog yang telah di tata rapih menjadi amburadul akibat percobaan.

Baiklah, ayo kita mulai sobat, dalam hal ini saya anggap sobat sudah berhasil membuat kolom baru. Langkah pertama yang harus di ingat adalah jangan sekali-kali memberi tanda conteng pada kotak kecil di samping tulisan Expand widget Template karena apabila sobat mencontengnya akan keluar kode widget yang sangat ngejelimet. Jika pada postingan yang lalu saya menuliskan kode seperti ini :


/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
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: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}



Agar hasilnya berbeda dengan yang dulu yaitu kolom yang di buat bukan berada pada sebelah kanan, maka sobat perlu sedikit mengubah kode yang saya cetak merah menjadi seperti ini :


#sidebarbaru-wrapper {
width: 180px;
float: left;
padding-right:10px;

word-wrap: break-word;
overflow: hidden;
}



Terlihat pada hurup yang saya cetak biru bahwa yang di ubah hanyalah dua baris kode saja, yang lainnya tidak perlu di ubah. Jika sudah selesai mengubahnya, jangan lupa untuk menutupnya dengan menekan tombol simpan template.

Langkah selanjutnya adalah menuju ke bagian bawah template, yaitu pada bagian body, jika dulu saya menyarankan agar kode sidebaru di tempatkan seperti ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>



Maka apabila sidebar baru ingin di tempatkan di sebelah kiri, maka kode sidebar baru harus di pindahkan di atas kode main (posting) sehingga kodenya kira-kira akan menjadi seperti ini :




<div id='sidebarbaru-wrapper'> <!-- perhatikan yang ini -->
<b:section class='sidebar' id='sidebarbaru' preferred='ye'/'>
</div>

<div id='main-wrapper'> <!-- perhatikan yang ini -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>


Apabila sudah selesai menempatkan kode sidebar baru, silahkan akhiri dengan menekan tombol Simpan Template, selesai. Silahkan lihat hasilnya !

Tidak sulitkan sobat? semoga mudah untuk di mengerti. Untuk melihat contoh blog yang mempunyai sidebar di samping kiri dan kanan, sobat bisa membuktikannya di sini!


Hosting Indonesia
belajar komputer

sumber: http://www.krtutorplus.com/2007/11/membuat-sidebar-berada-di-kiri-dan.html

DAFTAR CUG SEKARANG | KLIK DISINI

Cara Membuat Sidebar berada di Kiri dan Kanan - arminaven 4.5 5 Unknown Cara Membuat Sidebar berada di Kiri dan Kanan - arminaven Bagi sobat yang berminat untuk menempatkan kolom sidebar di sebelah kiri, sebelum membaca artikel ini ada baiknya membaca artikel yang di ...


Tidak ada komentar:

Posting Komentar

1.Jangan lupa koment yah kawan,untuk mempererat silaturrahim, NO CAPTCHA berkomentarnya.
2.Silahkan kawan becanda,asal dengan etika.
3.Komentar Dengan Moderasi untuk menghindari SPAMMER. Yang mau pasang Link,gunakan NAME/URL. Link LIVE otomatis terhapus
4. Yang gak punya akun maka silahkan berkomentar sebagai "Anonim"
5.Gunakan media komentar ini sebagai sarana saran, masukan serta request :)
6.Terimakasih kunjungan dan komentarnya kawan,Mohon maaf jika belum bisa berkunjung balik

J-Theme