Cara Menambah Sidebar Kiri Blog

CB Blogger | July 16, 2019

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!

Previous
« Prev Post

Related Posts

5 komentar on Cara Menambah Sidebar Kiri Blog

  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
  2. cara menyesuaikan ukuran left sidebar gmn y, ini tampilan main bar nya jadi numpuk-numpuk sm right sidebar

    ReplyDelete

 
Copyright © 2020. New Johny Wuss - All Rights Reserved
Template by CB Blogger & Maskolis