Nirez Chen blog: Membongkar Template Blogger

Pada tutorial kali ini saya akan batasi pada customize CSS background-background pada template bawaan blogger khususnya simple template. bisa dilihat pada gambar di bawah:

simple template

Sebenarnya pada simple template ini terbagi menjadi beberapa background, tapi karena semuanya dominan putih sehingga kita tidak bisa membedakan bagian-bagian tersebut. Sekarang coba lihat template berikut ini :

klik untuk memperbesar

Template ini sudah dimodifikasi dari simple template. Sekarang jelas bahwa background-background tersebut terpisah satu sama yang lain. Pada contoh gambar terdapat 4 bagian background tapi
sebenarnya ada 5 karena satunya saya buat transparan ( nanti akan saya tunjukkan ).

Perhatikan background no.1 untuk mengganti warna bagkground ini yang perlu Anda lakukan adalah masuk ke Edit HTML blog kemudian cari kode CSS :

.main-inner {
padding-top: $(main.padding.top);
padding-bottom: $(main.padding.bottom);
background-color:#dfeaed;
margin-top:5px;
}

Pada background-color ganti kode warna #dfeaed. Perlu saya jelaska kepada pembaca yang belum tahu kode #dfeaed merupakan kode warna pada web. Untuk mencari kode warna web yang lain Anda dapat mencarinya dengan mengunjungi tabel warna web atau lihat di situs: colorhexa.com.

Selanjutnya untuk menggantibackground no.2 cari kode CSS:

.main {
background-color:#ffffff;
padding:10px;
}

Sama dengan cara pertama ganti pada background-color ganti kode warna #ffffff

Background no.3 CSS :

.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid $(body.rule.color);
background-color:#ffffff;
width:300px;
}

Background no.4 CSS :

.post {
margin: 0 0 $(post.margin.bottom) 0;border:0px #ddd solid;padding:10px;
background-color:#e1f4f7;

}

Catatan :
- kemungkinan berbeda untuk template yang lain
- keuntungan menggunakan template bawaan adalah blog terbebas dari script-script tak dikenal
- blog menjadi lebih ringan dan cepat sehingga orang nyaman membuka tiap halaman

Untuk mengetahui kecepatan halaman saat dibuka. PageSpeed Insights dari google bisa membantu
kunjungi : https://developers.google.com/speed/pagespeed/insights

screenshot: