Redesign Template Premium Kompi Flexible Non AMP V8 Terbaru
Tulisan Ndeso, Redesign Template Kompi Flexible Non AMP V8 Terbaru - Kompi Flexible adalah template premium pertama buatan mas Adhy Suryadi, pemilik blog www.kompiajaib.com, yang juga banyak dibeli oleh para blogger.
Kompi Flexible ini sudah memasuki versi ke-8 dari sejak pertama kali rilis, dengan perubahan besar dan cukup signifikan dari versi sebelumnya, terutama pada 'jeroan' HTML-nya. Update dari Algoritma google menjadi pemicu utama adanya update besar-besaran pada template ini yang difokuskan pada kecepatan loading, terutama mengenai skor pagespeed dan lighthouse.
Di tahun 2019 ini, kecepatan loading suatu blog atau yang memiliki skor hijau di pagespeed insight menjadi faktor perankingan dalam mesin pencarian google. Hal ini sangatlah wajar, mengingat pengguna internet didominasi oleh mereka yang menggunakan gadget atau mobile phone. Sehingga, kecepatan loading suatu blog menjadi tolak ukur utama bagi google.
Update yang ada di Template Premium Kompi Flexible Non AMP V8 Terbaru ini bukan hanya dari segi speed saja, namun juga dari segi SEO blog hingga tampilan. Selain mengikuti algoritma google, tujuan update kali ini juga agar pengguna tidak merasa bosan dan mendapat penyegaran, namun tetap dengan design yang minimalis dan tidak menghilangkan jati diri dari template Kompi Flexible versi sebelum-sebelumnya.
Sudah lama rasanya saya ingin membeli template ini, awalnya karena banyak yang make, hingga akhirnya benar-benar membelinya ketika mas Adhy melakukan update besar-besaran pada template ini. Alasannya sederhana, mengikuti perkembangan yang ada saat ini, baik dari tampilan hingga SEO dalam template ini.
Ketika template yang anda gunakan sudah SEO, artinya PR anda sudah selesai 1, tinggal belajar cara membuat artikel SEO friendly agar bersahabat dengan Google dan para pembaca.
Dengan tampilan default yang sudah keren, akhirnya banyak yang membeli. Namun, karena saya ingin merasa spesial menggunakan template ini, akhirnya saya me-re-design template ini agar sesuai dengan keinginan saya sendiri. Maaf ya mas Adhy kalau tampilannya jadi berubah :D. Apa saja yang saya redesign?
Redesign Template Premium Kompi Flexible
1. Mengubah Warna (Header Dan Background)
Waktu pertama kali update Versi 8, tampilan warna Kompi Flexible masih polos biru seperti versi pendahulunya tanpa adanya gradasi. Karena merasa kurang ada bedanya dengan versi sebelumnya, akhirnya saya buat warnanya menjadi gradasi. Warna gradasi ini juga akan berpengaruh ke warna lainnya, jadi bukan hanya header saja.
Tidak lama kemudian muncul update Kompi Flexible 8.20, setelah saya cek, salah satu updatenya adalah warna gradasi. Mas Adhy, you know me so well :D
 |
| Kompi Flexible V8 Terbaru |
Setelah ganti warna header dan melihat warna backgoundnya kok kayaknya ngga cocok, akhirnya warna backgoundnya saya ganti ke warna ke yang agak putih biar selaras dengan header dan terlihat clean tentunya. Saya juga memberikan kategori tambahan dengan warna gradasi juga pada sidebar sebelah kanan. Ini hanya mengenai selera ya.
 |
| Kompi Flexible V8 Redesign |
2. Mengganti Featured Post Dengan Iklan
Harapan penggantiannya jelas, pengen dapet penghasilan tambahan dari iklan ini hehe. Selain itu, saya bingung mau ngasih Featured post apa, karena saya juga bingung di blog ini apa yang paling menonjol. Karena kebingungan itu, akhirnya ganti sama iklan aja.
Dengan iklan yang besar di halaman utama blog, apa ngga berat? Tenang saja, mas Adhy sudah memberikan Lazy Load untuk Adsense, jadi meskipun iklan segede gaban seperti itu, akan tetap aman dan tidak terlalu membebani loading blog ini. Saya juga menghapus backgound kuning yang ada di setiap slot iklan, tujuannya biar enak dilihat dan sesuai dengan background ketika iklan tidak muncul.
 |
