Tutorial Singkat Membuat Smooth Loading Blog [ Blogger]

JagoBlog.com – Smooth Loading? Apa itu? Apa pengaruhnya? Bagaimana cara membuatnya? Nah Jago Blog kali ini akan membahas seputar Blogging yang terkait kenyamanan pengunjung, yaitu soal tampilan situs sobat.

Ada banyak cara membuat situs terlihat dan bernilai lebih salah satunya dengan efek smooth loading. Yang contohnya bisa sobat lihat langsung di blog Jago Blog ini.

Jika sobat perhatikan maka situs ini akan terbuka lembut( dari gambar dan tulisan) ketika di scroll kebawah. Tapi tidak terlalu terlihat, karna efek ini akan lebih terlihat jika sobat memiliki situs yang scrollingnya panjang.

Demonya bisa sobat lihat di video paling bawah postingan ini :

To the Poin : Bagaimana Cara Membuatnya?

BACA JUGA : Cara Aman Mempercepat Loading Unit Iklan Adsense di Blogger 
 
Cara membuatnya sangat gampang sobat cukup memasukan script script berikut di editor template

1 Buka Blogger > template > edit HTML

2. Tambahkan script ini di atas </body>

3. Script code :

<script type='text/javascript'>

//<![CDATA[

// Smooth Lembut Loading

(function(a){a.fn.smoothload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").smoothload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKO_EzF-THux8iWWrqWZhm1AxTDm50b4K0hYoXLfopK25IpxubbCMLeIQAy5NajGygEzMwuLEQwD7_KucG7fUnUvHMIC1B3sjYsTcqU10xIJHkSf9VlBtjMSMRL_-bdDnBWjcWzLdgh6g/h120/jagobloglazy.gif",effect:"fadeIn",threshold:"-50"})});

//]]>

</script>

4. Save template

5. Klik Lihat Blog dan lihat hasilnya

Nah bagaimana sob keren bukan? Nah sobat bisa mencoba mengganti efeknya dengan mengganti kode yang ditandai dengan warna merah diatas dengan list sebagai berikut ( coba satu satu : zoom, fadeIn, fadeOut, peakIn dst seperti effect di power point), dan pilih yang mana sesuai dengan situs sobat, dan apa pengaruhnya.

Sekian tutuorial singkat bagaimana cara membuat smooth loading di blog (khusus blogger), nantikan tutorial singkat bermakna lainnya hanya di Jago Blog.

Nonton Demonya disini juga bisa :

Artikel Terkait

Tutorial Singkat Membuat Smooth Loading Blog [ Blogger]

4/ 5

Oleh Jufrika

Jufrika 3 Komentar