Membongkar Template Blogger

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

simple template

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

klik untuk memperbesar

Template ini sudah dimodifikasi dari simple template. Sekarang terang bahwa background-background tersebut terpisah satu sama yang lain. Pada referensi gambar terdapat 4 kepingan background tapi
bahwasanya ada 5 sebab satunya saya buat transparan ( nanti akan saya tunjukkan ).

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




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

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

Selanjutnya untuk mengganti background no.2 cari isyarat CSS:


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

Sama dengan cara pertama ganti pada background-color ganti isyarat 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
- laba memakai template bawaan yaitu blog terbebas dari script-script tak dikenal
- blog menjadi lebih ringan dan cepat sehingga orang nyaman membuka tiap halaman

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

screenshot:

Tips!: klik untuk memeperbesar

Copy paste halaman web/blog Anda kemudian ANALYZE
nanti akan muncul menyerupai ini :

Tips!: klik untuk memperbesar

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