Nambah Sidebar Baru Di Sebelah Kiri

Template blogku yang Ningtyas itu dulu cuma 2 kolom, sidebarnya di kanan.. Sekarang udah jadi 3 kolom.. Dulu pas ngutakatik sampe stress, ribet cari2 tutorial yang ngajarin cara menambah sidebar baru.. Akhirnya sukses deh, walau sempet mau nangis, awal2nya jadinya kok meletot2 nggak karuan.. Hehe..

Buat nambahin sidebar baru disebelah kiri, dulu aku ambil tutorial dasarnya dari blognya Kang Rohman, nuhun ya Kang..

Langkah2nya gini nih..

• 1. Login di Blogger
• 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 kuubah jadi 840px; main wrappernya yg tadinya 410px kuubah jadi 420px; sidebar wrappernya yg tadinya 220px kuubah jadi 200px. Perhatikan float and padding yang warna kuning ya, jangan kebalik right/leftnya.
• 6. Kemudian liat 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. Berdoa yaa... Mudah2an gak amburadul, hihi..

PS: width nya outer, main n sidebar wrapper bisa disesuaikan sesuai keinginan.

Share on :

Tweet