Cari Artikel Blog Ini

Total Tayangan Halaman

MENAMBAH SIDEBAR MENJADI DUA

Penampilan sebuah blog akan semakin cantik jika memiliki 2 buah sidebar. Disamping itu kita akan lebih leluasa dalam menempatkan elemen halaman baik berupa tulisan ataupun widget
Tidak sulit membuatnya, anda tinggal mengikuti langkah-langkah dibawah ini.
Ingat...jangan diberi tanda centang pada Expand widget Template karena akan muncul kode-kode yang rumit sehingga dapat membingungkan.
Perlu diingat kode yang ditampilkan pada tips ini merupakan kode yang berasal dari template Tata Letak. Jadi jika anda kesesulitan menemukan kodenya berarti templatenya berbeda.

Langkah pertama

  1. Masuk ke Blogger
  2. Pilih Rancangan bagian Edit HTML
  3. Cari Kode dibawah ini (biasanya berada dibagian atas)


    * 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: 200px;
    float: right;
    padding-left:10px;
    (tambahkan kode ini 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 */

  4. Sesuaikan dulu lebar outer wrapper, main wrapper dan sidebar wrapper dengan contoh diatas. Ini agar hasilnya sesuai dengan harapan anda.

  5. Jika udah sesuai, Copy kode dibawah ini kemudian paste tepat dibawah kode-kode tadi

    #sidebarbaru-wrapper {
    width: 200px;
    float: right;
    padding-left:10px;
    word-wrap: break-word;
    overflow: hidden;
    }



  6. Kode diatas menunjukan sidebar baru terletak disebelah kanan. Ubahlah kode tersebut menjadi kode seperti dibawah jika sidebar ingin diletakan di sebelah kiri.


    #sidebarbaru-wrapper {
    width: 200px;
    float: left;
    padding-right:10px;
    word-wrap: break-word;
    overflow: hidden;
    }

Langkah Kedua

  1. Masih pada bagian Edit HTML
  2. Cari kode HTML dibawah ini pada bagian body

    <div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
    </div>

  3. Copy kode dibawah ini kemudian paste tepat diatas kode tadi jika sidebar ingin berada di sebelah kiri dan paste tepat dibawahmya jika ingin berada di sebelah kanan. Jangan lupa kode yang diatas( #sidebarbaru-wrapper...dst ) harus disesuaikan, dimana akan meletakkannya..?

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


  4. Apabila sudah selesai menempatkan kode sidebar baru, silahkan akhiri dengan menekan tombol Simpan Template, selesai.
  5. Silahkan lihat hasilnya !
  6. Jika hasilnya tidak seperti harapan anda, kemungkinan lebar dari main wrapper, sidebar wrapper dan sidebar baru wrapper jumlahnya tidak sama dengan lebar outer wrapper, sehingga salah satu sidebar akan kebawah. Solusinya.....cobalah ubah lebar (width) dari sidebar agar hasilnya sesuai dengan keinginan kita. Lihat Klik disini untuk mengubah lebar sidebar.
  7. Selamat mencoba, semoga bermanfaat...

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
14 Comments

14 komentar :

BloggerGoBlog mengatakan...

saya tak mengerti kode boss,...maklum saya gak sekolah begituan,...

Bobby mengatakan...

http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif,, bang kan saya udah coba,, emang sidebarnya jadi 2 tapi kok letaknya ga beraturan ya,, tolong di bantu untuk penataan letaknya ya bang, e-mail aja ke flameblue59@yahoo.com,, thx boshttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif

ysvina mengatakan...

saya sudah coba mas.dan bisa. tapi kalo sidebarnya pengen di sisi mainbar gimana ya?
jadi nanti mainbarnya bearada antara 2 side bar. makasih sebelumnya

febri mengatakan...

bagaimana cara membuat halaman blog selebar blog epg??? thx

febri mengatakan...

mas, mau tanya..
tampilan template saya main bar berada diantara dua side bar kiri dan kanan. jika dibuka blognya tampilannya pas. tapi ketika dibuka tata letak side bar kiri dengan side bar kanan saling berdempetan di posisi sidebar kiri. bagaimana supaya sidebar tersebut normal kembali posisinya (sidebar kiri,main bar ,sidebar kanan)
thx

Desy Noer mengatakan...

Begini pak guru, aku udah tambah 1 sidebar, otomatis kan ukuran lebar sidebar yang lamanya diubah (diperkecil) biar seimbang dengan ukuran sidebar yang baru. Setelah di SAVE, hasilnya, sidebar memang bertambah satu, hanya tampilan di sidebar yang lama jadi terlihat sebelahnya saja (karena ukurannya yang diperkecil tadi). Contohnya, tampilan slideshow jadi hanya terlihat sebelah.

Aku tunggu solusinya yah. Maaf nich ngerepotin mulu.heheh..

Ades mengatakan...

untuk Febri :
Masalahnya jumlah lebar dari ketiga kolom melebihi lebar dari outer wrapper. Solusinya, kecilkan lebar salah satu kolom

Irfan mengatakan...

Terima kasih ya atas info yang Anda berikan...

tutorial blogspot mengatakan...

bos aku nyoba bikin gadget 2 kolom di atas posting.tpi kok jadinya mah disamping kanan kiri.gmn bos.sekalian mu bikin di bawah header dan atas header.tlong ya smanya

hendra mengatakan...

sya jdi bingung..
sblmnya saya sdh punya 2 sidebar d smping kanan sprti blog ini,. trus bgmna cranya utk menambhkan stu sidebar lgi d smping kiri??

tlong petunjuknya....

email: h3nd67@gmail.com

Duri pun berbagi mengatakan...

I'm a newbie in blogger.
Thanks buanget atas ilmunya gan.
Mantap sekali!

http://jejak-duri.blogspot.com/

Anderista mengatakan...

mas.... aku koq belum bisa menambah sidebar ku...........!!!!!! apa memang harus di ubah menjadi template minima dulu ya............. tak cari kode scriptnya koq g ada. mohon bimbingannya ya mas......

Ades mengatakan...

@Anderista : Setiap blog akan memiliki kode yang berbeda tergantung template yang digunakan. Blog ini (EPG Studio) menggunakan Tempalate Tata Letak/Template Minima dari Blogger)
Jika anda ingin mudah melakukan pengeditan tempalte harus memahami dulu kode-kodenya atau yang paling gampang gunakan Template Minima..pasti kodenya sama dengan kode yang digunakan oleh Tutorial Blogger manapun...
Semoga membantu....

Harisk mengatakan...

makasih ilmunya gan...
harisk-smart.blogspot.com

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!