| Iklan Billboard Menggantikan Featured Post |
3. Mengubah Ukuran Gambar Dan Sudut Melengkung
Melihat gambar yang ujungnya siku atau runcing kok kayaknya ngga cocok ya kalau melihat dua update diatas, akhirnya saya coba untuk membuat setiap sudut pada gambar sedikit melengkung. Kembali lagi, ini mengenai selera ya hehe.
Lengkungan ini saya terapkan di homepage, popular post, gambar dalam postingan, dan related post yang ada di bawah postingan. Jika dilihat lebih seksama, ukuran gambar di homepage juga berbeda dengan aslinya, karena saya ubah komposisi gambar dari awalnya 16:9 menjadi 16:10, jadi terlihat lebih tinggi dan juga ukuran gambarnya sedikit saya kecilkan dari versi aslinya.
 |
| Ukuran Dan Sudut Melengkung Gambar |
4. Posisi Judul Artikel Dan Gambar di Homepage
Versi awal dari update Kompi Flexible V8 Terbaru ini menempatkan judul berada di atas gambar dengan garis dibawahnya. Saya yang sudah terbiasa dengan tata letak gambar di kiri dengan judul dan snippest atau deskripsi berada di kanannya berusaha untuk mengubah hal ini. Akhirnya nyari tutorial sana sini, ketemu dan mencoba untuk ganti meskipun hasilnya kurang sesuai.
 |
| Tampilan Versi Mobile |
Versi mobile juga saya ubah, snippest yang ada di versi mobile saya hide, sehingga hanya muncul gambar dan judul artikel saja. Pemikiran saya, layar handphone yang kecil seperti hp saya agak jomplang ketika menampilkan gambar di home page yang besar, ditambah lagi ada snippest yang akhirnya membuat postingan di homepage terlihat banyak dan harus sering-sering scroll hp.
Akhirnya saya perkecil ukuran gambar dan saya hilangkan deskirpsinya yang kemudian membuat lebih enak dilihat serta menyesuaikan dengan tampilan layar handphone yang lebih kecil.
5. Mengubah Ukuran Font
Ukuran font yang saya ubah ada di postingan blog yakni judul artikel. Ukuran font judul artikel ini saya perbesar agar orang bisa melihat dengan jelas dan ingat tentang apa yang ia baca di blog saya. Selain itu ukuran untuk font H3 juga saya perbesar untuk menjadi pembeda dengan tulisan yang di Bold.
6. Tata Letak Gambar, Judul, Dan Breadcrumb
Sebenarnya poin ini adalah yang sedang saya cari tutorialnya. Tampilan paling atas Breadcrumb, bawahnya Gambar Thumbnail artikel, diikuti Judul artikel dengan font besar beserta garis dibawahnya membuat saya kepincut. Saya melihat tampilan ini di blog sebelah yang ada di gambar dibawah ini, sudah saya tanyakan tutorialnya namun belum dibuatkan juga sampai saat ini.
Menurut admin blog sebelah tersebut, sebenarnya itu adalah format dari Kompi Flexible versi lama. Yaa namanya juga pemula dalam blog, kalau saya tidak melihat contoh secar langsung, tidak bisa untuk redesign sendiri hehe. Jadi, bagi yang tahu tutorialnya bisa memberikan linknya di komentar ya!
 |
| Tata Letak |
Dengan beberapa poin redesign diatas, apakah memiliki dampak buruk terhadap blog? Tidak ada. Karena secara garis besar yang saya ubah hanya ukuran dan warna saja, jadi seharusnya tidak berpengaruh buruk terhadap blog. Malah, akhirnya sesuai dengan keinginan saya dan menjadi pembeda dengan yang lain hehe.
 |
| Skor GTMetrix |
Skor GTMetrix Kompi Flexible ini juga termasuk yahud, dari mulai PageSpeed Score yang hampir 100 hingga YSlow Score nya yang mendekati 90.
 |
| Google Page Speed Insight |
Untuk skor Page Speed Insights dari Goole versi mobile mendekati sempurna, yakni 98. Sementara untuk versi desktop sudah jelas mendapatkan skor 100.
 |
| Google Lighthouse Score |
Skor Google Lighthouse juga mendekati sempurna. Dari tiga pengukuran diatas membuat saya tenang memepercayakan template buatan mas Adhy ini. Semoga update kedepannya menjadi semakin mantap dan bisa mengangkat SEO blog yang saya bangun ini.
Jika anda memerlukan tutorial bagaimana saya me-re-design template ini, silahkan komentar dibawah, nanti akan saya buatkan tutorialnya. Semoga bermanfaat.
Cari Artikel Lainnya Di Sini
