Cara Membuat Elemen Halaman Tiga Kolom

Cara Membuat Elemen Halaman Tiga Kolom - kali ini saya akan menjelaskan  Cara Membuat Elemen Halaman Tiga Kolom dan memang Setiap template pastinya memiliki elemen halaman yang berbeda jumlah dan letaknya. Elemen halaman cukup penting untuk sebuah template dan akan lebih bagus lagi jika lebih banyak, tetapi apabila terlalu banyak elemen halaman juga bisa membuat loading blog menjadi lama karena terdapat banyak kode cssdidalamnya, jadi sesuaikanlah elemen halaman tersebut sesuai kebutuhan.

Bagi anda yang ingin membuat elemen halaman tiga kolom pada template blogspot, caranya adalah sebagai berikut :

1. Login pada account blogger anda

2. Pada halaman dasbor pilih Tata Letak kemudian Edit Html

3. Carilah kode ]]></b:skin> (gunakanlah Ctrl + F untuk mempercepat pencarian) kemudian letakkan kode dibawah ini diatas kode tersebut.

/* -- bottom -- */

#bottom {
width:1000px;
clear:both;
margin:0 auto;
float:left;
padding:10px 0;
color:#333;
background:#ffffff;
border-top:#ffffff;
border-bottom:#ffffff;
}

#bottom a:link {
color:#006699;
text-decoration:none;
}

#bottom a:hover {
color:#c06000;
text-decoration:underline;
}

#bottom a:visited {
color:#808080;
text-decoration:none;
}

#bottom h2 {
color:#000000;
padding:10px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #333;
font-size:11px;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
}

#bottom ul {
padding:0;
margin:0;
color:#333;
}

#bottom ul li {
list-style-type:none;
border-bottom:1px dotted #333;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieseq3MjNvfrB4fbSvNq67h_Ie876P-rkSnd5xOj_YQOEUacmnomtIZlHqYX5GSYhxSgMazybrntOnMJTue-RteqQ5zxjD7VquzJxmJ1x8HzvLFmWuzvZabFaG6PxSFW2OyJln7oq6XTM/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px;
margin-top:2px;
}

#bottom1 {
width:300px;
float:left;
padding-left:15px;
}

#bottom2 {
width:300px;
float:left;
padding:0 20px 0 20px;
}

#bottom3 {
width:300px;
float:right;
padding-right:15px;
}

Catatan : 
Kode diatas bisa di edit sesuai dengan template dan keinginan anda seperti lebar footer, lebar header, lebar elemen halaman setiap kolom, warna latarbelakang, jenis tulisan dll.

4. Masih dihalaman Edit Html, langkah selanjutnya carilah kode seperti dibawah ini :

<div id='footer-wrapper'> (untuk membuat elemen halaman tiga kolom diatas footer)

<div id='main-wrapper'> (untuk membuat elemen halaman tiga kolom dibawah header)

5. Selanjutnya Letakkan kode dibawah ini persis diatas kode tersebut

<div id='bottom'>
<b:section class='bottom' id='bottom1' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>
<b:section class='bottom' id='bottom2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Buku Tamu' type='HTML'/>
</b:section>
<b:section class='bottom' id='bottom3' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Traffic Blog' type='HTML'/>
</b:section>
</div>

6. Simpan Template

Setelah mengikuti langkah-langkah diatas untuk membuat  Cara Membuat Elemen Halaman Tiga Kolom pada template blogspot dengan benar, klik tata letak untuk melihat apakah template anda sudah terdapat elemen halaman tiga kolom pada header dan footer