Membuat Template Blogspot Bagian 2 (Outer Wrapper)

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 */

}

#outer-wrapper { /* disini nanti kode css untuk outer wrapper */

}

3. Kalau sudah kemudian ganti dengan kode dibawah ini

* {
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;
}

Keterangan :
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

Outer-Wrapper

• 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.

Selanjutnya ke tutorial bagian 3 Header >>

Share this post