Dampak Negatif Dan Positif Saat Menggunakan Script Lazy Load

Hallo ketemu lagi dengan saya Putu Rastakhen admin blog ID Dzgn ini, kali in saya mau membagikan sedikit informasi Dampak Negatif Dan Positif Saat Menggunakan Script Lazy Load Di Blog, nah sebelumnya saya sudah membagikan tutorial Untuk: Cara Menpercepat Blog Dengan Memasang Script Lazy Load,
Banyak pengguna blog yang sudah memakai script lazy load ini demi meningkatkan kecepatan loading situs yang lambat, Siapa yang tidak berkiinginan memasang script ini pada blog, namun perlu diketahui script yang mampu meningkatkan kecepatan loading situs blog ini pun juga tetap memiliki dampak negatif dan positif saat kamu menggunakanya. script ini dkhususkan pada gambar yang ada di blog/situs.

Salah satu yang menjadi penyebab utama lambatnya loading situs blog adalah gambar, karena gambar yang akan di muat pada situs terdapat ukurang yang besar sehingga memberikan efek lambat saat gambar di muat, nah dengan anda memasang script lazy load ini pada situs blog anda, maka akan ada perubahan nantinya bukan berarti gambar akan di perkecil ukuranya dan berkualitas renda, tentu tidak akan terjadi hal seperti itu.

Cara Kerja Script Lazy Load

Setelah kita memasang script lazy load tentu akan mempercepat loading situ blog anda, karena gambar akan di muat pada akhir setelah halaman situs blog anda sudah sepenuhnya selesai, baru gambar akan  muncul.gambar akan di muat secara berurutan dari atas ke bawah, pemuatanya pun tidak memakan waktu yang cukup lama kurang lebih kurangnya 1 detik gambar akan selesai dimuat. jika pada 1 halaman situs blog terdapat banyak gambar maka waktu yang di butuhkan cukup memakan waktu lama namun dipastikan gambar dengan perlahan akan di muat.

Dampak Positif Saat Menggunakan Script Lazy Load Pada Blog

Dampak positifnya pasti sudah anda keetahui sebelumnya!, ya dampak positifnya adalah situs blog akan di muat lebih cepat dari sebelumnya. Untuk mengetahui apakah situs blog mendapatkan peningkatan setelah memasang script lazy load ini, anda bisa gunakan tools online untuk mengecek sebelum dan sesudah anda memasang script lazy load pada situs blog anda.

Dampak Negatif Saat Menggunakan Script Lazy Load Pada Blog

Untuk dampak negatif saat menggunakan script lazy load ini pada blog yaitu pada saat situs blog di buka melalui prangkat mobile yang kecepatan jaringanya tidak setabil, maka akan berdampak gambar tidak muncul (tidak dimuat), bukan hanya pada tampilan prangkat mobile namun tampilan deskop'pun akan mengalami hal yang sama jika kecepatan jaringan tidak setabil.

Selain itu browser juga bisa menjadi kendala yang bisa menimbulkan dampak negatif saat menggunakan script lazy load ini, UC Browser adalah salah satu browser yang tidak mendukung script lazy load ini dikarenakan uc browses terdapat fitur hemat data meskipun kecepatan jaringan cukup cepat namun gambar situs laman blog blum terbuka semua maka yang terjadi gambar tidak akan dimuat lagi seperti halnya browser lain seperti Firefox, Chrome, dan Browser lain bawaan mobile, ini disebabkan oleh fitur hemat data yang ada pada uc browser ini.

Nah mungkin sampe disini dulu untuk artikel ini semoga bisa menjadi manfaat bagi anda, kenali dulu penggunaanya karena dibalik kegunaanya yang bermanfaat ada dampak positif dan negatif yang akan muncul di waktu mendatang, jika anda tertarik untuk memasang script lazy load ini langsung saja ke artikel sebelumnya☺: Cara Mempercepat Loading Blog Dengan Memasang Script Lazy Load

Sumber: http://www.anggasave.com/2017/07/dampak-kekurangan-script-lazy-load.html

Cara Mempercepat Loading Blog Dengan Memasang Script Lazy Load

Baiklah sahabat kali ini saya akan coba membagikan Tutorial blogger lagi yaitu: Cara Mempercepat Loading Blog Dengan Memasang Script Lazy Load, Script Lazy Load adalah salah satu trick yang sudah banyak di terapkan di berbagai penggunaan template blog untuk mempercepat loading saat situs laman di muat, Script lazy load ini bekerja pada gambar yang nantinya akan di muat secara berurutan sesudah situs laman anda sepenuhnya sudah di muat baru gambar ini akan di muat dengan cepat.

