Membuat Sidebar Baru Sebelah Kiri

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

Artikel Terkait