1. Mulakan kemasukan ke bahagian Blogger dengan masukkan Kata Pengguna dan Kata Laluan.
2. Seterusnya, pilih 'Layout' dan klik pada 'Edit HTML'
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper
{
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper
{
width: 410px;
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 */
}
#sidebar-wrapper
{
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan juga biar ada jarak sela */
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 */}
Seterusnya tambah skrip berikut pada bahagian bawah skrip di atas.
#newsidebar-wrapper
{
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
Penambahan yang diletakkan di atas akan memperlihatkan kewujudan kolum bahagian kiri. Untuk mengubah kedudukan kolum berada pada bahagian kanan lakukan perubahann seperti berikut;
#newsidebar-wrapper
{
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
Perubahan hanya dilakukan pada bahagian yang berwarna biru sahaja.
5. Seterusnya klik pada butang "Save The Template"
6. Seterusnya, pergi ke bahagian bawah body dan masukkan skrip berikut:
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='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'/>
</div>
Now, if you want to place the new sidebar in the left side, then you have to move that sidebar code above the main code (posting). The whole codes will look like the following:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='ye'/'>
</div><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>
Remember to click save template after finishing it. Finally, view the result…..what do you think? do you like your new template? I think so.
It is easy, isn’t it? Hopefully you understand my explanation and if you want to see the sample blog with the sidebar in the left and right, you can see it here.
