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 membuat  blog anda menjadi lebih cepat pada dikala proses pengisian posting yakni dengan memasang LazyYT.js. Adalah sebuah jQuery yang dibuat oleh Tyler Pearson khusus untuk membuat video youtube anda lebih cepat 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 arahan 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 arahan 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 sebuah kiriman baru dengan menggunakan 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 ialah 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 https://8tutorialandroid.blogspot.com/

Share this post