Membuat blog yang tadinya 1 kolom menjadi 2 kolom dan sidebar berada di samping kiri kanan seperti blog saya ini caranya seperti ini:
pertama anda cari kode seperti di bawah ini :
#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;
width:850px;
margin:0 auto;
text-align:$startSide;
font:$bodyfont;
}#main-wrapper {
width:400px;
float:$endSide;
padding:50px 0 10px;
font-size:85%;
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:2px;
float:left;
font-size:85%;
padding-bottom:20px;
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 {
background:url("http://www1.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:5px 5px 5px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#secondsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
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 */
}
#secondsidebar {
background:url("http://www1.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:5px 5px 5px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
setelah itu ganti kode berwarna biru tersebut menjadi seperti di bawah ini:
#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;
width:975px;
margin:0 auto;
text-align:$startSide;
font:$bodyfont;
}#main-wrapper {
width:450px;
float:$endSide;
padding:50px 0 10px;
font-size:85%;
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:255px;
float:left;
font-size:85%;
padding-bottom:20px;
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 {
background:url("http://www1.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:5px 5px 5px;
width:255px;
width/* */:/**/180px;
width: /**/180px;
}
#secondsidebar-wrapper {
width:265px;
float:right;
font-size:85%;
padding-bottom:20px;
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 */
}
#secondsidebar {
background:url("http://www1.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:5px 5px 5px;
width:265px;
width/* */:/**/180px;
width: /**/180px;
}
nah, langkah kedua supaya sidebar berada di sisi kiri dan kanan postingan/blog maka tempatkan kode di bawah ini di atas kode berikut :<div id='main-wrapper'>
<div id='secondsidebar-wrapper'>
<b:section class='sidebar' id='secondsidebar' preferred='yes'>
<<b:section>
</div>
maka hasilnya akan menjadi seperti ini :
<div id='secondsidebar-wrapper'>
<b:section class='sidebar' id='secondsidebar' preferred='yes'>
<<b:section>
</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>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
Selamat mencoba,,!
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar