CARA MUDAH MEROBAH TOTAL TAMPILAN TEMPLATE BLOGGER CONTEMPO

Trik mengganti nilai aba aba CSS ini juga di tengerai dapat menambah kecepatan blog Contempo.
Contempo masih penuh dengan kejutan. Inilah jenis tema yang memiliki elemen di dominasi oleh CSS, jika ingin merombak tampilannya hanya perlu merubah nilai dan value pada margin, padding, size tinggi dan lebar dan lalu mengganti kombinasi kode kode warna yang terdiri dari penulisan sintaksis biasa hingga kode HEX dan rgb-nya.
ini adalah varian contempo hybrid basic
Template yang dipilih editblogtema.net adalah varian paling sederhana dari Contempo Hybrid
Tidak diperlukan penambahan kode diluar itu, sobat dapat mengendalikan hampir seluruh opsi desainnya melaui aba aba CSS dan menerapkannya tanpa takut malfunction, walau sedikit rumit itu hanyalah CSS, sebagian kode hanya sebagai opsi opsi cadangan yang dapat kita manfaatkan untuk mengendalikan beberapa tampilan laman web kita nantinya.

Dan ajaibnya dari hasil percobaan kami,  beberapa kondisi penggantian value atau nilai perintah, bahkan mampu meningkatkan kecepatan loading halaman,  misalnya margin yang terlalu tinggi dan lebar ternyata berpengaruh pada loading blog.

Pada contempo sobat tidak perlu memasang lazyload, script lazy load yang tidak pada tempatnya (walau saran meletakannya diatas tag
sudah benar pada templat klasik, ironisnya dapat mengurangi kecepatan template contempo hingga 20 detik! )
Unik bukan?

Sebenarnya jika sobat mengikuti trik dan tutorial blog ini sobat mampu membuat sebuah tema premium. Sebuah Tema premium bukan semata mata tampilan tapi juga kecepatan, fungsi, SEO dan mudah dipergunakan.

Jika sobat ingin merobah tampilan template Contempo agar tidak terlihat "default" dan lebih terlihat mirip tema tema premium dari wordpress sobat ikuti langkah berikut:

1. BUAT SEBUAH BLOG, ATAU MASUK KE PENGATURAN BLOG

Jika sobat sudah memiliki blog tinggal masuk kepengaturan, pilih tema, lalu scroll halaman tema pilih tema contempo disana ada 4 varian pada contoh yang saya cobakan saya memilih varian yang di dominasi warna biru. Gambar dibawah ini adalah varian contempo hybrid gradient pembuatannya sedikit lebih rumit dan saya akui masih banyak yang harus dibenahi.
tampilan dasbor blog untuk mengganti template ke template contempo
Sobat akan melihat hasilnya seperti pada gambar dibawah yang mana tampilan homepage salah satu artikel seperti gedung  menjulur ke atas judul. Bagi sebagian orang tampilan ini tidak terlalu disukai:
masih asli atau default contempo
contempo
2. ROBAH TAMPILAN MUKA BLOG CONTEMPO

Nah untuk menghilangkanya sobat harus masuk kepengaturan atau dasbor blogger:
  1. Pilih Tema
  2. Lalu pilih edit HTML
Cari kode CSSnya: (tekan CTRL+F, lalu copy saja penggalan kode misalnya <Variable name="body.background" description="Background" kedalam kotak pencarian yang muncul diatas halaman editorial HTML pada dasbor blogger sobat)

<Group description="Backgrounds">
<Variable name="body.background.height" description="Background height"
type="length"
min="420px"
max="640px"
default="400px" value="400px"/>
<Variable name="body.background" description="Background"

Perhatikan kode yang saya sorot kuning dan robah nilainya menjadi: default=100px" value="75px"/>. Save. Lalu masuk kembali ke pengaturan:
  1. Masuk kepengaturan
  2. Pilih Tema
  3. Pada sebelah kiri bawah tema pilih "sesuaikan"
  4. Setelah "Tema Desainer Blogger" muncul pilih Latar belakang
  5. Pilih hapus latar belakang dan klik untuk memilih warna
  6. Usahakan warna putih
