TIPS MENGUBAH BLOG MENJADI 3 KOLOM




DONATION FOR THIS BLOG

paypal donation for this blog

Pada kesempatan ini, saya akan memberikan tips mengubah blog 2 kolom menjadi 3 kolom. Kamu bisa melihat contohnya pada gambar diatas atau pada blog ini. Caranya tidak sulit kok, silahkan baca tutorial dibawah ini :
Pertama sekali, kamu harus sign in terlebih dahulu. Lalu, kamu pilih menu tata letak, dan klik edit HTML, jangan lupa di contreng kotak kecil Expand Widget.
Kemudian kamu cari kode seperti ini pada template kamu :

#sidebar-wrap {
width:240px;
float:$Startside;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}


Kemudian kamu sisipkan kode dibawah ini, tepat dibawah kode di atas :

#sidebar-wrap {
width:240px;
float:left;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}


Sehingga akan menjadi seperti di bawah ini :

#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}


#left-sidebar-wrap {
width:240px;
float:left;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}



Lalu, cari kode #Header-wrapper {
width:
680px;

dan #outer-wrapper {
width:
680px;


Pada value atau angka yang berwarna pink tersebut, kamu ubah menjadi 940;

Kemudian kamu cari kode berikut :

<div id='main-wrap1'><div id='main-wrap2'>


Kemudian kamu sisipkan kode dibawah ini, tepat diatas kode tadi :

<div id='left-sidebar-wrap'>

<b:section class='sidebar' id='left-sidebar' preferred='yes'/>


</b:section>
</div>


Dan akan menjadi seperti kode dibawah ini :

<div id='left-sidebar-wrap'>

<b:section class='sidebar' id='left-sidebar' preferred='yes'/>


</b:section>
</div>
<div id='main-wrap1'><div id='main-wrap2'>


Setelah semua langkah-langkah diatas selesai, lalu kamu tekan menu SAVE.
Selanjutnya kamu klik menu Tata Letak dan lihat, jika berhasil akan ada menu baru Tambah Widget diatas menu edit Postingan.

Selamat Mencoba.




SEBELUM MENINGGALKAN KOMENTAR, SILAHKAN ISI FORMULIR BERIKUT. INI BERGUNA UNTUK MENGHASILKAN BACKLINK OTOMATIS UNTUK BLOG ATAU WEBSITE KAMU. TERIMAKASIH.

Loading...
 

SEKEDAR INGIN NGEBLOGGING Copyright © 2012-2013 | Powered by Blogger