For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Memasang dan menggunakan lazy YouTube di website

Hello sobat icloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya memasang dan menggunakan lazy youtube di dalam website atau blogger

Info: Oke sobat jika sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Lazy Youtube

Apakah sebenarnya lazy youtube dan untuk apa kegunaan nya? Lazy youtube merupakan tampilan dari embed video youtube yang di buat secara custom, dengan tujuan mempercepat proses loading tampilan dari video YouTube nya

Fungsi lazy YouTube

Jika anda ingin menampilkan video YouTube di website ataupun di blogger maka mode embed adalah cara dan pilihan terbaik, namun agar tampilan video semakin menarik harus menggunakan script lazy YouTube, disertai tombol frame dan tombol play yang juga keren saat video YouTube di tampilkan

Menggunakan Javascript

Biasanya yang bernuansa lazy pasti memiliki kaitan dengan kode javascript, sama halnya script lazy YouTube ini, namun untuk menampilkan embed video ylutube di blogger cukup menggunakan kode HTML saja

Contoh Tampilan

Baiklah agar kamu tidak penasaran, admin telah menyediakan sebuah contoh demo, silahkan gunakan tombol di bawah ini untuk memeriksanya

Info: Bagaimana sobat dengan contoh tampilan nya keren sekali yak, pastilah keren 🥰

Cara pembuatan

Baiklah sekarang saatnya admin bakalan menjelaskan bagaimana sih caranya memasang dan menggunakan script lazy YouTube di blogger ataupun di website silahkan baca dan pelajari hingga selesai ok

Kode CSS

Langkah pertama seperti biasa kamu bisa menyalin dan meletakkan kode CSS di bawah ini tepat di atas kode ]]></b:akin>

