Minggu, 25 April 2010

Cara Merubah Template 2 kolom Menjadi 3 Kolom

Buat kamu yang masih menggunakan Template default dari blogspot,Kali ini saya punya tips nich...bagaimana Cara Merubah Template 2 kolom Menjadi 3 Kolom . Template dari blogspot hanya memiliki 2 kolom yang artinya 1 kolom untuk tempat dimana postingan kamu di tampilkan dan satunya lagi adalah sidebar blog kamu untuk menaruh aksesoris atau widget0widget blog kamu. Buat sebagian orang Kolom template yang hanya 2 kolom di rasa kurang.karena lain orang lain keinginan .hehehe langsung aja yuk kita praktek bagaimana Cara Merubah Template 2 kolom Menjadi 3 Kolom .silakan ikuti langkah-langkah berikut ini.

1.LOGIN ke Blogger .

2.Pada Bagian Dashboard Klik Tata Letak Kemudian Klik lagi Edit HTML

3.Selanjutnya klik Download Template Lengkap untuk mem Backup Template kamu.supaya jika nanti terjadi kesalahan kamu masih punya cadangan template.

4.Kalo udah Silakan kamu cari kode yang kaya di bawah ini.

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

5.Silakan kamu ubah dulu Angka 660px yang berwarna biru menjadi 950px.

6.Selanjutnya silakan kamu cari Kode yang kaya di bawah ini .

#sidebar-wrapper {
width: 220px;
float: $enSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}

7.Ubah kode yang angka 220px yang berwarna biru menjadi 250px.

8.Setelah itu Copy kode berikut kemudian Paste di bawah Kode Pada langkah (No.6)

#second-sidebar-wrapper {
width: 250px;
float: $startSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}

Sehingga Kodenya jadi seperti ini :

#sidebar-wrapper {
width: 250px;
float: $enSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}

#second-sidebar-wrapper {
width: 250px;
float: $startSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}

9.Selanjutnya cari kode berikut.

<div id="'main-wrapper'">
<b:section class="'main'" id="'main" showaddelement="'no'">
<b:widget id="'Blog1'" locked="'true" title="'Blog" type="'Blog'/">
</b:widget>
</b:section></div>
<div id="'sidebar-wrapper'">
<b:section class="'sidebar'" id="'sidebar'" preferred="'yes'">
<b:widget id="Profile2" locked="false" title="About Me" type="Profile">
<b:widget id="BlogArchive2" locked="false" title="blog Archive" type="BlogArchive2">
<b:widget id="followers2" locked="false" title="Followers" type="Followers">
</b:widget>
</b:widget></b:widget></b:section></div>

10.Kalo Udah Ketemu Copy dan Paste Kode berikut dibawahnya.

<div id='second-sidebar-wrapper'>
<b:section class='sidebar' id='second-sidebar' preferred='yes'/>
</div>

11.Silakan Klik Simpan template. dan silakan kamu lihat hasilnya ..sekarang template blog kamu sudah menjadi 3 kolom . yaitu 1 tempat postingan kamu berada dan 2 kolom lagi adalah sidebar blog kamu.

12.selamat mencoba..

2 komentar:

earthy moony mengatakan...

aduhh kkok notworking ya.. kira kira apa yang salah ??

Tjhaqiel's Blog mengatakan...

dah q coba bisa gan..
dicek lagi scriptnya..

Posting Komentar