Ini adalah bagian kedua dari pembahasan kemarin cara membuat template sederhana dengan html dan css
Silahkan lihat strukturkode dasar untuk template blogger di bawah berikut :
<!DOCTYPE html>
<html>
<head>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'>
</b:section>
</body>
</html>
Struktur kode html di atas itu pun sudah jadi dan bisa di upload lewat blogger , akan tetapi kode diatas masih terlihat sederhana artinya belum jadi dan tata letak pun masih terlihat dasar alias menurun datar ke bawah .
Nah di bagian ini kita coba membuat tata letak untuk template blogger tersebut dengan menambahkan header , dan sidebar
Caranya menambahkan bagian section header dan section sidebar ,singkat saja kode akhir jadi seperti ini
<!DOCTYPE html>
<html>
<head>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<b:section class='header' id='header' showaddelement='yes'>
</b:section>
<b:section class='main' id='main' showaddelement='yes'>
</b:section>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
</b:section>
</body>
</html>
Strukturkode rangkaian di atas meliputi 3 bagian yaitu header ,main, dan sidebar silahkan tes terlebih dahulu upload lewat blogger
Nah mungkin hasilnya akan sama yaitu posisi mendatar kebawah tata letak belum di atur
Selanjutnya untuk membuat tata letak template tersebut teratur kita coba dengan menambahkan (div) id dan css pada template tersebut
Penambahan htmlnya :
<div id='wrapper'>
<div id='header-wrapper'>
</div>
<div id='main-wrapper'>
</div>
<div id='sidebar-wrapper'>
</div>
</div>
Sehingga kode akhir seperti di bawah berikut :
<!DOCTYPE html>
<html>
<head>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<div id='wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
</b:section>
</div>
</div>
</body>
</html>
Silahkan tes terlebih dahulu upload lewat unggah ganti tema di blogger , ! Hasilnya akan tetap sama masih mendatar kebawah
Tetapi kita sudah menambahkan id pada setiap bagian kelas tersebut , cermati sebelumnya <div id='wrapper'> adalah tanda atau di gunakan untuk pembungkus id ke dua ketiga dan dan ke empat tanda akhir div dari wrapper di simpan di bagian akhir id ke dua ketiga dan ke empat
div tidak memengaruhi apa-apa pada template tetapi div merupakan kode html pembuka yang di gunakan
Sekarang kita coba tambahkan css untuk bagian id tersebut dengan tanda atau di simpan di bagian skin template tersebut :
Kita coba tambahkan lebar dan posisi
Contoh struktur kode akhirnya bisa di lihat di bawah berikut :
<!DOCTYPE html>
<html>
<head>
<b:skin><![CDATA[
/* Template Name
Template Dasar */
#wrapper {width:800px;
}
#header-wrapper{widt:800px;}
#main-wrapper{float:left;
width:450px;
}
#sidebar-wrapper {float:right;
width:270px;
]]></b:skin>
</head>
<body>
<div id='wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
</b:section>
</div>
</div>
</body>
</html>
Silahkan tes terlebih dahulu dengan menggunakan strutur dasar kode tersebut