Cara Membuat Sidebar Kiri Pada Blogspot

Tidak semua template bawaan standart pada blogspot terdapat side bar sebelah kiri,selain berfungsi untuk menambah kapasitas ruang halaman home page pada blog juga berfungsi untuk menambah berbagai widget iklan pada halaman homepage blog kita.

Berikut CarA Membuat Sidebar Kiri Pada Blogspot.

(Jangan lupa back up template terlebih dahulu)Jika terjadi kegagalan tidak merusak template kalian.

Login di akun Blogger kalian==>dashboard==>klik rancangan==>lalu klik edit HTML==>jangan lupa centang expand widget..

  
Cari kode CSS Outer Wrapper.

Lalu COPY kode di bawah ini dan taruh tepat di bawah kode CSS #sidebar wrapper.

        #newsidebar-wrapper {
        width: 200px;
        float: left;
        padding-right:10px;
        word-wrap: break-word;
        overflow: hidden;
        }

Keseluruhan kodenya jadi seperti ini :

        /* Outer-Wrapper
        ----------------------------------------------- */
        #outer-wrapper {
        width: 840px;
        margin:0 auto;
        padding:10px;
        text-align:left;
        font: $bodyfont;
        }

        #main-wrapper {
        width: 420px;
        float: left;
        padding: 5px;
        border:1px solid $bordercolor;
        background-color:#c77c7c;

        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 */
        }

        #sidebar-wrapper {
        width: 200px;
        float: right;
        padding: 5px;
        border:1px solid $bordercolor;
        background-color:#c77c7c;

        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 */
        }

        #newsidebar-wrapper {
        width: 200px;
        float: left;
        padding-right:10px;
        word-wrap: break-word;
        overflow: hidden;
        }
Keterangan:
Outer wrappernya yg tadinya 660px diubah jadi 840px; main wrapper     tadinya 410px diubah jadi 420px; sidebar wrapper dari 220px jadi 200px.
bisa kalian sesuaikan ukuran nya sesuai template kalian.

Perhatikan juga float and padding yang warna merah,jangan kebalik right/leftnya.

Langkah berikut nya copy kode dibawah ini.
Kemudian letakan sebelum kode <div id='main-wrapper'>

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

Keseluruhan kodenya jadi seperti ini :

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

        <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Blog Post'  type='Blog'/>
        </b:section>
        </div>

        <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
        <b:widget id='BlogArchive1' locked='false' title='Blog Archives' type='BlogArchive'/>
        </b:section>
        </div>

Langkah terakhir Save Template.