Blog Cepat Dengan Memasang Jquery Video Youtube Lazy Load

Kecepatan menjadi salah satu aspek penting dalam mempertahankan penampilan blog di mata pengunjung. Khusus untuk anda penulis di blogger yang sering memperlihatkan video didalam kiriman postingan atau bimbingan salah satu cara untuk bikin  blog anda menjadi lebih singkat pada dikala proses pengisian posting yaitu dengan memasang LazyYT.js. Adalah suatu jQuery terbuat oleh Tyler Pearson khusus untuk bikin video youtube anda lebih singkat termuat. Dan kali ini saya akan coba menyampaikan caranya untuk di implementasikan didalam blog anda.

Lihat Demo

Langkah Pemasangan jQuery video youtube lazy load di Blog

1) Masuk ke dashboard blogger anda lalu klik Template
2) Klik Back Up lalu klik Edit Template
3) Salin semua kode dibawah ini lalu 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> lalu tempatkan kode dibawah ini tepat di atasnya.

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

5) Klik Save

Langkah penggunaan video youtube lazy load didalam posting Blog

1) Buat suatu kiriman baru dengan memakai mode HTML
2) Gunakan tag dibawah ini untuk memperlihatkan video

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

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

Setiap kali anda ingin bikin postingan atau bimbingan yang disokong dengan embed atau memperlihatkan video dari youtube didalam postingan blog, anda cuma perlu menyertakan tag diatas.

Sumber https://8tutorialandroid.blogspot.com

Share this post