Senin, 26 April 2010

membuat blog 1 kolom menjadi 2 kolom

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,,!

Tidak ada komentar:

Posting Komentar