.png)
Advertisements
Advertisements
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 saat 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 menunjukkan caranya untuk di implementasikan didalam blog anda.
2) Klik Back Up lalu klik Edit Template
3) Salin semua kode dibawah ini lalu tempatkan di atas tag
4) Cari tag
5) Klik Save
2) Gunakan tag dibawah ini untuk menampilkan video
Keterangan :
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.
Langkah Pemasangan jQuery video youtube lazy load di Blog
1) Masuk ke dashboard blogger anda lalu klik Template2) 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 sebuah kiriman baru dengan menggunakan mode HTML2) Gunakan tag dibawah ini untuk menampilkan 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 membuat artikel atau tutorial yang didukung dengan embed atau menampilkan video dari youtube didalam postingan blog, anda hanya perlu menambahkan tag diatas.
Komentar