Script lazy load ini sangat di sarankan bagi pengguna situs blog yang memiliki kecepatan loading yang lambat saat di muat, dengan memasang script lazy load ini blog akan menjadi lebih ringan dari sebelumnya, namun script ini juga memiliki dampak kekurangan yang bisa memberikan dampak tidak berjalanya script lain, maka dari itu sangat di sarankan sebelum anda memasang script lazy load ini pastikan anda sudah melakukan backup terlebih dahulu terhadap template yang anda gunakan.

Cara Memasang Script Lazy Load Pada Template Blog

Memasang script lazy load ini sangatlah mudah, mari ikuti langkah-langkah pemasanganya dibawah ini☺
1. Silahkan anda buka Blogger>Template>Edit Html, jika sudah muncul list kode HTML template silahkan sekarang anda cari kode </body>  lalu copy pastekan kode di bawah ini tepat di atas kode </body> tadi, untuk mempercepat pencarian silahkan klik tombol

CTRL

+

F

pada keyboar anda.

<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=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").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6QIMfHqKMAVgJSPNS0ya9IRlcbCFINtjbOKBIxD7u9Uwas-VnHTv74w5DwBpdIzI5msBs1YVOcoHI81pFEJf8vc3kc-9Ab8GWwETXv-RmQRXZJ3VpYzxKFEWFsXaeZ4UbX8Bmy6cXFIM/s1600/Bannerku.png",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

2. Jika sudah silahkan sekarang save/simpan template lalu coba check dengan membuka situs blog anda, atau bisa juga sebelum anda memasang script lazy load di atas untuk mengetahui apakah ada peningkatan kecepatan nilai loading blog anda silahkan check terlebih dahulu menggunakan tools check online saran gunakan Tools online GTMatrix.

Bukan hanya gambar yang bisa di gunakan script lazy load untuk mepercepat loading blog, Iklan dari Google Adsense pun bisa karena salah satu penyebab dari lambatnya loading adalah iklan Google Adsense. jika tertarik silahkan anda baca artikel berikut: Tips Jitu Untuk Meringankan Iklan Google Adsense Dengan Menambahkan Script Lazy Load.
Mungkin sampe di sini dulu nantikan info menarik seputar blogger hanya di blog ini. terimakasi

Material Design Artikel Terkait Otomatis Dalam Postingan Blog

Sebelumnya saya mohon maaf karena jarang sekali melakukan update artikel di blog ini, di karenakan saat ini saya sedang menjalani proses ulangan semester di sekolah.

Material Design Artikel Terkait Otomatis Dalam Postingan Blog: Tutorial Blog yang kali ini akan saya bahas mungkin sudah banyak blog lain yang mempublikasi tutorial ini.
Artikel Terkait: digunakan untuk menampilkan artikel lain yang berhubungan dengan artikel yang sedang di baca, atau artikel yang memiliki kategory yang sama namun berbeda pembahasan yang di sisipkan pada postingan tertentu, itu adalah penjelasan singkat kegunaan Artikel terkait dalam postingan.

Artikel Terkait kali ini menggunakan efek Material Design sehinggan tampilan yang di hasilkan rapih, sehingga terlihat lebih prefesional di mata pengunjung.

Anda tidak susah-susah lagi jika ingin menaruhkan Artikel Terkait lagi dalam postingan karena artikel terkait yang akan kita bahas kali ini sudah otomatis akan muncul, anda hanya harus memasang script pemanggilnya saja.

Result

Nah jika masih kurang jelas silahkan anda lihat demonya dengan mengklik link di atas ini, lalu geser scroll ke bawah, Bagaimana keren bukan langsung saja untuk tahap pemasanganya di blog.

Material Design Artikel Terkait Otomatis Dalam Pos Postingan Blog

1. Masuk ke Blogger>Tema>Edit Html, pada Edit Html silahkan kamu cari kode ]]</b:skin> lalu pastekan kode berikut tepat di atasnya, untuk mempercepat pencarian silahkan anda klik tombol

CTRL

+

F

pada keyboard kamu.

