Fletro v5.3 Template Blogger - Mascodein

Setelah sebelumnya sempat tertunda, update pada template fletro sudah rampung sepenuhnya. Karena banyak yang diubah pada versi terbaru ini (v5.4) kami bekerja lebih keras untuk mengubah template ini beserta 4 versi lainnya, secara garis besar perubahan ini lebih banyak berfokus pada tampilan template dan penghapusan beberapa widget yang tidak perlu agar templatenya lebih ringan.

Salah satu yang paling menonjol adalah mengembalikan tampilan mobile navigasi seperti versi sebelumnya (v5.2) dikarenakan pada versi 5.3 tampilan tampilan mobile navigasi yang kosong tanpa tombol sosial media dinilai kurang menarik.

Apa saja update terbaru pada versi 5.4 ini?

Berikut adalah daftar perubahaan yang diterapkan pada versi terbaru template Fletro Pro

Daftar perubahan pada v5.4

1. Mengembalikan menu navigasi mobile seperti versi sebelumnya
2. Memindahkan icon Night Mode di samping tombol search
3. Menambahkan link social media pada header dan mobile navigasi
4. Menambahkan teks 'Grid mode' pada tombol grid, untuk menegaskan bahwa itu tombol yang bisa di klik
5. Mengubah kode CSS pada grid menu, sekarang urutan post yang tampil akan menyamping (sebelumnya menurun)
6. Mengubah font menjadi 'Nunito Sans'
7. Mengubah kalimat default pada kotak pencarian menjadi 'e.g. Tutorial'
8. Mengubah kalimat 'Ditulis oleh' menjadi 'Diposting oleh' pada profil penulis
9. Mengubah Kalimat 'Baca Juga' pada artikel terkait menjadi Kalimat default dari blogger 'Anda mungkin menyukai postingan ini'
10. Mengubah tampilan icon keseluruhan menjadi lebih sinkron, termasuk ikon widget pada sidebar dan komentar
11. Mengubah format ukuran gambar pada thumbnail yang otomatis menyesuaikan aspect ratio
12. Mengubah format daftar isi menjadi pure CSS dan HTML, sekarang fitur ini bisa digunakan pada template AMP
13. Mengubah format table menjadi lebih responsive
14. Mengubah tombol share menu dengan menambahkan 'Share on Whatsapp' dan tombol share 'Telegram'
15. Mengubah layout pada artikel terkait dalam postingan dan Daftar isi
16. Mengubah kode script pada related post/artikel terkait
17. Menghapus style related post menjadi hanya 1 style saja
18. Menghapus widget Label pada Horizontal Menu
19. Menghapus widget chat whatsapp
20. Menghapus efek show/hide pada header sticky
21. Menghapus gradasi warna pada header dan menu navigasi
22. Memperbaiki bug halaman tidak responsive melebihi lebar konten
23. Memperbaiki bug gambar logo header tidak tampil pada versi AMP
24. Memisah script untuk iklan tengah, atas dan bawah artikel. Sekarang menyembunyikan salah satu slot iklan tidak akan berpengaruh pada slot iklan lainnya
25. Mempertahankan 'Night mode' dan 'Grid mode' pada versi AMP (sebelumnya dihapus pada versi AMP)
26. Mengubah widget 'Profile' dan 'FollowByEmail' menjadi valid AMP
27. Menambahkan total komentar pada widget 'FeaturedPost' dan 'PopularPosts'

Mengembalikan menu navigasi mobile seperti versi sebelumnya

Hal pertama yang kami ubah pada update ini adalah menu navigasi mobile menjadi seperti semula, pada versi 5.3 tampilan navigasi mobile terlihat kosong ditambah dengan penghapusan tombol social media membuatnya terlihat tidak menarik sama sekali.

Untuk itu pada update ini kami menambahkan tombol social media di tampilan desktop dan mobile agar menu navigasinya terlihat lebih hidup, tak hanya itu icon dark mode yang sebelumnya ada dalam show/hide box dipindahkan ke samping tombol pencarian agar lebih mudah diakses.

Menambahkan teks 'Grid mode' pada tombol grid, untuk menegaskan bahwa itu tombol yang bisa di klik

Masih banyak yang tidak mengetahui atau tidak faham bahwa icon disamping kanan kalimat 'Latest Post' adalah ikon untuk mengubah tampilan post menjadi grid, mungkin karena bentuknya kecil sehingga terkesan icon tersebut hanya aksesoris saja dan tidak bisa diklik.

Teks 'Grid mode' ditambahkan untuk mempertegas bahwa icon tersebut bisa di klik dan memiliki fungsi penting untuk mengubah tampilan artikel, kami juga mengubah css pada grid mode yang sebelumnya:

column-count: 2;column-gap: 20px;

// Menjadi

display: grid;grid-template-columns: 1fr 1fr;column-gap: 20px;

Hal ini berfungsi untuk mengubah urutan penempatan artikel yang sebelumnya menurun(vertikal) menjadi menyamping(horisontal)

Mengubah format ukuran gambar pada thumbnail yang otomatis menyesuaikan aspect ratio

Pada versi sebelumnya kami menggunakan min-height atau ukuran tinggi minimal pada kotak thumbnail gambar, tapi ketika ukuran tinggi gambar tidak mencapai tinggi minimal yang ditetapkan akan ada space kosong dan kurang nyaman untuk dilihat.

Sekarang kami mengubah ukuran gambarnya mengikuti aspect ratio jadi ukuran gambar akan selalu pas walau ukurannya tidak sama. Ini juga kami terapkan pada template Median UI

Mengubah format daftar isi menjadi pure CSS dan HTML

