Sabtu, 12 April 2025 //
Home » » » Membongkar Template Blogger

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.
Membongkar Template Blogger
Oleh : di Saturday, January 05, 2013
Rating Blog: 5 dari 5
Comments
12 Comments

Tips! Berkomentar : klik "Subscribe by email" untuk mengetahui balasannya.
Some HTML Alowed
  1. bang admin5.1.13

    template yang ak cari cocok bgt seperti ini, thank sob

    ReplyDelete
    Replies
    1. Doni5.1.13

      sama-sama mas munif.semoga bermanfaat

      Delete
  2. Inggristopsite5.1.13

    Berkunjung......Salam mas

    ReplyDelete
  3. Cah Ndesa9.1.13

    pemilihan warna background juga mempengaruhi .

    ReplyDelete
    Replies
    1. Doni9.1.13

      Halo mas adi piye kabare? jogja ngendi mas

      Delete
  4. Unknown9.1.13

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

    ReplyDelete
    Replies
    1. Doni10.1.13

      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. Akhsan11.1.13

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

    ReplyDelete
    Replies
    1. Doni3.3.13

      oke sob tunggu saya di blognya

      Delete
  6. Anggi20.3.14

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

    ReplyDelete
  7. Silvi_ariska21.6.18

    terima kasih...sangat membantu sekali.

    jangan lupa kunjungi website kami juga di http://www.atmaluhur.ac.id

    ReplyDelete
  8. lisatina7.10.18

    Untuk yang lagi galau, yang lagi bosan tidak tahu mau ngapain,
    tenang,,sekarang ada yang akan menghibur kalian sekaligus
    mengisi hari-hari kalian dengan games" online yang pastinya tidak akan
    mengecewakan kalian deh...

    yuk ikutan gabung bersama Pesonasaya.com
    Dapatkan Bonus Rollingan TO Sebesar 0,3 - 0.5% / Hari
    Bonus Referral Sebesar 20% Seumur Hidup

    * Minimal deposit hanya Rp 20.000
    * Minimal tarik dana Rp 20.000
    * Dilayani oleh CS profesional dan ramah
    * 24 jam online
    * Proses Depo & WD super cepat
    * No ROBOT MURNI PLAYER VS PLAYER
    * kamu berkesempatan menangkan Jackpot setiap harinya.

    Info lebih lanjut silahkan hubungi CS 24 Online Setiap hari melalui :
    * PIN BBM : 7A996166
    * WA : +85511817618

    Salam Sukses Pesonaqq.com

    ReplyDelete
Home | Google+