Update Template Fletro Pro v5.4

Update Fletro Pro v5.4

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

  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

Bug Template Fletro

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>:

<scrip>/*<![CDATA[*/ var uri = window.location.toString(); if (uri.indexOf("%3D","%3D") > 0) { var clean_uri = uri.substring(0, uri.indexOf("%3D")); window.history.replaceState({}, document.title, clean_uri);} var uri = window.location.toString(); if (uri.indexOf("%3D%3D","%3D%3D") > 0) { var clean_uri = uri.substring(0, uri.indexOf("%3D%3D")); window.history.replaceState({}, document.title, clean_uri);} var uri = window.location.toString(); if (uri.indexOf("&m=1","&m=1") > 0) { var clean_uri = uri.substring(0, uri.indexOf("&m=1")); window.history.replaceState({}, document.title, clean_uri); } var uri = window.location.toString(); if (uri.indexOf("?m=1","?m=1") > 0) { var clean_uri = uri.substring(0, uri.indexOf("?m=1")); window.history.replaceState({}, document.title, clean_uri);}; /*]]>*/</scrip>

Beri tanggapan

Hanya ini untuk update kali ini semoga bermanfaat, jika ada saran atau masukan silahhkan tambahkan di kolom komentar

Anda mungkin menyukai postingan ini

17 komentar

  1. Fernand
    udah ditungguin lama2 ternyata update nya kurang memuaskan :'(
    tapi gpplah, gw update dulu :D
    • Muhammad Maki
      Wkwkwk sampeyan aja gak beli template nya, WA di block lagi
  2. @Iam.Rifai
    Bang updatenya gak dikirim otomatis ke email? Saya udah beli yang all bundle.

    Coba check email murmedia.net@gmail.com

    Terima kasih.
    • Muhammad Maki
      Tapi kemaren sampeyan jual ulang template ini, cuma di ubah nama nya doang jadi 'Dulang Pro'.
    • Ariyanto
      Kasih lisensi ae mas...
  3. de@hdies
    misal kita beli nii template supaya dapet free update brapa mas yak?
    • Muhammad Maki
      Dapat terus ko kalo gak aneh".

      Kan file nya saya upload di Gdrive, kalau sudah beli nanti saya kirim link akses nya. Jadi kalau misal ada update tinggal download ulang aja di link tersebut
  4. Citogok
    cakep mas.. 🙏🙏
  5. Tosy Caesar K.
    fletro belum ada halaman sitemap ya mas?
  6. Parvez
    how can i buy it... i am form india...
  7. Nguyễn Quang Sáng
    Bisakah Anda membagikan komentar kode Anda?

    typidane@gmail.com
  8. Nguyễn Quang Sáng
    hú lê anh em
  9. Andri
    Mantabbbbb..Tapi saya malas ngedit ulang templatenya dari awal oakwkwkwk.

    Oleh karena itu, bagaimana cara merubah postingan yang acak ketika di 'load more'???
  10. Moh Ravi Dwi Putra
    Efek hover pada bagian menu navigasi search, night, more, daftar isi, dan button sepertinya belom diperbaiki
  11. Themerum
    Thank for sharing, keep up work
    Visit my site (Themerum.com) to get a useful thing.
    Themerum.com is free download shopping blogger template and wordpress theme website.