Blog Cepat Dengan Memasang Jquery Video Youtube Lazy Load - Hallo sahabat TIPS TUTORIAL ANDROID, Pada Artikel yang anda baca kali ini dengan judul Blog Cepat Dengan Memasang Jquery Video Youtube Lazy Load, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, Artikel Youtube Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Blog Cepat Dengan Memasang Jquery Video Youtube Lazy Load
link : Blog Cepat Dengan Memasang Jquery Video Youtube Lazy Load

Blog Cepat Dengan Memasang Jquery Video Youtube Lazy Load

Kecepatan menjadi salah satu faktor penting dalam menjaga performa blog di mata pengunjung. Khusus bagi anda penulis di blogger yang sering menampilkan video didalam kiriman artikel atau tutorial salah satu cara untuk menciptakan  blog anda menjadi lebih cepat pada ketika proses pengisian posting yakni dengan memasang LazyYT.js. Adalah sebuah jQuery yang dibentuk oleh Tyler Pearson khusus untuk menciptakan video youtube anda lebih cepat termuat. Dan kali ini aku akan coba mengatakan caranya untuk di implementasikan didalam blog anda.

Lihat Demo

Langkah Pemasangan jQuery video youtube lazy load di Blog

1) Masuk ke dashboard blogger anda kemudian klik Template
2) Klik Back Up kemudian klik Edit Template
3) Salin semua aba-aba dibawah ini kemudian tempatkan di atas tag </head>

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'>  //<![CDATA[  /*! * lazyyt * v0.1.5 - 2014-01-14 * Copyright (c) 2014 Tyler Pearson <ty.pearson@gmail.com> (http://tylerp.co); Licensed MIT %> */!function(a){"use strict";function b(b){var f=b,g=f.data("width"),h=f.data("height"),i=f.data("youtube-id");if("undefined"==typeof g||"undefined"==typeof h||"undefined"==typeof i)throw new Error("lazyYT is missing a required data attribute.");f.css({position:"relative",height:h,width:g,background:"url(http://img.youtube.com/vi/"+i+"/maxresdefault.jpg) center center no-repeat",cursor:"pointer","-webkit-background-size":"cover","-moz-background-size":"cover","-o-background-size":"cover","background-size":"cover"}).html('<p style="'+c+'" id="lazyYT-title-'+i+'" class="lazyYT-title"></p><img style="'+d+'" src="'+e+'" />').addClass("lazyYT-image-loaded"),a.getJSON("https://gdata.youtube.com/feeds/api/videos/"+i+"?v=2&alt=json",function(b){a("#lazyYT-title-"+i).text(b.entry.title.$t)}),f.on("click",function(a){a.preventDefault(),!f.hasClass("lazyYT-video-loaded")&&f.hasClass("lazyYT-image-loaded")&&f.html('<iframe width="'+g+'" height="'+h+'" src="//www.youtube.com/embed/'+i+'?autoplay=1" frameborder="0" allowfullscreen></iframe>').removeClass("lazyYT-image-loaded").addClass("lazyYT-video-loaded")})}var c=["z-index:100!important","color:#fff!important","font-family:sans-serif!important","font-size:12px!important","top:10px!important","left:12px!important","position:absolute!important","margin:0!important","padding:0!important","line-height:1!important","font-style:normal!important","font-weight:normal!important"].join(";"),d=["position:absolute!important","margin-left:-30px!important","margin-top:-20px!important","z-index:100!important","left:50%!important","top:50%!important"].join(";"),e="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAApCAYAAABp50paAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABV9JREFUeNrcWk1IK1cUvrmZGBOjJvr6xKe+Slvroi6kK6GrUkSxO12IC6GgUFBcuOlC8GdRulERV3VRQV0IKhRU0NJupK3tpi1dCRaxffWHGjWZPJNnNJlMz9FzX+ZNkzylcxP1wMdMZiYz97vnu+ee+2Njmc0GyANwgANQDCgAuABOwGOAG6AAiuh+MV3Lo+fc9KyN3qGYvnEBSAA0QBTwAnBp+P0ccAxQ6bkw/T4HRABn9B+8F6f/ZiRktjJANaCSUE0kkVApoBDgAeQTIeM7dAKjAuiG6+b7wniKstgMv+2m5xMGslgZIUAAEAOcAv4GHAL+BDwDBNMRxvOPAZ8C3iUPOVNUiGaCfgOV3MZe9z5OlSDAUzxzQZXyC+BLwM+pCtMJGCTvCTJxOlpBxGpLVzF2ajqiMvyAzwDfGuXyPuALkmyY5KGZ5GVGri1duXRyVIyOPsA7gO9R/iIYtQLKiSy7Q6T+b2UkSN7vAT4U7QGDz9Mbtp/7SPySjh9gj8EpApeyh2/YoyicuhlvhuBkVU3n2jA/cBkJxyUVjBuipz2HEf0qYcKs5w1ify6DbFVVVbSrq0s9ODhQlpaWClRVdUtWUyqLE0cPEn5CXkhI8HC8ubk5ODw8XJBIJOJNTU2H/f39j/f29jxZDJI2Iowq9nJiLk1KZWWYqcKHOC9pa2t7c21tLdTR0XHgdDo1kng22rdGQaucU2YlraY1TRPJACrIXldXVzU/P+8YHR09rqysVIkwz1JWxjmNZqQRBimbBxdIvLyvr8+7uroabGxs9NP1bAS0fOmE09Q2SsxdX19fsbCw4BgcHNzzeDxhGrDItCJO2s52hiVIO3w+X+nIyEgxRPCjmpqaE8lp7VU/nCeTMASrTO++GrTDM8UQzStB4uHOzs5niqIkJLRrLIeTG2QkpVZtthu9Fgk6amtrn8zMzLgmJyePvV7vmcVl0kUuncfuhumkiIqenh7f4uJiAJKWMwuDmS4krdyxURKOYz0Qvd0NDQ1Ri9+tKIbh050Zx+q6fjg1NaWtr6/7SO5WvTuq0ABZuNyWY7L6ycnJ0dDQ0OXc3FxFJBKxW0w4opCEcmnYrDh4Vd3c3FS7u7t929vbj6ipWT3IuOREOFeeRQ/GQqGQf2xsLNDS0vIIyBbRdU2Cgl5K2pYD+SKpF1tbW0cDAwOu5eXlKkleNdqVpMMyk3eQaioJ6zCo8M/OzsZh6Fi0v79fYsi+ZNpzJByU6WHD4AEJ4QxpfHd392hiYuJyenq64vz8XGGvrlJIHSbix46lavc60xISVjc2NsK9vb0ukHKZYeIhG00I7WpeOirxQ3xnZwc99w90MaHx8fFAa2trMZAtYcl542wYOhbXoU7xox8BvmLJFTxLCRcWFkbb29tVv9+vrKyseOnj2SL6MqUEHAA+QcJ1gDl2PTcdldCexeKXCEq5GIrizOzvgC5OUTrI/rtua1ncYsl1nlzm7CjpCKcTld3vtaQbZVlY+SJoBR4wUeHIPUyykDBOwP8mZgTYw1pQQy755N2fsGlxurgO+JUmAxyGh/V7VgHmMjspNn0D+IEZZhOwDf/FrheOn7Lkdgexkm43vfB18rF8JuQGvYCD4DSUH69/B/gccJSqgG+z630euJb6Fv3JaSCfjpBm6McTFqWKNvbqPg6eIefXSbYXVAbc8PIH4EfA1+x620NGj2Cf7KMOG7cm4fi0hK5XUw0KiG1MeHQTHBZGVrFjJ0znuEXpjIItdnX7FHRPCeLeITPt4LmtBEWNiz1XYj7MxZJbmPIJpSy5pUlUXDrPxAzKiBBJN53vk9fE/q0okY4ZVBS7jaL+FWAA/y++OTUmOgsAAAAASUVORK5CYII=";a.fn.lazyYT=function(){return this.each(function(){var c=a(this).css("cursor","pointer");b(c)})}}(jQuery); //]]> </script> 
   

4) Cari tag </body> kemudian tempatkan aba-aba dibawah ini sempurna di atasnya.

 <script type='text/javascript'> $('.js-lazyYT').lazyYT(); </script> 
 

5) Klik Save

Langkah penggunaan video youtube lazy load didalam posting Blog

1) Buat sebuah kiriman gres dengan memakai mode HTML
2) Gunakan tag dibawah ini untuk menampilkan video

 <div class="js-lazyYT" data-youtube-id="IcWJ79yUy3U " data-width="300" data-height="200"></div>

Keterangan : IcWJ79yUy3U yaitu id dari video youtube anda.
3) Klik Publish

Setiap kali anda ingin menciptakan artikel atau tutorial yang didukung dengan embed atau menampilkan video dari youtube didalam postingan blog, anda hanya perlu menambahkan tag diatas.

Demikianlah Artikel Blog Cepat Dengan Memasang Jquery Video Youtube Lazy Load

Sekianlah artikel Blog Cepat Dengan Memasang Jquery Video Youtube Lazy Load kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Blog Cepat Dengan Memasang Jquery Video Youtube Lazy Load dengan alamat link https://tipstutorial-android.blogspot.com/2020/03/blog-cepat-dengan-memasang-jquery-video.html

Share this post