Info Harga Komputer dan Gadget

membuat template Blogspot : style wrapper

Advertisement
advertisement
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.....
advertisement

1 comment:

Adhee Ichwank said...

sangat berguna gan.... keep posting, kami selalu menanti ilmu agan :hammers lebay ane :D

Post a Comment

Blog Ini Dofollow Ya bro tapi jangan nyepam komentar secara bijak dan sesuai dengan postingan