Efek Progress Loading Blog adalah metode yang digunakan untuk menampilkan suatu animasi atau gambar-loading saat website atau blog sedang memuat suatu halaman. Efek ini memberikan pengalaman pengguna yang lebih baik karena pengunjung akan tahu bahwa website sedang memuat konten dan tidak membuatnya berpikir bahwa situs tidak responsif atau bahkan mati.
Pada dasarnya, efek ini memang tampak sederhana namun mampu membawa dampak yang besar pada pengalaman pengguna. Sebuah studi oleh Kissmetrics menemukan bahwa kerugian akibat loading page yang lambat dapat meningkatkan bounce rate hingga 90%, sementara 79% pengunjung tidak akan kembali ke website yang lambat.
Dengan menggunakan efek progress loading blog, blog Anda akan terhindar dari masalah tersebut dan tetap membuat pengunjungnya kembali dan lagi-lagi kembali karena mereka tahu bahwa halaman sedang dimuat dengan cepat.
Meskipun efek progress loading blog umumnya digunakan untuk halaman web berbasis teks saja, efek ini juga sangat berpengaruh ketika diterapkan pada platform multimediasi. Karena gambar, video, maupun animasi memerlukan memori yang lebih besar, biasanya waktu pemuatan akan lebih lama. Tapi, dengan efek progress loading blog, kamu bisa memastikan bagi pengunjung bahwa gambar, video, dan animasi sedang diunduh.
Menggunakan efek progress loading blog akan memperkuat kredibilitas Anda sebagai blogger sekaligus meningkatkan nilai dari blog Anda dengan menawarkan pengalaman pengunjung yang lebih baik. Saat Anda menerapkan metode ini, pastikan desain loading blog tersebut tidak terlalu menutupi seluruh halaman, tetapi cukup menampilkan keterangan atau gambar animasi loading yang cukup hard enough.
Dalam menyesuaikan jenis efek progress loading blog, banyak layanan seperti jQuery atau CSS yang terintegrasi dan juga memudahkan pengguna dalam pembuatannya. Namun bagaimanapun, ketika Anda membuat suatu efek progress loading blog pada blog Anda, jangan lupa juga untuk memikirkan kecepatan pemuatan halaman. Gunakanlah gambar dengan ukuran kecil, letakkan kode jarawa script di akhir halaman, dan hindari memuat terlalu banyak widget dan gadget yang tidak perlu.
Cara Membuat Efek Progress Loading Blog seperti di Youtube:
1. Buka blog dan edit tema.
2. Cari kode </body> dan Anda dapat mencarinya dengan CTRL+F.
3. Jika sudha ketemu silahkan salin kode di bawah ini dan tempelkan di atas kode </body> yang sudah di cari tadi.
<script type='text/javascript'>//<![CDATA[var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"3px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#df0d0d";this.bars=[];b=this.el=document.createElement("div");c(this.el,k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);//]]></script>
4. Simpan dan lihat hasilnya.
Kamu mungkin merasa tidak pernah memperhatikan efek progress loading blog, namun sangat mungkin efek ini telah memberi pengaruh signifikan pada pengalaman pengguna Anda. Jadi, ketika membuat blog, efek progress loading blog sangat penting bagi para blogger karena tidak hanya meningkatkan pengalaman pengguna, namun juga meningkatkan kredibilitas blog Anda sekaligus membuat pengunjung betah di blog Anda. Jadikanlah efek progress loading blog sebagai bagian yang tidak terpisahkan dari desain blog Anda!
