Cara Menambah Sidebar Kiri Blog

Posted by Blog So Sánh on Thứ Ba, 23 tháng 12, 2014 | 07:27:00

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


Cara Menambah Sidebar Kiri 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!

Blog, Updated at: 07:27:00

0 nhận xét:

Đăng nhận xét

Được tạo bởi Blogger.