Membuat Template Blogspot Bagian 2 (Outer Wrapper)
Saturday, March 12, 2016
Add Comment
Tutorial dibawah ini merupakan kelanjutan dari Tutorial Mmebuat Template Blogspot Bagian 1 jika belum mengikuti bagian 1 yaitu Bagian Dasar Template silahkan masuk ke Bagian 1.
Setelah kemarin memposting Artikel membuat template blogspot bagian 1 sekarang saya lanjutkan tentang membuat template blogspot untuk bagian 2, pada bagian 2 ini akan membahas penentuan tampilan pada bagian body dan Outer Wrapper, dimana body akan menentukan keseluruhan isi blog nantinya :
1. Sekarang masuk ke Edit HTML blog kamu caranya :
- Klik Blog Yang Dibuat
- Klik Template
- Klik Edit HTML
- Akan muncul sebuah peringatan dalam kotak kuning klik saja Proceed / Lanjutkan
- Maka akan terlihat kode HTML template blog kamu.
2. Kalau sudah hapus kode berikut :
body { /* disini nanti kode CSS untuk body */3. Kalau sudah kemudian ganti dengan kode dibawah ini
}
#outer-wrapper { /* disini nanti kode css untuk outer wrapper */
}
* {Keterangan :
margin:0;
padding:0;
border:none;
vertical-align:baseline;
outline:none;
}
.clear {clear:both;}
a:active {outline:none;}
a:focus {moz-outline-style:none;}
body {
background:#FFF;
font-size:13px;
font-family:Arial;
margin:0;
padding:0;
}
a {color:#0378B2;text-decoration:none;}
a:hover {color:#0378B2;text-decoration:underline;}
a:visited {color:#084B8A;text-decoration:nounderline;}
a img {border-width:1px; color:#EAEAEA;}
/* OUTER WRAPPER
==================================================== */
#outer-wrapper {
width:960px;
margin:0 auto;
padding:0;
}
Body :
- Background warna #FFF yaitu putih kamu bisa menggantinya dengan warna lain
- Ukuran font 13px dengan jenis font Arial (kamu juga bisa menggantinya dendan font yang kamu inginkan misalnya 12px atau 14px dan Arial bisa diganti misalnya Tahoma, Georgia dll.)
- a {color:#0378B2;text-decoration:none;} ini menentukan warna link dasar
- a:hover {color:#0378B2;text-decoration:underline;} ini menentukan karakter Link ketika disorot
- a:visited {color:#084B8A;text-decoration:nounderline;} ini menentukan karakter Link yang sudah dikunjungi
- a img {border-width:1px; color:#EAEAEA;} ini menentukan karakter sebuah Link gambar
- Width:960px : memiliki ukuran lebar 960px kamu bisa merubahnya nanti ingat (perubahan ini akan mempengaruhi elemen yang lain jadi kalau ingin merubah lebar Outer-wrapper harus merubah juga elemen yang lain)
- margin:0 auto : maksudnya margin atau jarak luar akan ditentukan secara otomatis berarti posisi tampilan akan tepat berada ditengah-tengah karena auto bersifat adil.
0 Response to "Membuat Template Blogspot Bagian 2 (Outer Wrapper)"
Post a Comment