Cara Memasang Script Lazy YouTube di Blog

Rezapedia.com - Pada artikel sebelumnya mimin sudah membahas mengenai cara memasang script lazy load image dan lazy load adsense. Jika kalian belum tahu apa itu lazy load, Lazy Load merupakan cara optimasi untuk meringankan banyak beban dalam loading saat memuat halaman blog. Sehingga waktu yang digunakan untuk membuka halaman jauh lebih cepat karena jumlah data yang harus diunduh lebih sedikit dan ringan.

Bagi kalian yang aktif nge-blog dan suka mencantumkan video youtube pada setiap artikelnya pasti akan membuat loading blog kalian menjadi sangat lambat karena terdiri dari berbagai macam komponen seperti gambar, iklan, video youtube, dan lainnya. Nah, mimin sarankan kalian untuk menggunakan lazy youtube ini agar situs kalian nge-load nya tidak lambat lagi.

Baca juga: 6 Cara Untuk Mempercepat Loading Blog

Script lazy youtube ini sangat berguna untuk mempercepat loading ketika memuat halaman yang terdapat kode embed youtube, karena script lazy youtube ini berfungsi untuk memuat video youtube apabila kita mengeklik videonya. Oiya script lazy youtube ini mimin dapatkan dari situs nya mba igniel.com.

Memasang Script Lazy YouTube di Blogspot

Pertama-tama kalian harus menambahkan kode css lazy youtube terlebih dahulu, tambahkan tepat diatas  </style> atau ]]></b:skin>.

/* Youtube Lazy Load by igniel.com */
.ignielYTlazy {
  background-color: #000;
  margin-bottom: 30px;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}
.ignielYTlazy img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 0.7;
}
.ignielYTlazy .button {
  width: 68px;
  height: 48px;
  background-color: #333;
  opacity: .8;
  box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
  z-index: 1;
  border-radius: 12px;
}
.ignielYTlazy .button:before {
  content: "";
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent #fff;
}
.ignielYTlazy img,
.ignielYTlazy .button {
  cursor: pointer;
}
.ignielYTlazy img,
.ignielYTlazy iframe,
.ignielYTlazy .button,
.ignielYTlazy .button:before {
  position: absolute;
}
.ignielYTlazy .button,
.ignielYTlazy .button:before {
  top: 50%;
  left: 50%;
  transform: translate3d( -50%, -50%, 0 );
}
.ignielYTlazy iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

Lalu bila sudah, kalian bisa tambahkan script ini tepat diatas </body>.

<script> //<![CDATA[
/* Youtube Lazy Load by igniel.com */
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('H b=["\\w\\c\\c\\e\\u\\B\\k\\k\\g\\l\\t\\p\\r\\h\\j\\c\\j\\s\\a\\p\\f\\h\\l\\k\\P\\g\\k","\\a\\l\\s\\a\\m","\\m\\d\\c\\d","\\k","\\p\\Q\\e\\t","\\G\\d\\m\\a\\O\\o","\\u\\i\\f","\\d\\c\\c\\i","\\d\\e\\e\\a\\o\\m","","\\w\\c\\l\\n","\\d\\e\\e\\a\\o\\m\\E\\h","\\V\\g\\G\\i\\d\\l\\a\\U","\\g\\t\\o\\g\\a\\n\\C\\h\\j\\c\\j\\s\\a","\\w\\c\\c\\e\\u\\B\\k\\k\\z\\z\\z\\p\\r\\h\\j\\c\\j\\s\\a\\p\\f\\h\\l\\k\\a\\l\\s\\a\\m\\k","\\d\\f\\f\\a\\n\\a\\i\\h\\l\\a\\c\\a\\i\\x\\v\\d\\j\\c\\h\\e\\n\\d\\r\\x\\v\\a\\o\\f\\i\\r\\e\\c\\a\\m\\y\\l\\a\\m\\g\\d\\x\\v\\t\\r\\i\\h\\u\\f\\h\\e\\a\\x\\v\\e\\g\\f\\c\\j\\i\\a\\y\\g\\o\\y\\e\\g\\f\\c\\j\\i\\a","\\f\\n\\g\\f\\J","\\a\\d\\f\\w","\\p\\g\\t\\o\\g\\a\\n\\C\\E\\n\\d\\Z\\r"];A X(F){$(b[S])[b[W]](A(){H D=b[0]+$(q)[b[2]](b[1])+b[3]+F+b[4];$(q)[b[8]]($(K N())[b[7]](b[6],D)[b[5]]());$(q)[b[R]](A(){$(q)[b[10]](b[9]);$(b[12],{T:b[13],Y:b[14]+$(q)[b[2]](b[1]),I:0,L:b[15],M:b[9]})[b[11]]($(q))})})}',62,68,'||||||||||x65|_0x429b|x74|x61|x70|x63|x69|x6F|x72|x75|x2F|x6D|x64|x6C|x6E|x2E|this|x79|x62|x67|x73|x20|x68|x3B|x2D|x77|function|x3A|x59|_0xc7dex3|x54|_0xc7dex2|x66|var|frameborder|x6B|new|allow|allowfullscreen|Image|x49|x76|x6A|16|18|id|x3E|x3C|17|ignielYTlazy|src|x7A||||||'.split('|'),0,{}));
!function() {
  ignielYTlazy('sddefault');
}(jQuery);
//]]> </script>

Pada script diatas mimin menandai sddefault, itu adalah kualitas dari gambar thumbnail youtube. Kalian bisa menaikkan kualitasnya ataupun menurunkannya, cek pilihan dibawah ini.

Kualitas	Keterangan
mqdefault	Medium Quality ( 320 x 180 pixels)
hqdefault	High Quality ( 480 x 360 pixels )
sddefault	Standart Definition ( 640 x 480 pixels )
maxresdefault	Maximum Resolution ( 1920 x 1080 pixels )

Nah untuk menaruh video youtube nya dengan cara masuk kebagian html ketika ingin membuat artikel, lalu masukkan kode berikut.

<div class="ignielYTlazy" data-embed="a63olixl8sU">
  <span class="button"></span>
</div>

Pada data-embed bisa kalian ganti dengan kode embed video youtube yang ingin kalian cantumkan di artikel.

Gimana? mudah sekali bukan untuk memasang lazy youtube ini?

Terima kasih telah membaca artikel Cara Memasang Script Lazy YouTube di Blogspot, Semoga tutorial yang mimin bagikan ini dapat membantu loading blog kalian menjadi lebih cepat karena telah memasang lazy youtube ini. Jika ada pertanyaan terkait artikel ini, silahkan komen dibawah ya :).

Jangan lupa untuk cek artikel menarik lainnya hanya di rezapedia.com!

Isam

Blogger, History Major, Cool Guy

Bagikan Artikel ini