Belajar Ngeblog

Belajar bersama membuat blog

Cara Membikin Sidebar di kanan dan kiri

Beberapa waktu yang lampau saya telah memposting bagaimana cara membuat sidebar baru pada template minima sehingga template tersebut yang asalnya dua kolom berubah bentuk menjadi tiga kolom. Dari hasil pengamatan dilihat dari komentar-komentar yang muncul pada postingan tersebut ataupun ada juga yang melalui shoutbox, mengambarkan kegembiraan para sobat yang telah berhasil menyulap blognya menjaditiga kolom, selamat dech buat yang sudah sukses. Namun diantara yang telah puas, ada juga yang masih merasa penasaran dan juga berkeinginan lebih. Beberapa komentar yang muncul, di antaranya adalah sebagai berikut :

makasih bro…
aku dah berhasil tapi alangkah bagusnya jika post berada di antara side bar itu aku pengen yg kayak gitu gimana caranya bro?????

mas gimana klo mo naruh colom posting di tengah diantara sidebar kiri n kanan ???? tolong ya mas… thx

nambah kolom da bisa, tapi gimana cara nya meletakan side bar di kiri dan kanan sedangkan tempat posting nya berada di tengah-tengan side bar pada templete minima, tolong ya mas..

Rohman (anu kasep) : Hmmmmmmm… gimana ya… ada deeeech… rahasia pokoknya

Pembaca : dasar pelit

Rohman (anu kasep) : Bercanda dhenk

Pembaca : awas kalo ga di kasih tau

Untuk membuat kolom sidebar yang baru dibuat tidaklah terlalu sulit, sobat hanya perlu menempatkan kode float menjadi di kiri (left) serta penambahan kode padding-right agar kolom kiri tidak bertabrakan dengan kolom posting. Bingung? sengaja saya buat bingung

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!

Sumber :http://kolom-tutorial.blogspot.com/2007/11/membuat-sidebar-berada-di-kiri-dan.html

Oktober 17, 2008 - Posted by | Blogspot

7 Komentar »

  1. alah ora iso mas:((
    bulet caranya

    Komentar oleh joko | Desember 13, 2008

  2. THANX MEMBANTU BAGI SAYA YANG PEMULA

    Komentar oleh fuads | Mei 20, 2009

  3. makasih semua….
    atas petunjuknya
    ternyata setelah di buat sidebar baru langsung diisi dengan widget ya…..??
    biar tampak bagaimana posisinya
    pantesan sebelum diisi postingnya tetep paling kiri
    salam
    fabrie.blogspot.com

    Komentar oleh febri | Juni 1, 2009

  4. Mas, tanya, saya barusan coba ngubah template baru dengan make html di luar penyedia blog saya (blogspot) eh kok ketika saya gak cocok ma template itu dan saya pingn kembali pake costume template standar blogspot saya kok ilang, kok ilang sidebar kanan saya… bisa bantu ndak… tp saya pake blogspot, terimakasih, balasnya mohon di komentar posting di blog saya… terimakasih sebelumnya

    Komentar oleh movas | November 4, 2009

  5. Pusing abdi kang….

    Komentar oleh Revorts | November 5, 2009

  6. Tapi saya coba dulu deh…
    Pusing krn cuma liat belom dicoba…:)

    Komentar oleh Revorts | November 5, 2009

  7. bener2 mbulet poll..:<

    Komentar oleh encuszuzy | Maret 17, 2010


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: