Kustomasi yang akan kita lakukan sehubungan dengan background ini meliputi, mengganti warna background, mengganti dan menentukan posisi image background. Namun untuk postingan kali ini, saya akan membahas kustomasi warna background terlebih dahulu.
Cara Ganti Warna Background Header Blog
Jika ingin mengganti warna background pada header, kita harus melakukan pengeditannya pada kode css yang biasanya dengan format seperti di bawah ini.
#header-wrapper {Catatan
background-color:#kode_html_warna;
……….
……….
}
- Untuk mendapatkan warna background pada header yang kita inginkan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
- Penamaan stylesheet untuk #header-wrapper mungkin berbeda antara satu template dengan template yang lainnya.
Pada contoh kasus ini (template Son of Moto), kita akan menemukan 2 (dua) kode css dengan format seperti ini.
#header-wrapper {
background: #8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) bottom $startSide repeat-x;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 15px;
padding-$startSide: 0;
border: 0;
}
#header h1 {
text-align: $startSide;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding-top: 15px;
padding-$endSide: 20px;
padding-bottom: 0;
padding-$startSide: 20px;
background-image: url(http://www.blogblog.com/moto_son/topper.gif);
background-repeat: repeat-x;
background-position: top $startSide;
}
Nah, untuk mengganti warna background header sesuai yang kita inginkan, misalkan warna hijau lumut (#0B610B), kita harus mengganti variable “background” pada kedua kode css di atas dengan kode “background-color:#0B610B” sehingga menjadi seperti di bawah ini.
#header-wrapper {MENGGANTI WARNA BACKGROUND PADA FOOTER
background-color:#0B610B;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 15px;
padding-$startSide: 0;
border: 0;
}
#header h1 {
text-align: $startSide;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding-top: 15px;
padding-$endSide: 20px;
padding-bottom: 0;
padding-$startSide: 20px;
background-color:#0B610B;
background-repeat: repeat-x;
background-position: top $startSide;
}
Jika menginginkan warna background pada footer yang berbeda, kita harus melakukan pengeditannya pada kode css-nya seperti di bawah ini.
#footer {Catatan
background-color:#kode_html_warna;
…………
…………
}
- Untuk mendapatkan warna background pada footer yang kita inginkan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
- Penamaan stylesheet untuk #footer mungkin berbeda antara satu template dengan template yang lainnya.
Pada contoh kasus ini (template Son of Moto), kita akan menemukan 2 (dua) kode css dengan format seperti ini.
#footer {
clear: $startSide;
margin: 0;
padding: 0 20px;
border: 0;
text-align: $startSide;
border-top: 1px solid #f9f9f9;
}
#footer .widget {
text-align: $startSide;
margin: 0;
padding: 10px 0;
background-color: transparent;
}
Nah, untuk mengganti warna background footer sesuai yang kita inginkan, misalkan warna hijau kekuningan (#BEF781), kita harus mengganti dan menambahkan variable “background” pada kedua kode css di atas dengan kode “background-color:#0B610B” sehingga menjadi seperti di bawah ini.
#footer {
background-color:#0B610B
clear: $startSide;
margin: 0;
padding: 0 20px;
border: 0;
text-align: $startSide;
border-top: 1px solid #f9f9f9;
}
#footer .widget {
text-align: $startSide;
margin: 0;
padding: 10px 0;
background-color: #0B610B;
}
Setelah selesai mengganti warna dengan kode html warna, kemudian simpan template dan pastikan tampilan warna background blog kita telah berubah menjadi seperti yang kita inginkan
. Meningkatkan kecepatan loading blog hanya di tujukan untuk para pengunjung, sebagaimana sifat dasar dari manusia. Mungkin istilah yang tepat untuk kasus ini yakni ''menunggu adalah pekerjaan yang membosankan'', ya begětulah manusia seperti kamu 
, kalau awak sendiri sangat percaya. Pada saat awak masih newbie yang sering gonta-ganti template pada blog awak yang lain sudah terbukti. Pada saat itu halaman yang sudah terindex sebanyak 77 halaman pada mesin pencari google dan pada mesin pencari yahoo sebanyak 24 halaman, namun pada lain waktu ingin mengecek seberapa banyak lagi halaman yang di index oleh kedua search engine diatas, apa yang terjadi? Yang terjadì malah berkurang tingkat indexnya, pada google setelah di cek tinggal 17 halaman pada yahoo tinggal 0 besar alias tidak ada yang ke-index, hadehh....!!!, setelah di pikir-pikir ulang apa yang telah awak lakukan? Dari segi