Postingan

Mailto Link + SVG Icon

Gambar
Apa itu mailto link? Mailto link atau disebut juga link send email adalah elemen interaktif yang berfungi untuk menavigasi atau mengarahkan tindakan klik pengguna menuju/membuka app mail client. Secara gamblang, link mailto berfungsi sebagai pemanggil aplikasi/program email client di sistem operasi. Biasanya Link mailto digunakan untuk membuat widget atau tombol send email di website/blog, dengan menggunakan link mailto pengunjung blog tidak perlu meninggalkan halaman dan mengetikkan email anda secara manual untuk mengimkan feedback kepada anda (pemilik blog). Ketika elemen interaktif yaitu link mailto diklik, jendela akan membuka software/aplikasi e-mail client yang ada di sistem operasi pengguna misalnya windows mail, microsoft ouloock untuk versi dekstop atau gmail, yahoo dan app email clients lainnya untuk versi mobile. [ads id="ads1"] Format HTML Link Mailto Berikut ini adalah hyperlink mailto dalam format kode html. <a href="mailto:yourmail@gmail.com...

Lazy Load gtag.js (Google Analytics)

Gambar
Lazy load gtag.js atau LazyAnalytics adalah script penunda perenderan pustaka gtag.js dengan metode window.addEventListener, browser akan menjalankan pustaka gtag.js setelah ada aktifitas scroll halaman dari pengguna. Cara kerjanya (Lazy load gtag.js) sama dengan lazyload adsense yang saya publikasikan pada artikel sebelumnya, jika kamu belum membacanya silahkan lihat disini . Dengan menerapkan window.addEventListener pada gtag.js, diharapkan browser akan fokus terlebih dahulu pada perenderan halaman (konten) anda sehingga waktu muat halaman akan terasa lebih cepat. Selain itu pengalaman halaman yang baik untuk pengguna (user experience) juga akan tercapai dengan mudah jika menggunakan script Lazy load gtag.js (Lazy load Google Analytics). [ads id="ads1"] Script LazyAnalytics <script type="text/javascript">//<![CDATA[ var LazyAnalytics=false;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&false=...

Petunjuk Penggunaan Google PageSpeed Insights Untuk Meningkatkan Performa Website

Gambar
Apa itu Google PageSpeed Insights? PageSpeed Insights Google adalah webtool audit website yang menggunakan teknologi lighthouse untuk mengukur performa (kecepatan) situs web, Menggabungkan data dari laporan pengalaman pengguna browser chrome (CrUX) untuk menampilkan data performa nyata tentang halaman web dan melaporkan 2 metrik yang disebut dengan First Contentful Paint (FCP) dan DOMContentLoaded (DCL). First Contentful Paint (FCP) First Contentful Paint adalah metrik yang melaporkan waktu saat browser pertama kali merender teks, gambar (termasuk gambar latar belakang), kanvas non-putih, atau SVG. Ini termasuk teks dengan font web yang menunggu keputusan. Ini adalah pertama kalinya pengguna dapat mulai mengonsumsi konten halaman. DOMContentLoaded (DCL). DOMContentLoaded adalah metrik yang melaporkan waktu ketika dokumen HTML awal telah sepenuhnya dimuat dan diurai, tanpa menunggu stylesheet, gambar, dan subframe selesai memuat. [ads id="ads1"] Dari sekian banyak web...

Social Counter Widget + Newsletter Subscription Form

Gambar
Social media counter dan widget newsletter merupakan widget yang sangat penting untuk blog. Dengan kedua widget tersebut kita dapat mempromosikan konten sekaligus memelihara minat pengunjung terhadap blog yang kita kelola. Maka dari itu saya memutuskan untuk membuat design widget yang lebih menarik yaitu dengan menggabungkan widget social counter dengan widget newsletter blogger. Kenapa harus menggabungkan widget social counter dengan widget newsletter blogger? Alasan yang paling kuat adalah menghemat tata letak blog agar terlihat rapi dan profesional, selain itu menggabungkan widget social counter dengan widget newsletter blogger merupakan upaya untuk meningkatkan fokus serta daya tarik pengunjung. View Demo [ads id="ads1"] Jika kamu sependapat dengan saya ikuti tutorial menambahkan/menggabungkan widget social counter dengan widget newsletter blogger berikut ini: Menggabungkan Social Counter Dengan Widget Newsletter Blogger Sebelumnya pastikan blog anda sudah mengi...

