Thursday, May 10, 2012

Membuat Elemen Halaman Tiga Kolom

Artikel kali ini zona klik akan coba sharing kepada anda cara design template yaitu membuat elemen halaman tiga kolom pada blogspot. 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 css didalamnya, 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("http://lh3.ggpht.com/_w3vbLlHM5kg/SbaWQmXKL8I/AAAAAAAAAEc/W7TmnpAs0x4/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 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 (sesuai pilihan anda) seperti gambar dibawah ini :

Jika sudah muncul elemen halaman tiga kolom, pergunakanlah elemen halaman tersebut untuk memasukkan widget dan sebagainya agar blog anda terlihat lebih menarik.

No comments:

Post a Comment