Kebanyakan 'table fo content' atau yang dikenal dengan daftar isi menggunakan javascript untuk mengaktifkan fitur show/hide, hampir semua tutorial yang beredar di Google menggunakan konsep yang sama. Hal ini tidak salah, hanya saja hal itu membuat fitur ini tidak bisa digunakan pada template AMP sebagaimana yang diketahui javascript tidak valid pada AMP

Selain itu penulisan javascript yang panjang juga membingungkan terlebih bari orang yang awam akan coding. Pada versi ini kami bereksperimen dengan memanfaatkan tag <input type='checkbox'> dan CSS sebagai pengganti javascript, hasilnya sekarang penulisan kode 'daftar isi' menjadi lebih simpel dan tentunya bisa digukanan pada template AMP

Mengubah kode script pada related post/artikel terkait

Banyak sekali feedback masuk yang menyebutkan kalau gambar pada related post tidak muncul. Kamipun tidak tau dimana letak masalahnya karena pada blog demo template fletro tidak ada masalah sama sekali berkaitan dengan hal ini.

Kami tidak menjamin ini membantu atau tidak, tapi kami sudah mengubah script related post menggunakan script standar yang di dapat pada tutorial yang tersebar di Google dan setelah diuji coba tidak ada masalah pada related post di blog demonya.

Karena scriptnya diubah otomasi style yang bisa digunakan hanya 1 saja, dengan kata lain artikel ini sudah tidak relevan pada template ini. Jika masih ada masalah pada gambar related post blog Anda, mohon maaf kami tidak bisa membantu lebih banyak lagi.

Penghapusan beberapa widget

Karena dinilai kurang bermanfaat widget chat whatsapp dihapus pada update ini, widget ini lebih cocok dipakai pada blog atau website yang menyediakan jasa, layanan atau produk yang dijual. Alasan lainnya adalah privasi, tidak sedikit penulis blog yang lebih memilih menyembunyikan identitas diri atau informasi kontak untuk menjaga privasi mereka terlebih Blogger sudah menyediakan widget Contact yang membantu user menghubungi admin/author blog.

Widget lain yang dihapus adalah 'BlogArchive' dan 'Label' pada horizontal menu. Pada tutorial ini Anda bisa memilih menampilkan horizontal menu secara manual atau otomatis dengan memanfaatkan widget 'Label'. Pada update ini sebagian tutorial tersebut sudah tidak relevan lagi, sekarang Anda hanya bisa menampilkan horizontal menu secara manual atau edit link-nya satu-persatu

Menghapus gradasi warna pada header dan menu navigasi

Bug ini hanya terlihat ketika blog dibuka pada browser Safari atau Iphone, dan tidak ada masalah pada smartphone Android atau browser kebanyakan lainnya. Ketika blog dibuka melalui Iphone akan muncul garis hitam pada menu navigasi mobile seperti pada gambar

Hal ini kemungkinan besar terjadi dikarenakan browser safari (yang digunakan pada iphone) tidak support kode CSS background-image: linear-gradient(...);, untuk memperbaikinya kami menghapus semua warna gradasi pada template termasuk pada tutorial ini yang menjadi tidak relevan lagi

Memperbaiki bug halaman tidak responsive melebihi lebar konten

Bug ini hanya terjadi pada versi Fletro 3 Column dan belum pernah terjadi pada versi standar, tepatnya pada widget Recent Post. Pada tampilan mobile daftar artikel pada widget ini ditampilkan secara horisontal dengan scroll, pada webmaster hal ini dianggap tidak responsive karena elemen melebihi dari lebar template.

Memperbaiki bug gambar logo header tidak tampil pada versi AMP

Pada versi AMP kami sudah mengganti tag <img> pada header menjadi <amp-img> namun entah kenapa gambar tidak muncul pada header, dan ternyata masalahnya terdapat pada artibut layout='responsive' pada gambar, jika Anda masih menggunakan versi lama dan ingin memperbaiki masalah ini silahkan ganti layout='responsive' menjadi layout='intrinsic' pada blog Anda.

Memisah script untuk iklan tengah, atas dan bawah artikel

Pada versi sebelumnya script untuk widget iklan di gabung menjadi satu sehinggia ketika satu slot/widget iklan di hapus akan berbengaruh pada widget lainnya. Pada update kali ini kami memisahkan script nya satu-persatu agar ketika widget iklan dihapus tidak akan berpengaruh pada widget iklan lainnya.

Masalah instal template

Pada update ini kami mengubah beberapa id widget seperti 'Blog1' yang diubah menjadi 'Blog00' dan lainnya, tujuannya adalah agar user lebih mudah mengidentifikasi yang mana widget bawaan template dan yang mana widget tambahan.

Karena perubahan tersebut ketika Anda instal dengan cara normal upload file .xml langsung kemungkinan besar akan terjadi duplikat widget atau error pada widget 'FeaturedPost0'.

Untuk mengatasinya instal widget dengan cara menyalin semua kodenya dan tempel pada blog Anda, lengkapnya adalah seperti dibawah:

• Pada file .xml template Klik Kanan > Open with > Notepad
• Tekan ctrl + a lalu copy semua kode dalam file .xml tersebut
• Pada Blogger pilih Tema > Edit HTML
• Tekan ctrl + a kemudian tempel semua kode dari file .xml sebelum nya, mudahnya tinggal tekan ctrl + v

Masalah pada komentar disqus yang menghilang setelah di update

Bagi pengguna komentar disqus, setelah mengupdate templatenya komentar disqus yang sudah ada akan hilang. Tepatnya pada tampilan mobile(pada desktop tidak terjadi masalah), penyebab utamanya adalah url ?m=1 pada template.
Untuk mengatasinya silahkan tambahkan script dibawah ini sebelum tag </body>:

Download Demo

Related Posts