Jumat, 07 Agustus 2009

Cara Membuat Blog 5 Kolom Seperti di Blog Ini

Anda penasaran dengan template 5 kolom di sini? Saya akan sajikan pemaparan bagaimana cara membuatnya.

O, ya. Sebelumnya saya ingin berterima kasih kepada Kang Rohman yang telah memberikan triknya.

Pertama-tama anda harus membuat blog baru dengan Template Minima sebagai percobaan. karena Template Minima notabene tidak menggunakan gambar.

Lalu ikuti langkah-langkah berikut:

1. Login ke Blogger dengan Akun Google anda.

2. Lalu klik Pengaturan > Edit HTML.

3. Ingat! Jangan mencentang kotak Expand Template Widget!

4. Lalu cari kode berikut ini.


#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}
#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 */
}


5. Lalu hapus dan ganti dengan kode berikut:


#outer-wrapper {
width: 1050px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}
#sidebarbaru-wrapper {
width: 175px;
float: right;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
#sidebarbaru2-wrapper {
width: 175px;
float: right;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
#main-wrapper {
width: 300px;
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 */
}
#sidebar-wrapper {
width: 175px;
float: left;
padding-left:10px;
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 */
}
#sidebarbaru3-wrapper {
width: 175px;
float: left;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}


6. Cari kode berikut ini.


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<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:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
</b:section>
</div>


7. Lalu hapus dan ganti dengan kode berikut ini:


<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Langganan RSS Feed' type='Subscribe'/>
</b:section>
</div>

<div id='sidebarbaru2-wrapper'>
<b:section class='sidebar' id='sidebarbaru2' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<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:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
</b:section>
</div>

<div id='sidebarbaru3-wrapper'>
<b:section class='sidebar' id='sidebarbaru3' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>


8. Cari kode berikut ini:


#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #cccccc;
}


9. Lalu hapus dan ganti dengan kode berikut ini:


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


10. Cari kode berikut ini:


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


11. Lalu hapus dan ganti dengan kode berikut ini:


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


12. Lalu lanjutkan dengan simpan template.

Langkah selanjutnya adalah klik menu Elemen Halaman. Kalau sudah ada 5 kolom, tambahkan gadget apa saja ke dalamnya.

Apabila ada pertanyaan, jangan sungkan-sungkan untuk berkomentar.

Tidak ada komentar:

Posting Komentar