Cara Merubah Template 2 kolom menjadi 3 kolom (2)
Setiap template di Blogger mungkin memiliki kolom berbeda-beda tergantung jenis template yang digunakan. Namun ketika kita memilih sebuah template yang kolomnya tersedia hanya untuk beberapa kolom saja, kadang butuh beberapa cara agar kolom template tersebut bisa di desain sesuai kebutuhan kita.
Berikut ini ada cara untuk mengganti template 2 kolom menjadi 3 kolom. Bagaimana cara menggantinya?
Cara Mengganti Template 2 kolom menjadi 3 kolom:
- Login ke akun Blogger
- Pilih Template >> Edit HTML
- Cari kode yang mirip dengan kode seperti ini karena setiap template berbeda beda kode htmlnya #wrapper (gunakan ctrl F agar lebih mudah mencarinya)
- Kemudian cari kode yang mirip seperti ini:
#sidebar (gunakan ctrl+F untuk lebih mudah mencarinya) - Lalu copy-paste kode berikut ini di bawah kode no 4 di atas:
- Selanjutnya cari kode yang mirip dengan kode berikut ini:
<div id='sidebar'> (gunakan ctrl+F untuk lebih mudah mencarinya) - Copy-paste script berikut ini tepat dibawahnya :
- Simpan Template. Cek Tata Letak apakah kolomnya sudah bertambah atau belum.
-------------------------------------Ganti angka yag berwarna Biru menjadi 950
#wrapper {
background:#97C03E; font-size:12px; margin:0px auto 0px; width:660px;
-----------------------------------
--------------------------------Ganti angka yang berwarna Biru menjadi 250
/* Sidebar */
#sidebar {
float:right; width: 230px; margin:0; padding:0;
}
#sidebar-wrapper {
padding:0; margin:10px;
overflow:hidden;
word-wrap:break-word
}
#sidebar h2, #sidebar h3 {
font-size: 15px;
color: #FFF;
text-align: left;
background: none repeat scroll 0% 0% #62AC53;
padding: 3px;
border-width: 1px;
border-style: solid;
border-color: #4C7944;
margin: 0px;
}
--------------------------------
------------------------------------------
/* Sidebarbaru */
#sidebarbaru {
float:left; width: 250px; margin:0; padding:0;
}
#sidebarbaru-wrapper {
padding:0; margin:10px;
overflow:hidden;
word-wrap:break-word
}
#sidebarbaru-wrapper-bottom {
padding:0; margin:10px;
overflow:hidden;
word-wrap:break-word
}
#sidebarbaru h2, #sidebarbaru h3 {
font-size: 15px;
color: #FFF;
text-align: left;
background: none repeat scroll 0% 0% #62AC53;
padding: 3px;
border-width: 1px;
border-style: solid;
border-color: #4C7944;
margin: 0px;
}
--------------------------------
--------------------------------
<div id='sidebar'>
<b:section class='sidebar' id='sidebar-wrapper' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>---</b:includable>
</b:widget>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>---</b:includable>
</b:widget>
</b:section>
<div class='clear'/>
</div>
--------------------------------
--------------------------------
<div id='sidebarbaru'>
<b:section class='sidebarbaru' id='sidebarbaru-wrapper' preferred='yes'>
</b:section>
<div class='clear'/>
</div --------------------------------
Join the conversation