Membuat Elemen Halaman Tiga Kolom

Membuat Elemen Halaman Tiga Kolom - Artikel kali ini http://www.infoint3rnet.com/ 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 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/AVvXsEi9tKd4iTcRdiVkQt2nKmPav199ElIrdPMCmQ0CRLqfcaIjn88GLmr-35DdG8KHcjtufwx3XQPzsOj-xEg32yo3aBtvAReIHxYvcapdrN6qJwEyUzTN9JtsGw1cxc6JmQuys3ilMs2LM9g/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 kolompada 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.

100out of 100 based on 99998 ratings. 1 user reviews.

100out of 100 based on 48499 ratings. 1 user reviews.

Anda Sedang Membaca Artikel Tentang Membuat Elemen Halaman Tiga Kolom dan Anda Bisa Menemukan Artikel Membuat Elemen Halaman Tiga Kolom Ini Dengan url http://myfiremedia.blogspot.com/2012/04/membuat-elemen-halaman-tiga-kolom.html, dan Terimakasih Sudah Membaca Artikel Membuat Elemen Halaman Tiga Kolom Dan Semoga Uraian dan Pembahasan Tentang Membuat Elemen Halaman Tiga Kolom Bermanfaat Untuk Anda.

Ditulis oleh: Portal Informasi - Rabu, 04 April 2012