Mar 29, 2010

Tiga Kolom Template Minima Dark Blogger

Panduan bagaimana menjadikan template Minima Dark dari Blogger tiga (3) kolom.

Log masuk ke dalam papan pemuka Blogger in Draft.

Pilih Layout | Edit HTML:


Tandakan kotak Expand widget templates:


Dalam kod template bahagian Header cari kod CSS berikut:

/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Pinda width:660px; jadi width:880px; seperti berikut:

#header-wrapper {
width:880px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Kemudian dalam bahagian Outer-Wrapper cari kod berikut:-

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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: $endSide;
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 */
}

Pinda width: 660px; jadi width: 880px;. Copy kod #leftsidebar-wrapper warna merah di bawah, paste masukkan di bawah #sidebar-wrapper seperti berikut:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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: $endSide;
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 */
}


#leftsidebar-wrapper {
width: 220px;
float: $startSide;
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 */
}

Cari bahagian Footer-Wrapper seperti berikut:

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Pinda width:660px; jadikan width:880px; seperti berikut:

/* Footer
----------------------------------------------- */
#footer {
width:880px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Kemudian dalam bahgian body kod template blog cari kod warna biru, copy kod #leftsidebar-wrapper warna merah, paste masukan di antar dua kod warna biru seperti berikut:

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>

<div id='leftsidebar-wrapper'>
<b:section class='sidebar' id='leftsidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'>
<b:includable id='main'>
<div class='widget-content'>
<a href='http://www.blogger.com'><img alt='Powered By Blogger' expr:src='data:fullButton'/></a>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</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:includable id='main' var='top'>

Sebelum SAVE kod template di atas sila protonton (Preview) terlebih dahulu. Jika blog boleh dibuka dan kedudukannya sempurna baru klik SAVE template tiga kolom ini.

Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://calipso-tutorialblogger.blogspot.com/.

Salam hormat dari

0 comments:

Post a Comment