expert manual

Browse » home» 2 » bagian » blogspot » membuat » outer » template » wrapper » Membuat Template Blogspot Bagian 2 Outer Wrapper

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