Cara Membuat Sidebar Kiri (left-sidebar)Pada Blogspot

Sunday, August 26, 2012

Cara Membuat Sidebar Kiri (left-sidebar)Pada Blogspot

Tutorial-Onlineku.Login di akun Blogger kalian=>dashboard=>klik rancangan=>lalu klik edit HTML=>Jangan centang expand widget agar kode pada blog anda tidak rumit.
Catatan:Tinjau dulu hasil tamplate anda sebelum di seve.

Cari kode CSS #Outer-Wrapper.

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

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

Sehingga keseluruhan kodenya seperti begini:

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

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.Dan lihat hasilnya sesuaikan semua ukuran sidebar lef,main-wrapper,right-sidebar pada tample anda.

Judul: Cara Membuat Sidebar Kiri (left-sidebar)Pada Blogspot ; Ditulis oleh Unknown; Rating Blog: 5 dari 5