1

Cara Membuat Blog 3 kolom pada Blogger

Posted in
Bagi anda yang menginginkan membuat blog 3 kolom tak perlu khawatir, karena template anda yang sekarang bisa anda modifikasi sendiri tanpa harus mengganti-ganti template. Karena penggantian template yang terlalu sering juga bisa membingungkan pengunjung tetap anda (fans) dan juga robot search engine.

membuat blog 3 kolom

Posting kali ini sebenarnya adalah request dari teman blogger beberapa waktu yang lalu yang menginginkan membuat blog 3 kolom. Beberapa template blog mungkin berbeda penamaan css templatenya, namun pada tutorial ini bloggerafif menggunakan template pada umumnya blogger gunakan. Tanpa perlu berbasa-basi, berikut ini cara memodifikasi atau membuat blog di blogspot 3 kolom :

1. Login ke blogger. Masuk ke design, lalu edit html. Jangan lupa backup terlebih dahulu template anda. Kemudian berikan centang pada expand widget template.

2. Tambahkan kode berikut sebelum kode ]]></b:skin>
#main-wrapper {
width: 433px;
padding:15px;
float: right;
display: inline;
word-wrap: break-word;
overflow: hidden;
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 0 0 3px #CCCCCC;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DDDDDD;
margin: 5px;
}
#sidebar-wrapper {
width: 225px;
float: right;
display: inline;
word-wrap: break-word;
overflow: hidden;
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 0 0 3px #CCCCCC;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DDDDDD;
margin: 5px;
}
#sidebar-wrapper2 {
width: 225px;
float: left;
display: inline;
word-wrap: break-word;
overflow: hidden;
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 0 0 3px #CCCCCC;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DDDDDD;
margin: 5px;
}
Jika nama id pada template anda adalah sama, silahkan anda tambahkan saja kode css dibawahnya ke dalam template yang sudah anda punya, pada id yang sama tersebut.

3. Cari kode <div id='content-wrapper'> kemudian letakkan kode <div id='main-wrapper'> sebelum kode akhir div content-wrapper.

4. Setelah kode akhir div dari main-wrapper, copykan kode berikut ini :
<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar10' preferred='yes'>
<b:widget id='HTML100' locked='false' title='TITLE WIDGET Fans' type='HTML'>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar11' preferred='yes'>
<b:widget id='HTML101' locked='false' title='TITLE WIDGET Fans' type='HTML'>
</b:section>
</div>
Sehingga susunan secara garis besar adalah seperti ini :
<div id='content-wrapper'>

<div id='main-wrapper'>
BLOG POST
</div>

<div id='sidebar-wrapper2'>
SIDEBAR KIRI
</div>

<div id='sidebar-wrapper'>
SIDEBAR KIRI
</div>

</div>
5. Selesai. Silahkan anda coba. Untuk kode yang berwarna merah, bisa anda sesuaikan sendiri dengan template anda, seperti warna, dan ukuran lebar template anda.

1 komentar: