Salah satu hal yang menjadi nilai plus dari template ini adalah tampilanya yang elegan dengan memaksialkan kinerja CSS namun tetap mempertahankan kecepatan loading blog. Walau begitu tampilan tidak menjamin blog menjadi ramai, kunci utama dari ini kembali ke pengunjung blog tersebut apakah mereka merasa nyaman atau tidak ketika membaca artikel di blog.
Kami mengerti bagaimana UX (User Experience) bekerja dan karena itulah kami lebih mengedepankan pengalaman pengguna ketimbang interface dari blog itu sendiri namun tetap mempertahankannya, sebuah situs web atau blog yang baik adalah yang mampu membuat user-nya nyaman dan betah berada di situs tersebut.
Background desainer grafis sangat membantu kami mengembangkan template ini, salah satu temuan penting berdasarkan pengalaman pribadi yang sering sekali diabaikan oleh pengembang template adalah Kesalahan penggunaan hamburger menu pada desktop, dari segi interface memang terlihat elegan, tapi dari segi pengalaman pengguna hal ini sangat tidak direkomendasikan. Saya pribadi sering sekali menemukan situs yang menggunakan jenis menu ini di desktop agar di tampilan mobile terlihat keren, atau sebaliknya menggunakan horizontal menu di dekstop tapi mengorbankan tampilan mobile.
Untuk itu kami mendesain sebuah menu yang fleksibel dan tetap memperhatikan UI dan UX situs, menu ini akan tampil horizontal pada desktop dan berubah total pada tampilan mobile, silahkan buka demo template ini di tampilan dekstop dan mobile untuk melihat perbedaannya. Anda mungkin mengira kami menggunakan javascript yang kompleks untuk menu ini, tapi kenyataannya tidak!. Menu ini dibuat 100% pure CSS dan HTML, seperti yang dijelaskan diparagraf pertama "memaksialkan kinerja CSS namun tetap mempertahankan kecepatan loading blog".
Berikut adalah beberapa kelebihan yang kami tawarkan dari template ini:
Tampilan desktop template fletro
Fitur-fitur pada template dimaksimalkan untuk penggunanya (baik pengunjung atau pengelola blog) dari tampilan dan fitur lainnya termasuk untuk pengguna template ini; link, warna dan bahkan tombol share bisa langsung di edit pada menu Tata Letak di blogger, template ini juga dibekali paduan penggunaan pra instal dan pasca instal serta pengaturan widget-widget tambahan seperti 'Halaman kontak' dan sebagainya.
Tampilan mobile template fletro
Pada Google Adsense Webinar yang diadakan pada 15 Januari 2019 lalu, dijelaskan bahwa tren pengguna internet sebagian besar telah beralih dari desktop ke mobile. Hal ini dibuktikan dengan statistik rata-rata dari pengunjung blog ini pada mobile yang meningkat tiap bulannya bahkan hampir setengahnya adalah pengguna mobile.
Menanggapi hal ini kami mendesain tampilan template yang lebih mengutamakan pengguna mobile (tapi tetap tidak mengabaikan pengguna desktop). Pada saat halaman di akses pada mobile maka bagian Sidebar(samping) akan otomatis berada dibagian bawah artikel sebelum footer, kebanyakan pengunjung blog tidak akan menggulir halaman sampai ke paling bawah, untuk itu kami mengoptimalkan dan menghilangkan beberapa widget yang tidak penting pada tampilan mobile termasuk iklan adsense pada sidebar(karena akan berada di bagian bawah halaman), hal ini dilakukan dengan tujuan untuk mempercepat loading blog pada mobile.
Sebagai gantinya kami menyediakan satu slot iklan yang akan tampil secara landscape di bagian atas artikel desktop dan akan berada tepat diantara header dan judul artikel pada saat saat halaman tampil di mobile.
Kelebihan lain yang menunjang SEO sebuah situs adalah Schema markup, template sudah kami bekali schema ini agar Search Engine lebih mudah mengenali struktur dan bagian-bagian dari template. Yang pasti template ini sudah diuji dan lolos google structured data, silahkan klik disini untuk mengujinya kembali.
Hal yang percuma jika konten dan tampilan blog keren tapi loadingnya lambat, pengguna akan pergi bahkan sebelum halaman situs di load secara penuh. Diawal kami tegaskan bahwa pengalaman pengguna lebih diutamakan, termasuk kecepatan loading blog. Kami memaksimalkan penggunaan CSS dan HTML untuk beberapa fitur template ini dan mengurangi sebanyak-banyaknya penggunaan javascript atau jquery dalam template termasuk dalam penggunaan Icon.
Jawaban terbaik yang bisa kami berikan adalah SVG lebih stabil dan lebih ringan dari Font Awesome. Biasanya font awesome di load dengan menggunakan server pihak ketiga (font-awesome.min.css) ataupun menggunakan CSS @font-face yang artinya membutuhkan waktu loading lebih banyak untuk memuat satu halaman walaupun perbedaannya se-persekian detik sudah berpengaruh terhadap User Experience.
Jika menggunakan pihak ketika biasa ditulis dengan (font-awesome.min.css) otomatis akan memblokir rendering robot search enggine, kecuali diberi artibut async='' , Masalah lain yang muncul saat menggunakan pihak ketiga adalah; semua icon dalam penyimpanan server akan dimuat termasuk icon yang tidak digunakan padahal template hanya memakai beberapa icon dari Font Awesome. Jadi untuk apa meload semua icon yang bahkan tidak digunakan? Kesimpulannya adalah membuang-buang waktu.
Jika menggunakan CSS @font-face (web font) mungkin akan lolos dari block rendering, tapi pada hasil test Pagespeed Insight akan muncul eror "Ensure text remains visible during webfont load" seperi pada gambar dibawah ini:
Screenshot error pada situs yang menggunakan web font
Solusi terbaik yang bisa digunakan adala SVG Icon terlebih saat ini semua browser sudah support SVG, walaupun penulisannya terlihat ribet dan panjang tapi lebih stabil dan icon tetap terlihat pada saat offline sekalipun
Web font dan SVG saat offline
Template sangat mudah untuk digunakan, panduan penggunaannya pun ditulis secara lengkap dari mulai kustomisasi link header sampai mengubah share button bisa dilakukan pada menu Tata Letak Blogger (tanpa edit HTML). Jika Anda tidak suka dengan warna header dan footernya, Anda bisa mengubahnya sesuka hati.
Jika Anda tertarik dengan template ini silahkan hubungi kami untuk pembelian
Update : 28 Februari 2019
Update : 21 Oktober 2019
Update : 28 Oktober 2019
Update : 5 November 2019
Kami mengerti bagaimana UX (User Experience) bekerja dan karena itulah kami lebih mengedepankan pengalaman pengguna ketimbang interface dari blog itu sendiri namun tetap mempertahankannya, sebuah situs web atau blog yang baik adalah yang mampu membuat user-nya nyaman dan betah berada di situs tersebut.
Background desainer grafis sangat membantu kami mengembangkan template ini, salah satu temuan penting berdasarkan pengalaman pribadi yang sering sekali diabaikan oleh pengembang template adalah Kesalahan penggunaan hamburger menu pada desktop, dari segi interface memang terlihat elegan, tapi dari segi pengalaman pengguna hal ini sangat tidak direkomendasikan. Saya pribadi sering sekali menemukan situs yang menggunakan jenis menu ini di desktop agar di tampilan mobile terlihat keren, atau sebaliknya menggunakan horizontal menu di dekstop tapi mengorbankan tampilan mobile.
Untuk itu kami mendesain sebuah menu yang fleksibel dan tetap memperhatikan UI dan UX situs, menu ini akan tampil horizontal pada desktop dan berubah total pada tampilan mobile, silahkan buka demo template ini di tampilan dekstop dan mobile untuk melihat perbedaannya. Anda mungkin mengira kami menggunakan javascript yang kompleks untuk menu ini, tapi kenyataannya tidak!. Menu ini dibuat 100% pure CSS dan HTML, seperti yang dijelaskan diparagraf pertama "memaksialkan kinerja CSS namun tetap mempertahankan kecepatan loading blog".
Berikut adalah beberapa kelebihan yang kami tawarkan dari template ini:
1. User Friendly
Tampilan desktop template fletro
Fitur-fitur pada template dimaksimalkan untuk penggunanya (baik pengunjung atau pengelola blog) dari tampilan dan fitur lainnya termasuk untuk pengguna template ini; link, warna dan bahkan tombol share bisa langsung di edit pada menu Tata Letak di blogger, template ini juga dibekali paduan penggunaan pra instal dan pasca instal serta pengaturan widget-widget tambahan seperti 'Halaman kontak' dan sebagainya.
- Night Mode and Fullscreen Mode
Pastinya blog Anda tidak hanya dikunjungi disiang hari, bahkan ada beberapa blog yang intensitas pengunjungnya meningkat pada saat malam hari. Background putih pada layar kurang nyaman pada pengunjung dimalam hari, mata akan lebih cepat lelah karena terlalu banyak cahaya yang masuk. Untuk itu pada template ini disediakan fitur 'Night Mode' sebagai alternatif pilihan bagi pengunjung blog yang tidak menyukai background putih waktu membaca blog. Fullscreen membantu pengunjung lebih fokus ketika membaca artikel dari blog Anda.2. Mobile First / Responsive
Tampilan mobile template fletro
Pada Google Adsense Webinar yang diadakan pada 15 Januari 2019 lalu, dijelaskan bahwa tren pengguna internet sebagian besar telah beralih dari desktop ke mobile. Hal ini dibuktikan dengan statistik rata-rata dari pengunjung blog ini pada mobile yang meningkat tiap bulannya bahkan hampir setengahnya adalah pengguna mobile.
Menanggapi hal ini kami mendesain tampilan template yang lebih mengutamakan pengguna mobile (tapi tetap tidak mengabaikan pengguna desktop). Pada saat halaman di akses pada mobile maka bagian Sidebar(samping) akan otomatis berada dibagian bawah artikel sebelum footer, kebanyakan pengunjung blog tidak akan menggulir halaman sampai ke paling bawah, untuk itu kami mengoptimalkan dan menghilangkan beberapa widget yang tidak penting pada tampilan mobile termasuk iklan adsense pada sidebar(karena akan berada di bagian bawah halaman), hal ini dilakukan dengan tujuan untuk mempercepat loading blog pada mobile.
Sebagai gantinya kami menyediakan satu slot iklan yang akan tampil secara landscape di bagian atas artikel desktop dan akan berada tepat diantara header dan judul artikel pada saat saat halaman tampil di mobile.
3. Seo Friendly
Template sudah didesain agar seo friendly (Seo On-page) mulai dari breadcrumb sampai schema markup lainnya. Yang perlu Anda lakukan hanyalah menambahkan atribut alt='' pada setiap gambar di artikel dan menambahkan deskripsi penelusuran pada saat menulis artikel.4. Schema Markup / Valid Google Structured Data
Kelebihan lain yang menunjang SEO sebuah situs adalah Schema markup, template sudah kami bekali schema ini agar Search Engine lebih mudah mengenali struktur dan bagian-bagian dari template. Yang pasti template ini sudah diuji dan lolos google structured data, silahkan klik disini untuk mengujinya kembali.
5. Fast Loading
Hal yang percuma jika konten dan tampilan blog keren tapi loadingnya lambat, pengguna akan pergi bahkan sebelum halaman situs di load secara penuh. Diawal kami tegaskan bahwa pengalaman pengguna lebih diutamakan, termasuk kecepatan loading blog. Kami memaksimalkan penggunaan CSS dan HTML untuk beberapa fitur template ini dan mengurangi sebanyak-banyaknya penggunaan javascript atau jquery dalam template termasuk dalam penggunaan Icon.
6. SVG Icon
Kenapa menggunakan SVG? Kenapa tidak menggunakan Font Awesome untuk icon seperti template blog lainnya?Jawaban terbaik yang bisa kami berikan adalah SVG lebih stabil dan lebih ringan dari Font Awesome. Biasanya font awesome di load dengan menggunakan server pihak ketiga (font-awesome.min.css) ataupun menggunakan CSS @font-face yang artinya membutuhkan waktu loading lebih banyak untuk memuat satu halaman walaupun perbedaannya se-persekian detik sudah berpengaruh terhadap User Experience.
Jika menggunakan pihak ketika biasa ditulis dengan (font-awesome.min.css) otomatis akan memblokir rendering robot search enggine, kecuali diberi artibut async='' , Masalah lain yang muncul saat menggunakan pihak ketiga adalah; semua icon dalam penyimpanan server akan dimuat termasuk icon yang tidak digunakan padahal template hanya memakai beberapa icon dari Font Awesome. Jadi untuk apa meload semua icon yang bahkan tidak digunakan? Kesimpulannya adalah membuang-buang waktu.
Jika menggunakan CSS @font-face (web font) mungkin akan lolos dari block rendering, tapi pada hasil test Pagespeed Insight akan muncul eror "Ensure text remains visible during webfont load" seperi pada gambar dibawah ini:
Screenshot error pada situs yang menggunakan web font
Solusi terbaik yang bisa digunakan adala SVG Icon terlebih saat ini semua browser sudah support SVG, walaupun penulisannya terlihat ribet dan panjang tapi lebih stabil dan icon tetap terlihat pada saat offline sekalipun
Web font dan SVG saat offline
7. Ads Optimized
Pada teplate telah disediakan beberapa slot adsense yang bisa digunakan, penempatan slotnya sudah sesuai rekomendasi dari beberapa profesional dibidang adsense, diantaranya adalah pada bagian atas, tengan dan bawah artikel. Panduan penempatan dan penulisan kode adsense yang benar akan di tulis pada artikel berbeda.8. Easy Customize
Template sangat mudah untuk digunakan, panduan penggunaannya pun ditulis secara lengkap dari mulai kustomisasi link header sampai mengubah share button bisa dilakukan pada menu Tata Letak Blogger (tanpa edit HTML). Jika Anda tidak suka dengan warna header dan footernya, Anda bisa mengubahnya sesuka hati.
Fitur-fitur lainnya
- Interactive Search Form
- Heade Slide Menu
- Breadcrumbs (sudah terindex Google)
- Auto Readmore (tanpa script)
- Related Post (tengah dan bawah artikel, bawah artikel dapat diubah dengan Matched Content Ads)
- Numbered Blog Navigation (mudah diubah ke tampilan default blogger jika tidak suka)
- Lazy Youtube (Responsive)
- Custom Error Page
- Share Button (mudah di kustomisasi, diubah ataupun ditambah tombol lain)
- Back to Top Button
- Blogger Comment v2 (mudah diubah menjadi disqus comment)
- Fitur lain akan ditambahkan sesuai masukan dan permintaan pengguna
Update berkala
Template akan diupdate secara berkala sesuai dengan permintaan dan masukan dari pengguna dan akan di berikan secara gratis pada pembeli, template ini masih jauh dari kata sempurna karena itu peran pengguna template ini juga penting. Saran dan masukan dari pengguna sangat penting bagi kami, untuk itu kami minta pendapat Anda mengenai template ini yang akan dijadikan masukan untuk update berikutnya.Berapa biaya yang dikeluarkan untuk membeli template ini?
Template ini dijual dengan harga Rp. 195 ribu saja, harga bisa berubah sewaktu-waktu tanpa pemberitahuan.Jika Anda tertarik dengan template ini silahkan hubungi kami untuk pembelian
Log Update
Update : 26 Februari 2019- Perbaikan pada support image logo pada header
- Penambahan Ad Placement di bawah judul dan akhir artikel
- Sedikit perbaikan pada kode Javascript
- Sedikit perbaikan kada kode CSS
- Penambahan widget script iklan untuk menentukan iklan ditengah artikel muncul di paragraf yang ke sekian (jadi kalau mau ubah jarak muncul iklannya tidak perlu EDIT HTML)
- Penambahan widget untuk meletakkan iklan auto ads
Update : 28 Februari 2019
- Penambahan recent dan random post
- Penambahan sticky sidebar
- Penambahan script menentukan jarak muncul iklan tengah artikel
- Perbaikan error pada IE dan Edge
- Sedikit penambahan dan perbaikan kode CSS
Update : 21 Oktober 2019
- Penambahan beberapa artikel tutorial
- Sedikit penambahan dan perbaikan kode CSS
Update : 28 Oktober 2019
- Penambahan judul label pada halaman index
- Penambahan showhide comment
- Sedikit penambahan dan perbaikan kode CSS
Update : 5 November 2019
- Perbaikan pada tombol Night mode, sekarang fitur ini akan tetap berfungsi bahkan setelah halaman di refresh
- Sedikit penambahan dan perbaikan kode CSS
Post a Comment
Post a Comment