Monday 11 February 2019

Jadi Berilmu Yang Saya Lakukan Dikala Modifikasi Template Kompi Males V6 Fast Loading


Sejak blog ini berganti wajah dari kompi flexible menjadi kompi males v6, ada yang nanya via email ke saya ini blog pake template kompi males v6 tapi kok gak sama dengan yang di demo kompiajaib ya? ya saya jawab saja bahwa saya sudah mengedit sesuai impian saya, terutama fitur-fitur yang tidak saya butuhkan alasannya yaitu kadang menunjukkan dampak aktual terhadap blog saya ini. Seperti widget langganan email, 3 sistem komentar, tombol sosmed (bukan tombol share ya) dan tombol login, dan lain-lain. Tapi semua itu saya edit di blog percobaan bukan di blog utama supaya tidak mensugesti kinerja google.

Oke kini saya share bagaimana saya merubah template kompi males menjadi ibarat kini ini (jika nanti tidak ganti template lagi) simak saja yang baik-baik, jangan lupa sambil ngopi juga boleh semoga gak ngantuk.

baca juga: Modifikasi template supaya loading lebih cepat

Body
Saya merubah semua warna dasar putih pada body color:#fff menjadi abu-abu color:#fafafa, kecuali bab postingan tetap putih.

Menu
Pada sajian saya gunakan warna yang sama color:#fafafa, hanya saya menambahkan box-shadow supaya tidak menyatu dengan body dan terlihat lebih elegan. Kemudia saya juga menambahkan dampak warna hijau dikala disorot (a:hover).

outer-wrapper
Saya tetap memakai background putih dengan menambahkan dampak box-shadow supaya terlihat lebih elegan dan minimalis.

Footer
Dibagian footer 1 tetap widget google plus follower, tapi pada footer 2 3 dan 4 saya ganti dengan widget recent post multi label, menghapus widget langganan email dan about me. Menghapus footer 6 dan hanya memakai footer 5 dengan width:100% dan diisi dengan label full.

Komentar
Saya hanya memakai 1 sistem komentar disqus saja, comment blogger dan facebook saya hapus supaya loading lebih cepat. Kenapa disqus kok bukan blogger? meski comment blogger katanya lebih cepat namun setiap komen harus reload halaman dan tidak ada notifikasi akhir komentar.

Font Google
Jika biasanya link font ibarat ini
<link href='https://fonts.googleapis.com/css?family=Roboto:300,300i,500,700,500i,900' rel='stylesheet'/>

itu akan sedikit mengganggu loading alasannya yaitu browser harus load link external. Makara saya buat jadi inline di html. Anda dapat simak postingannya berikut ini:
Font Face Google Inline di HTML

Selain itu saya juga mengganti semua icon font awesome dengan svg material icon. Jika kita perhatikan link untuk font awesome ibarat ini;
<link href='https://cdn.rawgit.com/KompiAjaib/font-awesome-4.6.3/master/css/font-awesome.min.css' rel='stylesheet'/>

dan bila kita susukan link tersebut, maka kita akan menemukan banyak icon yang tak terpakai. Biasanya hanya icon user, label, panah kanan kiri, home, dll. Untuk merubah hal tersebut, dapat anda simak postingan berikut ini; cara merubah font awesome dengan svg material icon

Oke itulah bab terpenting yang biasa saya lakukan terhadap template blog. Semoga bermanfaat dan dapat membantu..

No comments:

Post a Comment