.front-articles{position:relative;padding:0;margin:15px auto;width:100%;border-radius:0 0 3px 3px;box-shadow:0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12)}.front-articles h4{background-color:#273e80;padding:15px 12px;border-top-right-radius: 4px;border-top-left-radius: 4px;margin:0;font-size:15px;font-weight:600;letter-spacing:1px;color:#FFF}.front-articles ul{margin:0;padding:0}.front-articles ul li{background-color:#FFF;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border-bottom:0}.front-articles ul li:nth-child(odd){background-color:#FFF}.front-articles ul li:before{content:'\f105';font-family:'FontAwesome';position:absolute;margin:0 9px 0 4px;color:#0042ff;overflow:hidden}.front-articles ul li:hover:before{content:'\f107';font-family:'FontAwesome'}.front-articles a{color:#444;font-size:13px;margin:0 0 0 30px}.front-articles a:hover{color:#1da4c2}.front-articles ul li:nth-child(n+4) {display:none}

2. Nah jika sudah selesai selanjutnya silahkan cari kode <body> lalu copy pastekan script di bawah ini di atasnya.

<script type='text/javascript'>
//<![CDATA[
var frontArticles = new Array(); var frontArticlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; frontArticles[frontArticlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[frontArticlesNum] = entry.link[k].href; frontArticlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = frontArticles[i];}} frontArticles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((frontArticles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < frontArticles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + frontArticles[r] + '</a></li>'); if (r < frontArticles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>

3. Selanjutnya silahkan anda simpan/save template anda, lalu selanjutnya silahkan anda buat postingan baru atau mungkin masuk ke edit postingan lama anda pindahkan mode Compose>HTML lalu masukan kode script pemanggil berikut.

<div class='front-articles'>
<script src='/feeds/posts/default/-/Tutorial Blog?alt=json-in-script&callback=related_results_labels&max-results=4' target='_blank' type='text/javascript'></script>
<h4>Baca Artikel Ini</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
        </script>
</div>

Silahkan anda ubah Tutorial Blog sesuai dengan kategory postingan yang ingin di tampilakan.

4. Silahkan anda publikasikan, lalu lihat hasilnya.

Nah bagaimana mudah bukan, mungkin sampai di sini saja tutorial yang saya sampaikan kali ini sampe ketemu di lain waktu selamat menunaikan ibadah puasa. :D

Cara Merubah Tampila Warna Address Bar Di Browser Mobile Sesuai Dengan Loyout Blog

Hallo kali ini blog ID Dzgn akan coba mengupas tutorial blog yang mungkin kalian belum ketahui atau mungkin sudah, bagi yang belum mengetahui mungkin masih penasaran dengan tutorial yang saya bagikan kali ini. Tutorial kali ini adalah: Cara Merubah Tampila Warna Address Bar  Di Browser  Mobile Sesuai Dengan Loyout Blog , Nah pastinya sobat ID Dzgn pernah mengunjungi situs web dalam tampilan mobile, nah di addres bar browser pasti terkadang kamu bingung karena addres bar warnanya berbeda dengan tampilan situs web lain, jika kamu pengguna blogger kamu bisa merubah tampilan warna addres bar situs kamu sesuai dengan keingan kamu, caranya pun tidak terlalu ribet hanya harus menambahkan tag untuk merubah warnanya pada setiap tampilan browser mobile yang berbeda.

Baca Artikel Ini

Nah di atas adalah gambar demo yang memperlihatkan perbedaan warna addres bar pada browser mobile, langsung saja ke tutorial pemasanganya di bawah ini!

Cara Merubah Tampila Warna Address Bar Browser Smartphone Sesuai Dengan Loyout Blog

1. Silahkan buka Blogger>Tema>Edit Html, lalu pastekan kode berikut tepat di atas kode </head> untuk mepercepat pencarian silahkan klik tombol

CTRL

+

F

Pada keyboard leptop kamu

<!-- Warna untuk Chrome, Firefox OS, Opera dan Vivaldi -->
<meta content='#0048b4' name='theme-color'/>
<!-- Warna untuk Windows Phone -->
<meta content='#0048b4' name='msapplication-navbutton-color'/>
<!-- Warna untuk iOS Safari -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#0048b4' name='apple-mobile-web-app-status-bar-style'/>(e=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:e,width:e})),i=o.pageX-$(this).offset().left-t.width()/2,n=o.pageY-$(this).offset().top-t.height()/2,t.css({top:n+"px",left:i+"px"}).addClass("animate")})});//]]></script>

2. Sekarang silahkan kamu Save/Simpan dan buka situs web kamu pada tampilan mobile dan lihat hasilnya.

Untuk mengganti warna silahkan kamu ganti kode warna #0048b4 sesuai dengan keingan kamu.

Nah bagai mana shobat mudah bukan, ya caranya cukup mudah dan simple menurut saya. Semoga Tutorial Blog di atas bisa bermanfaat buat kamu, jangan mudah menyerah teruslah melangkah tampa rasa lelah (Kata Bijak) Terimakasi.

Material Design Membuat Tombol Back To Top Effect Ripple Di Blog

Hallo sobat blog ID Dzgn, kali ini saya akan coba membagikan tutorial untuk: Material Design Membuat Tombol Back To Top Effect Ripple Di Blog, sudah hampir satu bulan saya tidak membuat postingan artikle untuk sobat semua, maklum akhir-akhir ini saya kena demam (Males Ngeblog) kalo ada yang mungkin punya solusi untuk penyakit saya ini tolong di bagikan yaa di kotak komentar di bawah.

Material Design Membuat Tombol Back To Top Effect Ripple Di Blog: Back To Top pada blog digunakan untuk memudahkan pengunjung untuk men-scroll posisi dari bawah laman postingan ke atas sesuai dengan efek animasi keyframe yang di gunakan. Tombol back to top ini akan muncul bila scroll mouse atau scroll vertikal di geser ke bawah.
Tombol ini juga biasanya akan menambah kesan menarik tampilan web/blog sehingga tampilan akan terlihat prefesional di mata pengunjung, Hampir seluruh pengguna blog dan website menggunakan tombol back to top ini namun dengan tampilan yang berbeda-beda.
Nah yang kali ini saya bagikan adalah tombol back to top material design yang menggunakan effect ripple, jika kurang jelas silahkan lihat gambar demonya di bawah ini.

Tertarik membuatnya?? Yuk intip cara membuat dan memasangnya di bawah!!☺

Material Design Membuat Tombol Back To Top Effect Ripple Di Blog

1. Silahkan kamu buka Blogger>Tema>Edit Html lalu cari kode ]]></b:skin> pastekan kode CSS berikut tepat di atasnya, untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