Trik ini juga menjadikan heading menjadi lebih dinamis tampilan blogger akan berubah seperti berikut:
setelah di edit
Sampai disini saja Tampilan Template contempo sudah jelas berbeda, akan tetapi pada bagian header paling atas masih terlihat warna abu abu, jika sobat tidak menginginkannya sobat hanya perlu 
  1. Masuk kepengaturan
  2. Pilih Tema
  3. Pada sebelah kiri bawah tema pilih "sesuaikan"
  4. Pada desainer tema blogger sobat pilih  Lanjutan
  5. Akan muncul menu dropdown, sobat scroll sampai keatas 
  6. List paling bawah adalah "Tambahkan CSS" sobat klik itu
  7. Maka akan muncul kotak dialog sbb:
    tempat mempaste kode CSS di halaman Desainer Blogger
  8. Sobat copy kode berikut: .bg-photo-overlay { display:none; } dan pastekan kedalam kotak tersebut. Lalu SAVE tema.
Hasilnya akan terlihat seperti pada gambar:
terlihat perbedaannya
Sisanya sobat bisa mengatur widget widget yang sobat perlukan, sedangkan hasil akhirnya bisa sobat lihat pada demo:

3. MENGATUR JARAK JUDUL BLOG CONTEMPO

☛Merapatkan judul keatas atau merenggangkan judul kebawah, masuk ke opsi edit HTML dan cari kode

Untuk opsi mobil:


widget.Header h1{
font-size:$(blog.title.font.size * 24 / 45);
line-height:$(blog.title.font.size * 24 / 45);
margin-bottom:13px
}

Robah angkanya menjadi seperti ini:

.widget.Header h1{
font-size:$(blog.title.font.size * 25 / 45);
line-height:$(blog.title.font.size * 18 / 45);
margin-bottom:14px

Trik  diatas tidak memperngaruhi posisi judul pada layar screen maksimal  800px keatas. Hanya untuk tampilan blog pada hape saja.

☞MERAPATKAN JUDUL DENGAN KETERANGAN BLOG
masuk ke opsi edit HTML dan cari kode:

.Header h1{
color:$(blog.title.color);
font:$(blog.title.font);
line-height:normal;
margin:0 50 0px 0;
text-align:center;
width:100%
}

Robah nilai angka menjadi: '0'

.Header h1{
color:$(blog.title.color);
font:$(blog.title.font);
line-height:normal;
margin:0 0 0px 0;
text-align:center;
width:100%
}

4. MEMODIFIKASI BLOCKQUOTE CONTEMPO

Salah satu kekurangan Contempo adalah blockqoute bawaannya jelek, kata teman. Saya punya solusi, dan berterimakasihlah pada elemen CSS yang melimpah didalam tema yang satu ini.

Sekali ini saya terpaksa menggunakan istilah modifikasi setelah gagal mencari aba aba CSS yang nilainya (valuenya) dapat dimanfaatkan untuk manipulasi tampilan HTML guna mempercantik tampilannya tanpa menambahkan kode css yang lain.

Sobat masuk ke opsi edit HTML dan cari kode CSS berikut:

blockquote{
color:$(blockquote.color);
font:$(blockquote.font);
font-size:x-large;
text-align:center
}

Robah aba aba yang saya sorot warna kuning menjadi: large atau normal saja ketimbang x-large dan center menjadi: justify

Lalu tambahkan kode dibawah ini tepat di bawah tanda kurung CSS yang saya sorot biru, kode hasil editan saya sbb:

blockquote {
    background: #FFF0F5;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}
blockquote p {
    display: inline;
}


Save tema

Demikianlah cara merobah nilai aba aba CSS untuk mengatur tampilan Header Blog Contempo. Nilai nilai ini juga akan menambah kecepatan loading blog.

DEMO
Bagaimana menurut sobat? Jika ingin menambahkan navigasi menu ikuti petunjuknya yang telah kami posting dalam bentuk beberapa tips atau tutorial didalam blog ini.

Editblogtema akhirnya memutuskan memakai tema bersahaja karena alasan kecepatan loadingnya, jika dibanding dengan yang belum diedit tentu saja lebih cepat hingga 21% walaupun mengingat banyaknya konten dan gambar gambar resolusi besar. 


Comments

  1. Sekarang model contempo laris digunakan. Karena model tema yang responsive dan menarik.

    ReplyDelete
  2. Replies
    1. Buat akutansi ya hehehehe.. . Ok nanti saya posting. Itu ide menarik yang patut di pertimbangkan dengan keras
      😁😁😁

      Delete

Post a Comment

请给我们一个礼貌的评论与任何相关的主题
Just give us a polite comments with any related topics
Hanya komentar yang sopan dan berhubungan dengan topik

My photo
sofyan Ya-an
Batam, Kepri, Indonesia
Suka menulis. Peminat sains, matimatika, koding walaupun bukan pelaku aktif. Saya adalah pribadi yang introvert dan soliter - seorang penyendiri.