membuat template Blogspot : style wrapper

masih dengan edikomputer sebelum membca artikel ini harap membaca pada tutorial sebelumnya agar tidak terjadi kesalahan pada saat memasukan kode dan lain sebagainya.

wrapper merupakan pembatas blog dimana kita bisa ukuran konten blog kita, nah disinilah nantinya kita akan menempatkan post artikel widget / sidebar untuk lebih jelasnya lihat gambar dibawah ini

Keterangan :

warna ungu : merupakan area body
warna merah : merupakan bagian wrapper
warna biru : merupakan area header
warna hijau : merupakan area konten post/ artikel
warna kuning; merupakan area sidebar/ widget
warna hitam : merupakan area footer

Dari uraian di atas tentu kmu sudah mengerti area-area yang akan kita kerjakan dan template ini bisa kamu modif sesuai kinginan dan tentu akn kita bahas pada sesion berikutnya

oke kembali ke topik yaitu kita akan membuat wrapper atau pembatas area antara body dan konten berarti kita akan mengedit bagian yang berwarna merah oke kita akan langsung membuat selector untuk wrapper

cari kode :

]]></b:skin>

Copy kode berikut di atasnya :

#wrapper{
background:#fff;
border:1px solid #999;
margin:0 auto;padding: 10px 0 10px 0;
width:900px;
}

Keterangan :

#wrapper : merupakan selector id yang nantinya akan kita panggil untuk menampilkannya secara visual
background:#fff; : merupakan pengaturan dari id wrapper yang akan menampilkan warna background disini saya menggunakan warna putih
border:1px solid #999; : merupakan garis batas wrpper agar kita bisa mengetahui pembtasnya
margin:0 auto;padding: 10px 0 10px 0; ; merupakan jarak antara atas, bawah, kanan dan kiri dan saya memberi jarak 10 px
width:900px; : merupakan lebar dari wrapper nah disinilah konten tersebut di batasi dan saya memberi ukuran 900px

save dulu templatenya.
kok nggak ada perubahan? he..he.. nanti dulu sekarang kita akan memanggil selector wrapper ke html

cari kode

<body>

kalo sudah ketemu paste kode ini di bawahnya :

<div id='wrapper'>

dan terakhir jngan lupa berkan penutup di atas kode

</body>

ini kodenya :

</div>

save dan lihat hasilnya.....

Anda baru saja membaca artikel yang berkategori template blogger dengan judul membuat template Blogspot : style wrapper . Anda bisa bookmark halaman ini dengan URL http://sisatruk.blogspot.com/2012/05/membuat-template-blogspot-style-wrapper.html .

Iklan

membuat template Blogspot : style wrapper

Artikel Terkait template blogger

Belum ada komentar untuk " membuat template Blogspot : style wrapper "

Post a Comment