Cara Mengoptimalkan Kecepatan Loading Blog

Gambar
Kenapa kecepatan loading blog menjadi sangat penting? Berdasarkan analisa para pakar, blog yang cepat akan memanjakan pengguna ketika berada di situs web, menghemat waktu dan data yang di habiskan pengguna untuk membuka halaman blog. Itu dapat di buktikan dari data rasio pentalan (bounce rate) situs web, semakin cepat loading blog semakin kecil rasio pentalan, sebaliknya semakin berat loading situs web / blog semakin tinggi rasio pentalan blog tersebut. Jika kamu pernah membuka situs-situs amp (accelerated mobile pages) yang kecepatan pemuatan halamannya di atas rata-rata, kamu mungkin ingat bagaimana reaksi mu ketika masuk ke situs yang sangat cepat? seperti membolak-balik halaman yang mungkin bukan tujuan awal masuk ke situs tersebut. Jadi sekarang apakah kamu tertarik untuk meningkatkan kecepatan (speed) blog yang kamu kelola, hingga bisa bersaing dengan situs-situs cepat lainnya? Jika ya, ikuti panduan berikut ini untuk meningkatkan kecepatan blog. Mengoptimalkan PageSpeed Blo...

Mengecilkan Bobot Gambar (Compress Image File Size) Hingga 35Kb

Gambar
Mengecilkan Bobot Gambar (Compress Image File Size) Hingga 35Kb - Artikel ini saya dedikasikan untuk kamu yang profesi sebagai blogger atau pengelola website guna mendapatkan performa website yang lebih baik (optimal) yaitu dengan menggunakan progressive images dan bobot file gambar (image file size) yang dikecilkan. Tujuan Bobot gambar atau lebih umum disebut dengan istilah image file size merupakan faktor utama yang mempengaruhi performa website/blog, Oleh karena itu untuk mendapatkan performa situs web yang maksimal ukuran atau bobot file gambar perlu dikecilkan dengan tujuan agar server tidak terbebani oleh gambar yang ada di situs web yang berukuran (filesize) sangat besar. Semakin kecil bobot (file size) gambar maka semakin baik pula performa website dan sebaliknya bobot gambar yang sangat besar akan mengurangi pagespeed blog atau website anda. Pertanyan : Bagaimana cara yang baik untuk mengkompres/mengecilkan ukuran file (bobot) gambar? Jawaban : Untuk mendapatkan hasil ...

Kombinasi Widget Follow By Email Dan Blogger Subscribe Button

Gambar
Saya pikir ini adalah ide yang sangat cemerlang mengkombinasikan widget follow by email dengan blogger subscribe button dalam satu paket widget yang saya sebut dengan custom followbyemail + blogger subscribe button. Selain menghemat penggunaan code widget ini juga menghemat ruang dan tata letak blog. Tahu kenapa? Karena ketika kamu menambahkan widget follow by email dan widget follow blog (blogger subscribe button) secara terpisah maka secara otomatis blog akan memuat 2 paket code css, javascript dan html secara terpisah pula yang tentunya itu akan menambah beban server. Oleh sebab itu saya putuskan untuk mengemas kedua widget blogger ( followbyemail + subscribe button ) menjadi satu paket dan saya akan membagikan nya kepada teman-teman blogger secara geratis. Kelebihan Custom FollowByEmail + Blogger Subscribe Button. Ringan (Fast Loading). Responsive & Mobile Friendly. Hemat code dan ruang. [ads id="ads1"] Sekarang, kita langsung saja ke tutorial membuat/mem...