2016-08-16

Tutorial Singkat Membuat Smooth Loading Blog [ Blogger]

JagoBlog.comSmooth 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://lh3.googleusercontent.com/-DR-30VkXWLE/V440RWBMzVI/AAAAAAAACQU/dIUFyi8pIgQ4fkgDlUAYsFYzzwdTFLJBgCLcB/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

Berlangganan

Suka dengan artikel kami ? Ayo berlangganan gratis via email

3 komentar

Wednesday, August 17, 2016 delete

selamat siang, jagoblogcom. terima kasih atas tutorial mempercepat loading dengan smooth loading blogger. melihat tulisan ini awalnya saya masih bingung dengan foto rambut yang diposting dengan konten artikel didalamnya. Eh...ternyata eng, ing-eng...saya mengerti sekarang.:)

Reply
avatar
Friday, August 19, 2016 delete

Alhamdulillah jika sobat mengerti dengan kiasan foto foto yang ada di blog ini, semoga tutorialnya bermanfaat ;)

Reply
avatar
Sunday, August 28, 2016 delete

Baik sobat admin jagoblogcom. Tentu tulisan sobat admin jablogcom sangat bermanfaat untuk saya.

Reply
avatar

1. Berkomentarlah layaknya budaya timur yang sopan
2. Komentar spam seperti : tidak relevan, iklan, berkata kotor akan dihapus.