Cara Menambah Sidebar Kiri Blog

Posted by New Johny Wuss

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 tiga kolom atau punya dua 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!

» Thanks for reading: Cara Menambah Sidebar Kiri Blog
Previous
« Prev Post
CB Blogger
New Johny WussUpdated: December 23, 2014

4 comments:

  1. Pakei cara ini sidebar bisa berhasil di kiri dan kanan,, tapi ada kendala saat penyesuaian reponsive kenapa #main-wrapper gak bisa tampil paling atas yaa..?? yang paling atas tetep #sidebarleft-wrapper...

    Jadi yang tampil paling atas sidebar kiri baru setelah itu halaman posting nya... trus untuk membuat tampilan responsive @media only screen and (max-width:960px) biar halaman posting #main-wrapper biar tampil paling atas kemudian di ikuti sidebar left, sidebar right cara nya gimana..??

    Mohon kasih solusi..?? Tq..

    ReplyDelete

Follow & Get Update by Email

CB