Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english
LOADING...
Website Masih Dalam Proses Pengembangan. Download Template Jika Anda Berminat.
Download
Home
blog
Tutorial Blog

Membongkar Template Blogger

4 min read
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);
Baca juga :
Berbagi Pengalaman Optimasi Page Rank
  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;
Baca juga :
Modifikasi template blog dengan "Teknik Background"
}


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;
}
Baca juga :
Setelah Page Rank Google meluncurkan Author Rank

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
Baca juga :
Membongkar Template Blogger
- 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.
Help!
Baca juga :
Semangat berkarya mekipun hasil copy paste!

Blogger : Cerdasin62+

Mau donasi keh?

Paypal
Dana - 0887435373103
Jika dana kalian terlalu banyak bisa beri admin sedikit banyak dana sesuka hati. klik icon panah di atas

You may like these posts

  • Setelah Page Rank Google meluncurkan Author Rank
    Apakah itu Author Rank, Author Rank adalah suatu gagasan google untuk memberikan peringkat pada hasil pencarian google. Namun hingga di kenalkannya google+ tidak ada platform yang …
  • 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 te…
  • Modifikasi template blog dengan "Teknik Background"
    Membuat tampilan blog menarik membutuhkan teknik CSS yang rumit, Saya menemukan cara baru membuat tampilan blog menarik  tanpa perlu pengaturan CSS yang rumit. Teknik ini bagu…
  • Berbagi Pengalaman Optimasi Page Rank
    Percaya ga percaya dalam waktu kurang dari tiga bulan pagerank blog ini sudah mendapat ranking dua. Pada awal membuat blog ini memang saya maksudkan sebagai ujicoba teknik-teknik d…
Apakah artikel ini bermanfaat? Silahkan klik bintang di bawah.
Jangan lupa beri komentar.
Komentar.

Post a Comment

Tinggalkan komentar sesuai topik tulisan, centang Notify me untuk mendapatkan notifikasi via email ketika komentar kamu di balas.
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
CaraTech.

Mampir Juga Ke Blogger caratech.my.id