Blog Cepat Dengan Memasang Jquery Video Youtube Lazy Load

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

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 isyarat 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 <[email protected]> (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(https://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 isyarat 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 merupakan id dari video youtube anda.
3) Klik Publish

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


Sumber artikel ini dari blog heyriad