Choose Your Language
English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
Language

Perlu Disini

Untuk mempercepat download software silahkan klik DISINI.
Agar dapat meng-extract kompressan software klik DISINI.

Loading

Cara Membuat Sidebar Dua Kolom: Kanan-Kiri

Membuat sidebar dua kolom tidaklah susah, Seperti pada blog saya ini. Sekarang sudah ada sidebar di kanan dan kiri postingan saya. Kali ini saya akan memberikan trick membuat sidebar dua kolom.

Update: sekarang saya tambahkan kode ul / ul li agar terdapat icon.
Bagi yang pernah menggunakan trick ini bisa diperbarui dengan menambahkan kode yang tersedia.

Perlu diingat setiap blog mempunyai variasi terendiri dalam peletakkan kode HTML. Jadi harap diperhatikan.

1. Login ke account blog anda.

2. Pilih Tata Letak kemudian Edit HTML.

3. Beri tanda centang pada Expand Widget Templates.

4. Cari kode berikut ini atau sejenisnya. (yang penting tulisan bewarna merah)
   
   #sidebar-wrapper {
    float: right;
    width: 350px;
    margin: 20px 15px auto 0;
    padding: 0 0 10px;
    display: inline;
        text-align:justify;
        border:1px dashed #ceceae;
   }
   
5. Kemudian kopi paste kode dibawah ini tepat diatas kode  #sidebar-wrapper { 

#newsidebar-wrapper {
width: 200px;
float: left;
padding-left:8px;
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 */
border:1px dashed #ceceae;
padding-left:10px;
padding-right:10px;
}

#newsidebar-wrapper ul{padding:0; margin:0; color:#333}

#newsidebar-wrapper ul li{ background:url('http://i792.photobucket.com/albums/yy201/elang-antarnusa_99/folder.jpg') no-repeat; list-style-type:none; margin:0 0 10px; padding:0 0 10px 20px; border-bottom:1px dashed #CCCCCC; }

#newsidebar-wrapper li{ background:url('http://i792.photobucket.com/albums/yy201/elang-antarnusa_99/folder.jpg') no-repeat; list-style-type: none; margin: 0 0 10px; padding-left: 20px; }

#newsidebar-wrapper ul li a:hover {
background: #B1ACB1;}

Keterangan kode :
width untuk ukuran lebar sidebar
float untuk letak sidebar
padding untuk jarak sidebar      
border untuk garis
tulisan bewarna orange mudah adalah update yang telah saya tambahkan untuk variasi icon

6. Cari kode (Fokus yang bewarna merah)

   <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='yes'>
.....................................
.....................................

.....................................
</b:section>
</div>


    titikk-titik adalah lanjutan kodenya. Tidak begitu penting

7. Copy paste kode dibawah ini tepat diatas kode <div id='main-wrapper'>

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

8. Save Templates. Lihat hasilnya. Akan muncul tambahan Widget bila dilihat di Tata Letak>>Elemen Laman

Bagi yang pertama kali mengikuti trick ini, untuk tulisan bewarna orange mudah diabaikan
Lihatlah perbedaannya, he,,,
Hasilnya akan seperti ini:
Blog sebelum divariasi

blog sesudah divariasi



Kawan bblogger pasti pintar. Jika ada yang berantakan bisa diatur sendiri kog. Postingan saya sebelumnya juga sudah menerangkan kog.


Dimohon agar bertanya jika kurang paham, dan berikan komentarnya donk ^_^




Artikel Terkait:

16 komentar:

AWAN MEGA PUTRA PAKSI DIRGANTARA mengatakan...

om, klo yg d bawah sndiri tu buatna gmna?

DEMPO AWANG PUTRA ELANG ANTARNUSA mengatakan...

maksudnya yang ap? Mav, klo bisa lebih diperdetail

AWAN MEGA PUTRA PAKSI DIRGANTARA mengatakan...

mksudna klo yg dbwh tu kan U da 3 kolom. Nah, Q mnta yg cma 1 kolom tpi panjang

DEMPO AWANG PUTRA ELANG ANTARNUSA mengatakan...

Ok! segera akan saya postingkan.

AWAN MEGA PUTRA PAKSI DIRGANTARA mengatakan...

bro izin praktek tuk template baru Q

Ibnu Rukman mengatakan...

blog aku kok gak ada kode #sidebar-wrapper{ apa lagi yang lain² tolong admin answernya...........

DEMPO AWANG PUTRA ELANG ANTARNUSA mengatakan...

@ arez : setiap blog memiliki kode HTML yang berbeda sob. Jangan terpacu #sidebar-wrapper . mungkin sobat arez bisa coba dengan menulis sidebar saja / wrapper saja. D coba lagi y sob :)

Ibnu Rukman mengatakan...

ok.aku coba cari dulu..... thanks

Ibnu Rukman mengatakan...

satu lagu sobat awang putra , chatbox aku kok gak tepat yaa waktu tanggalnya kok punya kamu tepat gimana niich sobat tolong yaa.............

impian relugais12 mengatakan...

Kak......pengnjung bru nhe....
hemmm,,mntap kak artikelnya,,,mnta izin kopas artikel y kak,,untuk bahan blog ku,,,,
dan ntar ku cba dhe cara-caranya,,thank s y kak,,
mhon knjungan baliknya,,,biar sling share...

BudiHamzah mengatakan...

master , ko diblog saya gk ada #sidebar-wrapper { blog saya masih templat standar waktu pertama kali buat template.
tolong penjelasannya dong master.

BudiHamzah mengatakan...

master , ko siblog saya gk ada div id='main-wrapper'> , tolong penjelasannya dong master..

Hafiz Ansyari mengatakan...

gan.. punya aku blum ada sidebarnya.jdi ga ada #sidebar-wrapper { itu.gimana cara membuat nya???
mohon bantuannya.karna aku make template bukan dari blogger...

Unknown mengatakan...

thanks banget kk

agung mengatakan...

lah kok punya saya ngak jadi sih template saya template download bisa nggak gan

http://kukuhdwipamuji.blogspot.com/ mengatakan...

trims mas

Posting Komentar

 
KLIK DI SINI UNTUK MEMBUATTEXT ON YOUR DEKSTOP| BARU. . . MOZILLA FIREFOX 4.0 ALPHA 1 PORTABLE FULL. KLIK DISINI| KUNJUNGI BERBAGAI SOFTWARE GRATISAN FULL ALIAS NO TRIAL | TERIMA KASIH TELAH BERKUNJUNG