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.
Template yang dipilih editblogtema.net adalah varian paling sederhana dari Contempo Hybrid |
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.
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:
contempo |
2. ROBAH TAMPILAN MUKA BLOG CONTEMPO
Nah untuk menghilangkanya sobat harus masuk kepengaturan atau dasbor blogger:
- Pilih Tema
- 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"
<Variable name="body.background.height" description="Background height"
type="length"
min="420px"
max="640px"
default="400px" value="400px"/>
<Variable name="body.background" description="Background"
- Masuk kepengaturan
- Pilih Tema
- Pada sebelah kiri bawah tema pilih "sesuaikan"
- Setelah "Tema Desainer Blogger" muncul pilih Latar belakang
- Pilih hapus latar belakang dan klik untuk memilih warna
- Usahakan warna putih
Trik ini juga menjadikan heading menjadi lebih dinamis tampilan blogger akan berubah seperti berikut:
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
- Masuk kepengaturan
- Pilih Tema
- Pada sebelah kiri bawah tema pilih "sesuaikan"
- Pada desainer tema blogger sobat pilih Lanjutan
- Akan muncul menu dropdown, sobat scroll sampai keatas
- List paling bawah adalah "Tambahkan CSS" sobat klik itu
- Maka akan muncul kotak dialog sbb:
- Sobat copy kode berikut: .bg-photo-overlay { display:none; } dan pastekan kedalam kotak tersebut. Lalu SAVE tema.
Hasilnya akan terlihat seperti pada gambar:
Untuk opsi mobil:
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
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.
Bagaimana menurut sobat? Jika ingin menambahkan navigasi menu ikuti petunjuknya yang telah kami posting dalam bentuk beberapa tips atau tutorial didalam blog ini.
DEMO
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.
Sekarang model contempo laris digunakan. Karena model tema yang responsive dan menarik.
BalasHapusBenar sekali
HapusCss table juga mas..
BalasHapusBuat akutansi ya hehehehe.. . Ok nanti saya posting. Itu ide menarik yang patut di pertimbangkan dengan keras
Hapus😁😁😁
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! _/\_
BalasHapusOh 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.
HapusTapi 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! _/\_
codinglan.blogspot.com
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapus. Kalo boleh WhatsApp saya disini --> samuelpasaribu.github.io
BalasHapusMantap 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
BalasHapusIklan google adsense juga ikutan responsiv setiap klik halaman, mantap, mantap, mantap. terimaksih bro master
BalasHapusTerima 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.....
BalasHapusThanks Pak, You are indeed The Master..!!
Apa template contempo gak bisa sembunyikan deskripsi di Header ya. Saya cari tutorial suruhnya cari di .Header .description tapi nggak ada di template contempo
BalasHapusmaaf pada contempo tetap masukan kode ='description' ke kotak pencarian di halaman editor HTML ya...setelah enter beberapa kali sampai ketemu kode: <p>
Hapus<data:this.description/>
</p>
Hapus saja. Jawaban di atas berbelit belit he he he....jadi saya hapus saja
Woke mas, saya sudah paham maksudnya. Terimakasih banyak atas penjelasannya
HapusMengapa tidak di kosongkan saja deskripsinya melalui pengaturan dasbor blog normal?
HapusSaya dengar katanya deskripsi mempengaruhi SEO karna sudah terbaca oleh Google, makanya saya pertahankan, apa begitu?
HapusMemang 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
HapusSiap bang, makasih banyak sarannya.
Hapuskalau mau buat widget related artikel , gimana caranya Mas?
BalasHapusDisinis: https://www.editblogtema.com/search?q=related+post
BalasHapus