/* Lazy Youtube */
figure .rahLzYt{margin-bottom:8px}
.rahLzYt{background-color:#2e2e31;position:relative;overflow:hidden;padding-top:56%;border-radius:4px;cursor:pointer}
.rahLzYt:before{content:'';display:block;width:100%;height:100%;position:absolute;top:0;background:linear-gradient(to top,#202746,transparent);background:-webkit-linear-gradient(90deg,#202746,transparent);z-index:1;opacity:.5;}
.rahLzYt img{width:100%;top:0;left:0;opacity:.95;cursor:pointer}
.rahLzYt img.lazyloaded{top:-16.84%;}
.rahLzYt img, .rahLzYt iframe, .rahLzYt .play-button, .rahLzYt .play-button:before, .rahLzYt .rahPlyBt{position:absolute}
.rahLzYt .play-button{width:75px;height:50px;z-index:1;border-radius:15px;border:2px solid rgba(255,255,255,.75);cursor:pointer}
.rahLzYt .play-button, .rahLzYt .play-button:before, .rahLzYt .rahPlyBt{top:50%;left:50%;transform:translate3d(-50%,-50%,0);-webkit-transition:all .5s ease;transition:all .5s ease}
.rahLzYt .play-button:hover{border-color:#cc181e}
.rahLzYt .play-button:hover:before{border-color:transparent transparent transparent #cc181e}
.rahLzYt .play-button:before{content:'';border-style:solid;border-width:10px 0 10px 15px;border-color:transparent transparent transparent rgba(255,255,255,.75);border-radius:3px;margin-left:1px}
.rahLzYt iframe{height:100%;width:100%;top:0;left:0;z-index: 2;}
.rahLzYt .rahPlyBt{display:inline-block;width:70px;height:70px;z-index:1}
.rahLzYt .rahPlyBt svg{width:inherit;height:inherit;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:7}
.rahLzYt .rahPlyBt .circle{stroke:rgba(255,255,255,.75);stroke-dasharray:650;stroke-dashoffset:650;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:.3}
.rahLzYt .rahPlyBt .rahAgl{stroke:rgba(255,255,255,.75);stroke-dasharray:240;stroke-dashoffset:480;-webkit-transition:all .7s ease-in-out;transition:all .7s ease-in-out;transform:translateY(0);-webkit-transform:translateY(0)}
.rahLzYt .rahPlyBt:hover .rahAgl{animation:nudge .7s ease-in-out;-webkit-animation:nudge .7s ease-in-out}
.rahLzYt .rahPlyBt:hover .rahAgl, .rahLzYt .rahPlyBt:hover .circle{stroke-dashoffset:0;opacity:1;stroke:#cc181e}

Info: Atau kamu bisa menggunakan tag <style> untuk meletakkan kode CSS di atas

Kode Javascript

Langkah selanjutnya kamu bisa menyalin kode javascript di bawah ini kemudian kamu bisa meletakkan nya di atas koode </body>

<script>/*<![CDATA[*/
var _0xa503=["\x2E\x72\x61\x68\x4C\x7A\x59\x74","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72\x41\x6C\x6C","\x6C\x65\x6E\x67\x74\x68","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x69\x6D\x67\x2E\x79\x6F\x75\x74\x75\x62\x65\x2E\x63\x6F\x6D\x2F\x76\x69\x2F","\x65\x6D\x62\x65\x64","\x64\x61\x74\x61\x73\x65\x74","\x2F\x73\x64\x64\x65\x66\x61\x75\x6C\x74\x2E\x6A\x70\x67","\x63\x6C\x61\x73\x73","\x6C\x61\x7A\x79\x6C\x6F\x61\x64","\x73\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65","\x77\x69\x64\x74\x68","\x31\x32\x38\x30","\x68\x65\x69\x67\x68\x74","\x37\x32\x30","\x64\x61\x74\x61\x2D\x73\x72\x63","\x73\x72\x63","\x64\x61\x74\x61\x3A\x69\x6D\x61\x67\x65\x2F\x70\x6E\x67\x3B\x62\x61\x73\x65\x36\x34\x2C\x69\x56\x42\x4F\x52\x77\x30\x4B\x47\x67\x6F\x41\x41\x41\x41\x4E\x53\x55\x68\x45\x55\x67\x41\x41\x41\x42\x41\x41\x41\x41\x41\x4A\x43\x41\x59\x41\x41\x41\x41\x37\x4B\x71\x77\x79\x41\x41\x41\x41\x41\x58\x4E\x53\x52\x30\x49\x41\x72\x73\x34\x63\x36\x51\x41\x41\x41\x41\x52\x7A\x51\x6B\x6C\x55\x43\x41\x67\x49\x43\x48\x77\x49\x5A\x49\x67\x41\x41\x41\x41\x50\x53\x55\x52\x42\x56\x43\x69\x52\x59\x32\x41\x59\x42\x61\x4F\x41\x43\x67\x41\x41\x41\x6B\x6B\x41\x41\x65\x41\x38\x36\x2F\x51\x41\x41\x41\x41\x41\x53\x55\x56\x4F\x52\x4B\x35\x43\x59\x49\x49\x3D","\x61\x6C\x74","\x59\x6F\x75\x74\x75\x62\x65\x20\x76\x69\x64\x65\x6F","\x6C\x6F\x61\x64","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x63\x6C\x69\x63\x6B","\x69\x66\x72\x61\x6D\x65","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x66\x72\x61\x6D\x65\x62\x6F\x72\x64\x65\x72","\x30","\x61\x6C\x6C\x6F\x77\x66\x75\x6C\x6C\x73\x63\x72\x65\x65\x6E","","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x79\x6F\x75\x74\x75\x62\x65\x2E\x63\x6F\x6D\x2F\x65\x6D\x62\x65\x64\x2F","\x3F\x72\x65\x6C\x3D\x30\x26\x73\x68\x6F\x77\x69\x6E\x66\x6F\x3D\x30\x26\x61\x75\x74\x6F\x70\x6C\x61\x79\x3D\x31","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C"];(function(){var _0xe9a6x1=document[_0xa503[1]](_0xa503[0]);for(var _0xe9a6x2=0;_0xe9a6x2< _0xe9a6x1[_0xa503[2]];_0xe9a6x2++){var _0xe9a6x3=_0xa503[3]+ _0xe9a6x1[_0xe9a6x2][_0xa503[5]][_0xa503[4]]+ _0xa503[6];var _0xe9a6x4= new Image();_0xe9a6x4[_0xa503[9]](_0xa503[7],_0xa503[8]);_0xe9a6x4[_0xa503[9]](_0xa503[10],_0xa503[11]);_0xe9a6x4[_0xa503[9]](_0xa503[12],_0xa503[13]);_0xe9a6x4[_0xa503[9]](_0xa503[14],_0xe9a6x3);_0xe9a6x4[_0xa503[9]](_0xa503[15],_0xa503[16]);_0xe9a6x4[_0xa503[9]](_0xa503[17],_0xa503[18]);_0xe9a6x4[_0xa503[21]](_0xa503[19],function(){_0xe9a6x1[_0xe9a6x2][_0xa503[20]](_0xe9a6x4)}(_0xe9a6x2));_0xe9a6x1[_0xe9a6x2][_0xa503[21]](_0xa503[22],function(){var _0xe9a6x5=document[_0xa503[24]](_0xa503[23]);_0xe9a6x5[_0xa503[9]](_0xa503[25],_0xa503[26]);_0xe9a6x5[_0xa503[9]](_0xa503[27],_0xa503[28]);_0xe9a6x5[_0xa503[9]](_0xa503[15],_0xa503[29]+ this[_0xa503[5]][_0xa503[4]]+ _0xa503[30]);this[_0xa503[31]]= _0xa503[28];this[_0xa503[20]](_0xe9a6x5)})}})()/*]]>*/
</script>

Info: Jangan mebgubah kode script di atas karena sudah cocok dengan class CSS yang admin berikan di atas

Cara menampilkan

Nah setelah peoses penginstalan kode CSS dan javascript di atas, silahkan simpan kode HTML ini di notepad anda

<div class='rahLzYt' data-embed='id_youtube'>
<div class='rahPlyBt'>
<svg class='svg-play' viewbox='0 0 213.7 213.7'><polygon class='rahAgl' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='circle' cx='106.8' cy='106.8' r='103.3'></circle></svg>
</div>
</div>

Info: Kamu bisa mengubah ID dari video youtube nya saja, untuk menampilkan, setiap video YouTube memiliki id yang berbeda beda





About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.