Cara Menambah kolom Sidebar Kiri Blog

Selasa, 26 April 2016

Cara Menambah Kolom Sidebar di Sebelah Kiri Template Blog. How to Add a New Sidebar to Blogger Blog.

JIKA tampilan blog Anda saat ini terdiri dari dua kolom, main area dan sidebar, hanya punya satu sidebar kanan, dan ingin ditambah satu sidebar lagi di bagian kiri, sehingga menjadi 3 kolom atau punya 2 sidebar (kanan dan kiri), maka inilah caranya:

1. Template > Edit HTML
2. Temukan (Ctrl+F) kode berikut ini:

#main-wrapper{padding-left:10px;width:600px;

float:$startSide;word-wrap:break-word;overflow:hidden}
#sidebar-wrapper{width:300px;float:right;

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

3. Copy kode berikut ini dan tambahkan (paste) di bawah kode tersebut:

#sidebarleft-wrapper {width:200px;float:left;

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

Hasilnya akan seperti ini:

#main-wrapper{padding-left:10px;width:600px;

float:$startSide;word-wrap:break-word;overflow:hidden}
#sidebar-wrapper{width:300px;float:right;

word-wrap:break-word;overflow:hidden}
#sidebarleft-wrapper {width:200px;float:left;

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

4. Di atas barisan kode tadi, biasanya ada kode "main-wrapper" seperti di bawah ini. Ubah ukurannya, yaitu dikurangi ukuran "sidebarleft" tadi. 

Dalam contoh ini, ukuran "sidebarleft" 200px, sedangkan "main-wrapper" 600px. Maka 600 - 200 = 400 'kan? Maka ubahlah menjadi 400px;

#main-wrapper{padding-left:10px;width:400px;

float:$startSide;word-wrap:break-word;overflow:hidden}

5. Temukan kode <div id='main-wrapper'> dan tambahkan kode berikut ini di atasnya:

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

Jadinya seperti ini:

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

<div id='main-wrapper'>

6. Save Template!

Berikutnya Anda tinggal atur "margin" dan "padding" di kode #sidebarleft, misalnya seperti ini:

 #sidebarleft-wrapper {

width:200px;

float:left;

word-wrap:break-word;

overflow:hidden;

margin:10px;

padding:5px

}

Beres. 

Itulah cara menambah satu kolom sidebar kiri di template blog Anda. Good luck!

Labels: Desain Blog

Thanks for reading Cara Menambah kolom Sidebar Kiri Blog . Please share...!