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 keinginan saya, terutama fitur-fitur yang tidak saya butuhkan karena kadang memberikan dampak positif 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 mempengaruhi kinerja google.
Oke sekarang saya share bagaimana saya merubah template kompi males menjadi seperti sekarang ini (jika nanti tidak ganti template lagi) simak saja yang baik-baik, jangan lupa sambil ngopi juga boleh biar 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 bagian postingan tetap putih.Menu
Pada menu 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 efek warna hijau saat disorot (a:hover).outer-wrapper
Saya tetap menggunakan background putih dengan menambahkan efek 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 menggunakan footer 5 dengan
width:100% dan diisi dengan label full.Komentar
Saya hanya menggunakan 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 balasan komentar.
Font Google
Jika biasanya link font seperti ini
<link href='https://fonts.googleapis.com/css?family=Roboto:300,300i,500,700,500i,900' rel='stylesheet'/>itu akan sedikit mengganggu loading karena browser harus load link external. Jadi saya buat jadi inline di html. Anda bisa 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 seperti ini;
<link href='https://cdn.rawgit.com/KompiAjaib/font-awesome-4.6.3/master/css/font-awesome.min.css' rel='stylesheet'/>dan jika kita akses 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, bisa anda simak postingan berikut ini; cara merubah font awesome dengan svg material icon
Oke itulah bagian terpenting yang biasa saya lakukan terhadap template blog. Semoga bermanfaat dan bisa membantu..
