Membuat Sidebar Baru Sebelah Kiri

Tertarik dengan komentar sobat Sabirinnet yang menanyakan cara Membuat Sidebar Baru Sebelah Kiri dalam komentarnya dipostingan Membuat Sidebar Dua Kolom katanya begini : ” Punya saya kan sidebarnya hanya disebelah kanan, bagaimana untuk nambah ke sebelah kiri bang?? “ gitu katanya. Pusing juga… karena memang belum pernah lakuin yg ntu hehe.. tapi untuk tidak ngecewakan sekaligus sebagai bentuk tanggung jawab moral (duuiiileee narsisnya… ) maka dengan ini saya coba aja posting tentang cara Membuat Sidebar Baru Sebelah Kiri , dengan ini pula saya nyatakan bahwa artikel ini esensi dan substansinya hasil copas mentah2 dari blognya sobat My Learning Days, saya sih cuma ubah redaksional dikit2.

Langsung meluncur ke Cara Membuat Sidebar Baru Disebelah Kiri yang dilakukan oleh sobat tersebut, langkahnya seperti ini :

1. Login di Blogger atau Dashboard
2. Klik Layout >> Edit HTML (nggak usah nyentang expand HTML nya ya.. n jangan lupa Backup dulu..)
3. Liat di bagian Outer Wrapper, tambahkan kode di bawah ini tepat di bawah bagian #sidebar wrapper.

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

4. 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;
   }

5. Outer wrappernya yg tadinya 660px diubah jadi 840px; main wrapper tadinya 410px diubah jadi 420px; sidebar wrapper dari 220px jadi 200px.  Perhatikan float and padding yang warna pink ya, jangan kebalik right/leftnya.
6. Kemudian lihat di bagian bawah, tambahkan kode di bawah ini sebelum kode <div id='main-wrapper'>

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

7. 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>

8. Save Template
9. Selesai, kita telah Membuat Sidebar Baru Sebelah Kiri, selanjutnya berdoa... Mudah2an gak amburadul, ... soalnya saya juga belum praktek nih.. hihihi.. 

    

Postingan sejenis : Cara Membuat Kolom Tambah Gadget di Bawah Header , cara Buat Footer Multi Kolom  , Cara Membuat Sidebar Dua Kolom 

 

Source : My Learning Days , makasih sobat atas artikelnya.