Masuk pada Dasboard Blogger klik Layout > Template > Edit HTML. Downloadlah dahulu template anda, kemudian jangan contreng Expand Template Widget (biarkan saja). Cari kode seperti berikut ini :
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
Masukkan di atasnya kode berikut ini :
<div id="newsidebar-wrapper">
<b:section class="sidebar" id="newsidebar" preferred="yes">
</b:section></div>
Scrol ke bagian CSS-nya. Cari kode seperti ini :
#sidebar-wrapper {
width: 220px;
float: right;
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 */
}
Di bawahnya masukkan kode ini :
#newsidebar-wrapper {
width: 220px;
float: right;
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 */
}
Tugas kita sekarang merubah nilai lebar, margin dan float-nya. yang pertama rubah nilai WIDTH dari OUTER-WRAPPER -nya menjadi WIDTH : 80%; ( selalu ingat di tutup dengan titik koma).
#outer-wrapper {
width: 80%;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
Yang Kedua rubah nilai WIDTH dari MAIN-WRAPPER -nya menjadi WIDHT : 55%; dan tambahkan pula sintax Margin left nilainya sekitar 2% cukup. yaitu : Margin-left: 2%; jadi bila di bandingkan dengan kode asli-nya kode perubahannya seperti di bawah ini :
#main-wrapper {
width: 55%;
margin-left:2%;
float: left;
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 */
}
Sekarang tinggal tersisa 45% lagi, yang dibagikan untuk kedua sidebar. terserah mau nilai sidebarnya sama atau berbeda, yang jelas mesti ada sisa buat nilai marginnya. Jadi kalau mau sidebar keduanya sama berarti nilainya sekitar 20%. dan sisanya yang 5% untuk nilai margin. Yang ketiga merubah nilai WIDHT dan menambah Margin left dari SIDEBAR-WRAPPER menjadi seperti di bawah ini :
#sidebar-wrapper {
width: 20%;
margin-left:2%;
float: right;
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 */
}
Yang ke empat NEW SIDEBAR-WRAPPER atau Sidebar Baru. Sidebar ini yang mesti dirubahnya adalah nilai WIDHT dan juga merubah nilai FLOAT nya menjadi Left. jadi WIDHT:20%; , Float:Left; Seperti di bawah ini :
#newsidebar-wrapper {
width: 20%;
float: left;
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 */
}
Pekerjaan terakhir ialah merubah bagian HEADER-WRAPPER -nya menjadi WIDTH :100%;
#header-wrapper {
width:100%;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Dan begitu juga bagian FOOTER-nya sama WIDTH:100%;
#footer {
width:100%;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Selesai, tinggal simpan template anda dan masuk ke Elemen Halaman lihatlah perubahan yang terjadi.