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 mengganti background 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:

Tips!: klik untuk memeperbesar

Copy paste halaman web/blog Anda lalu ANALYZE
nanti akan muncul seperti ini :

Tips!: klik untuk memperbesar

Pada contoh ini PageSpeed Insights adalah 88. 
Keterangan: semakin besar skornya maka  halaman web/blog semakin cepat dibuka.