Wednesday, February 17, 2010

cara membuat blog menjadi 3 coloumn

Berikut saya akan tunjukan bagaimana cara membuat blog menjadi 3 coloumn , langkah-langkahnya sebagai berikut :

• Masuk ke blogger account

• Pilih Layout dan Pilih lagi Edit HTML

• Back up blog kamu dulu , dan centang expand widget template

• Copy code di bawah dan letakkan sebelum tag </b:skin>



#footer-column-container {

clear:both;

}

.footer-column {

padding: 10px;

}



Contoh :



#credits { background: #93BBBC

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHmjiMlI9-b4YR-bGLEjQ7DfPUQmDrgtdnBRKbx5NlsOPljcEejYQE-qErg4uRtSVHiXcCMz7i3hJUq7_nxZ4dG9GMI0UwIQjKfcQNoQV781E1lJl_zPLxWGAYyFqucTSBjZaYQUEXRXw/s1600/topnav.png);

width: 960px; height: 30px; margin: 0; padding: 0; text-align: center;

}

#credits p { color: #FFF; font-size: 11px; font-family: Arial, Tahoma,

Verdana; margin: 0; padding: 9px 0 0;

}

#credits a, #footer a:visited { color: #FFF; text-decoration: none;

}

#credits a:hover { color: #FFF; text-decoration: underline;

}



#footer-column-container {

clear:both;

}

.footer-column {

padding: 10px;

}



]]></b:skin> </head> <body> <div id='wrap'>



• Simpan template kamu

• Sekarang cari kode di bawah ini



<b:section class='footer' id='footer'/>



• Ganti kode tersebut dengan kode di bawah ini



<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

<p>

<hr align='center' color='#5d5d54' width='90%'/></p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>

<b:widget id='Text2' locked='false' title='' type='Text'/>

</b:section>

</div>

<div style='clear:both;'/>

</div>


• Simpan dan selesai

Setelah semua anda lakukan dengan benar, coba klik pada Pratinjau apabila terjadi kesalahan, coba cek kembali apakah anda sudah mengetikkan kode diatas dengan benar.

Cukup sekian tips kali ini, semoga dapat membantu .
Label:

Blog Archive