//

Membongkar Template Blogger
Saturday, January 05, 2013

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.
Comments
10 Comments

Tips! Berkomentar : klik "Subscribe by email" untuk mengetahui balasannya.
Some HTML Alowed
  1. template yang ak cari cocok bgt seperti ini, thank sob

    ReplyDelete
    Replies
    1. sama-sama mas munif.semoga bermanfaat

      Delete
  2. Berkunjung......Salam mas

    ReplyDelete
  3. pemilihan warna background juga mempengaruhi .

    ReplyDelete
    Replies
    1. Halo mas adi piye kabare? jogja ngendi mas

      Delete
  4. ini aslinya template bawaan blogger ya kak . tapi kok bagus ya.

    ReplyDelete
    Replies
    1. Makasi... Batul sekali ini adalah template bawan blogspot, "simple template" sedikit utak atik CSS pada background dan widget semuanya bisa diterapkan dengan mudah

      Delete
  5. mantab gan,
    mampir juga d http://ruang-art.blogspot.com

    ReplyDelete
    Replies
    1. oke sob tunggu saya di blognya

      Delete
  6. makasih gan tutorialnya , blog saya juga hampir sama seperti kamu... hehehe :)

    ReplyDelete