di sini kita akan menambah kolom blog kita menjadi 3,dari berbagai alasan para blogger ingin menambah kolom blognya menjadi 3 kolom,di sini di tuliskan 2 cara penambahan kolom yaitu di sebelah kanan dan kiri kolom posting.yang pertama di sebelah kanan dulu...
pertama tama beckup dulu template anda untuk mengantisipasi kesalahan cara masuk ke template>>>>Edit HTML>>>>klick download full template.setelah selesai baru kita mulai.
jangan lupa centeng dulu kotak kecil yang ada di kanan atas (widget)
kemudian cari kode di bawah ini (untuk memudahkan mencarinya tekan Ctrl+f lalu ketik namaa yang anda cari)oh iya ini untuk blog beta lo ya...
#outer-wrapper {
width: 660px;
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;
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 */
}
|
gimana...!!udah ketemu pastinya..kode di atas merupakan 1 sidebar-wrapper saja.sekarang kita tambahkan sidebar baru dan untuk memaksimal kan panjang dan lebarnya pun kita harus ganti seperti di bawah ini
#outer-wrapper
{
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 400px;
margin-left: 25px;
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: 150px;
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 */
}
#newsidebar-wrapper {
width: 150px;
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 */
} |
nah kemudian karna sudah menambah sidebar baru maka body dan layout nya pun harus kita tambah...cara seperti di bawah
/** Page structure
tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
body#layout #outer-wrapper {
width: 750px;
} |
nah sekarang sisa peletakannya kalau mau meletakkannya di sebelah kanan copy kode yang berwarna merah di bawah ini di atas
sepertin di bawah ini
<div
id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div> |
nah kalau mau meletakkannya di sebelah kiri liat di bawah ini
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div> |
yang terakhir sisa merubah nilai
#header-wrapper
{
width:660px; |
#footer {
width:660px; |
menjadi....
#header-wrapper
{
width:750px; |
#footer {
width:750px; |
kemudian silahkan anda liat hasilnya...
selamat mencobaa..
+
+
0 komentar:
Post a Comment