Panduan mengedit dan merombak template blogger contempo bagian ke 2

AvatarPosted By:
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. 
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. 

19 Komentar untuk "Panduan mengedit dan merombak template blogger contempo bagian ke 2"

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

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

      Hapus
  3. Keren mas Master, artikelnya membantu sekali. Tapi bagaimana cara merubah warna icon search dan hamburger menjadi hitam mas, di template contempo saya koq kedua icon itu putih, jadi saya terpaksa memberi warna body background dgn warna gelap, padahal yg saya inginkan keseluruhan body itu putih dan icon search dan hamburgernya hitam seperti contoh tutorial ini. Sebelumnya terimakasih mas Master! _/\_

    BalasHapus
    Balasan
    1. Oh iya mas ada yg lupaaa hihi!... search dan burger itu saya coba rubah warna jadi hitam di 'Customize' nggak bisa juga, tetap balik lagi ke putih.
      Tapi kalau sticky navbarnya sih kedua ikon itu berubah ke hitam krn backgroundnya putih....waduh saya cerewet ya hihi maklum emak2 haha.
      Terimakasih sebelumnya mas Master! _/\_

      Hapus
  4. codinglan.blogspot.com

    BalasHapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. . Kalo boleh WhatsApp saya disini --> samuelpasaribu.github.io

    BalasHapus
  7. Mantap bro!...artikelnya dunk dan sangat luar biasa, saya orang 3 tahun lagi akan pensiun dari perusahaan baru belajar dunia bloging dan baru pandai nulis abcd dstnya. Disini juga saya bolak balik ngunjungi blog saudara sambil memabaca dan belajar alpha numerik blog. SALAM

    BalasHapus
  8. Iklan google adsense juga ikutan responsiv setiap klik halaman, mantap, mantap, mantap. terimaksih bro master

    BalasHapus
  9. Terima kasih Pak dan blog saya (amatiran :v) jadi lebih ringan setelah mengikuti arahan Anda. Saya kelupaan sudah dari Pebruari mau komen soal trit ini hahaha.....
    Thanks Pak, You are indeed The Master..!!

    BalasHapus
  10. Apa template contempo gak bisa sembunyikan deskripsi di Header ya. Saya cari tutorial suruhnya cari di .Header .description tapi nggak ada di template contempo

    BalasHapus
    Balasan
    1. maaf pada contempo tetap masukan kode ='description' ke kotak pencarian di halaman editor HTML ya...setelah enter beberapa kali sampai ketemu kode: <p>
      <data:this.description/>
      </p>

      Hapus saja. Jawaban di atas berbelit belit he he he....jadi saya hapus saja

      Hapus
    2. Woke mas, saya sudah paham maksudnya. Terimakasih banyak atas penjelasannya

      Hapus
    3. Mengapa tidak di kosongkan saja deskripsinya melalui pengaturan dasbor blog normal?

      Hapus
    4. Saya dengar katanya deskripsi mempengaruhi SEO karna sudah terbaca oleh Google, makanya saya pertahankan, apa begitu?

      Hapus
    5. Memang demikian ia berpengaruh pada SERP, kecuali jika descripsi di ganti dengan format yang benar dan tepat. Atau kalau tidak suka tampilannya di kustom saja, mas

      Hapus
    6. Siap bang, makasih banyak sarannya.

      Hapus

Silahkan berkomentar sesuai dengan topik kita ya...

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel