Memasang Lazy Load Youtube di Blog dimuat setelah klik

Memasang Lazy Load Youtube di Blog dimuat setelah klik - SusahTidur - Ketika sobat meng-embeb video dari YouTube, kodenya langsung berjalan saat halaman di muat. Sehingga banyak script yang dieksekusi saat muat halaman sehingga menyebabkan penurunan kecepatan saat muat halaman atau lemot.

Nah dengan adanya Lazy Load Youtube ini, halaman sobat yang berisi video YouTube tidak akan langsung dimuat dan tidak mengalami penurunan kecepatan. Karena cara kerja dari Lazy Load Youtube ini akan di muat setelah sobat mengekliknya. Owh ya tutorial ini saya dapat dari igniel.com terimakasih tutorialnya mbak Igniel. Baiklah yuk langsung esekusi

Memasang Lazy Load Youtube di Blog dimuat setelah klik

1. Masuk Dashboard Blogger sobat
2. Masuk Tema > Edit HTML
3. Masukkan CSS berikut tepat di atas ]]></b:skin>

   .ignielYTlazy {
     background-color: #000;
     margin-bottom: 30px;
     position: relative;
     padding-top: 56.25%;
     overflow: hidden;
     cursor: pointer;
   border-radius: 15px
   }
   .ignielYTlazy img {
     width: 100%;
   height : 100%;
   top: 0;
     left: 0;
     opacity: 0.7;
   }
   .ignielYTlazy .button {
     width: 68px;
     height: 48px;
     background-color: #7bbefa;
     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;
   }

4. Lalu masukkan Script berikut tepat di atas </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>

   Silahkan ubah "sddefault" ke
   1. mqdefault = Medium Quality ( 320 x 180 pixels)
   2. hqdefault = High Quality ( 480 x 360 pixels )
   3. sddefault = Standart Definition ( 640 x 480 pixels )
   4. maxresdefault = Maximum Resolution ( 1920 x 1080 pixels )

5. Kemudian untuk memanggil Lazy Load YouTube, Buat Postingan baru > mode HTML bukan Compose, lalu masukkan kode pemanggil di bawah ini
   

   <div class="ignielYTlazy" data-embed="EMBED KODE BRO">
     <span class="button"></span>
   </div>

   Silahkan ganti " EMBED KODE BRO " dengan hasil embed youtube kalian, dan ambil akhirannya saja contoh:
   - https://youtu.be/uo8BCUqkP7o maka yang di ambil hanya yang saya cetak tebal

6. Kemudian Publikasikan

 DEMO 

Baiklah selesai sudah tutorial Cara Memasang Lazy Load YouTube di blog dimuat setelah klik. Jika masih bingung dalam pemasangan kode di atas silahkan bertanya di kolom komentar.

Sekian dan Terimakasih telah berkunjung ke SusahTidur.

"Memasang Lazy Load Youtube di Blog dimuat setelah klik"

Bagikan