pada keyboard leptop kamu.

#BackToTop{overflow:hidden;position:fixed;transform:scale(0);z-index:90;right:30px;bottom:31px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);width:55px;height:55px;color:#fff;text-align:center;background-color:#2196F3;font-size:22px;line-height:52px;cursor:pointer;border-radius:100%;transition:all .2s ease-in-out}#BackToTop:hover{background-color:#1976D2;color:#fff;box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}#BackToTop.active{transform:scale(1)}.ripplelink{border:1px solid rgba(0,0,0,0.12);position:relative;overflow:hidden;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;z-index:0}.ink{display:block;position:absolute;background:rgba(255,255,255,0.3);border-radius:100%;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.animate{-webkit-animation:ripple .65s linear;-moz-animation:ripple .65s linear;-ms-animation:ripple .65s linear;-o-animation:ripple .65s linear;animation:ripple .65s linear}@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2.5)}}@-moz-keyframes ripple{100%{opacity:0;-moz-transform:scale(2.5)}}@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2.5)}}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}.kbrd{border-radius:3px;border:1px solid #a3a3a3;box-shadow:1px 0 1px 0 #FFF,0px 2px 0 2px #D3D3D3,0px 2px 0 3px #888;box-sizing:border-box;display:inline;font-family:inherit;font-stretch:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;margin:0 5px;padding:1px 5px;text-transform:capitalize;vertical-align:baseline}

2. Jika sudah selanjutnya silahkan kamu pastekan kode berikut tepat di atas kode </body>

<div class='ripplelink' href='#' id='BackToTop'><i class='fa fa-angle-up'></i></div>
<script type='text/javascript'>
jQuery(document).ready(function(e){var t=e("#BackToTop");e(window).scroll(function(){e(this).scrollTop()>=200?t.show(10).animate("#BackToTop").addClass("active"):t.animate("#BackToTop").removeClass("active")});t.click(function(t){t.preventDefault();e("html,body").animate({scrollTop:0},400)})})
//<![CDATA[
$(function(){var t,e,i,n;$(".ripplelink").click(function(o){0===$(this).find(".ink").length&&$(this).prepend("<span class='ink'></span>"),t=$(this).find(".ink"),t.removeClass("animate"),t.height()||t.width()||(e=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:e,width:e})),i=o.pageX-$(this).offset().left-t.width()/2,n=o.pageY-$(this).offset().top-t.height()/2,t.css({top:n+"px",left:i+"px"}).addClass("animate")})});//]]></script>

3. Terakhir silahkan kamu save/simpan tema

Nah jika 3 tahap di atas sudah kamu lakukan sekarang coba kamu lihat hasilnya di blog kamu.
Mungkin hanya itu saja yang saya bisa sampaikan pada artikle tutorial kali ini, semoga bisa bermanfaat buat kamu terimakasi.