widget slide pop up autoplay youtube

widget slide pop up autoplay youtube

Hai Halo semuanya,kembali lagi di blog ini dan di artikel saya kali ini saya akan membagikan cara membuat widget slide pop up autoplay youtube.

widget ini saya dapatkan dari blog wendycode.com namun disini saya sedikit memodifikasi codenya dengan menambahkan javascript agar video youtube yang ada di widgetnya menjadi autoplay

Selain bisa memutar video youtube secara otomatis widget ini juga bisa kalian pasangkan iklan adsense atau iklan dari pengiklan lain.

Jadi artikel kali ini agak pendek,karena percuma juga nulis panjang panjang pasti gak kalian baca!.

Cara memasang widgetnya

  1. Langkah pertama yang dilakukan adalah login ke dasboard blogger.com
  2. Pilih Tema kemudian klik tanda panah kebawah atau titik tiga kalau kalian menggunakan smartphone dan pilih EDIT HTML.
  3. Letakkan kode css dibawah ini di atas kode ]]></b:skin> gunakan ctrl+f untuk memudahkan pencarian.
    
        /* slide pop up by wendy code (style buka di awal) */
    .wc-pop-sld{display:none}
    .wc-spop-sld{position:fixed;bottom:50px;right:0;width:50%;height:300px;box-shadow:0 -6px 18px 0 rgb(9 32 76 / 10%);transition:all .2s ease-in;display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:50;border-top:1px solid #eceff1}
    .wc-sld-cls{width:50px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px 12px 0 0;border:1px solid #eceff1;border-bottom:0;position:absolute;left:-45px;top:5px;background-color:inherit;-webkit-transform:rotate(270deg);transform:rotate(270deg)}
    .wc-sld-ktn iframe,.wc-sld-ktn img{width:100%;height:100%;bottom:0;right:0;border:0}
    .wc-sld-cls svg{width:18px;height:18px;fill:none!important;stroke:#48525c;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
    .wc-sld-ktn{flex-grow:1;overflow:hidden;display:block;position:relative;width:100%;height:100%}
    .wc-pop-sld:checked ~ .wc-spop-sld{-webkit-transform:translateX(100%);transform:translateX(100%)}
    .wc-pop-sld:checked ~ .wc-spop-sld .wc-sld-ktn{display:none}
    .wc-pop-sld:checked ~ .wc-spop-sld .wc-sld-cls svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
    @media screen and (min-width:650px) and (max-width:950px){.wc-spop-sld {width:60%}}
    @media screen and (max-width:650px){.wc-spop-sld{width:85%;height:200px}} 
    .iframe-container{height:100%;}
    /* CSS dark mode sesuaikan class (.drK) jika berbeda agar dapat berfungsi */
    .drK .wc-spop-sld,.drK .wc-sld-cls{border-color:rgba(255,255,255,.1)}
    .drK .wc-spop-sld{background-color:#2d2d30}
        
  4. Letakkan kode javascript di bawah ini di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
    <script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    var player;
    function onYouTubeIframeAPIReady() {
    player = new YT.Player('popplay', {
    width: '100%',
    videoId: 'oYxFXgvyb3k', //id vidio youtube
    playerVars: { 
      autoplay: 1,
      playsinline: 1,
    },
    events: {
    'onReady': onPlayerReady
    }
    });
    }
    
    function onPlayerReady(event) {
    event.target.mute();
    event.target.playVideo();
    }
    </script>
    

    Jagan lupa ganti id vidio youtebe yang sudah saya tandai di atas.

  5. Langkah terakhir letakan kode HTMl di bawah ini di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; kalian juga bisa meletakan kode ini di postingan atau laman blogger.
    
      <input class='wc-pop-sld hidden' id='wc-pop-sld' type='checkbox'/>
    <div class='wc-spop-sld'>
    <label class='wc-sld-cls' for='wc-pop-sld'>
    <svg viewBox='0 0 24 24'><g transform='translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg>
    </label>
    <div class='wc-sld-ktn'>
    <div class="iframe-container">
       <div id="popplay"></div>
    </div>
      
    <!-- untuk menampilkan gambar hapus tag komen di bawah ini -->
    <!--<img src='https://1.bp.blogspot.com/-DpmNWcV1iL8/YZ9k7vPiIgI/AAAAAAAADQk/esC3SJILNuI_ENOhxwQVYPyhrjhUiRFagCNcBGAsYHQ/s0/widget%2Bpop%2Bup%2Bflash%2Bsale.jpg'/>-->
      
    <!-- untuk menampilkan iklan adsanse hapus tag komen di bawah ini dan sesuaikan kode ca-pub dan data-ad-slot -->
    <!--<ins class='adsbygoogle' data-ad-client='ca-pub-0000000000000000' data-ad-format='horizontal' data-ad-slot='0000000000' data-full-width-responsive='false' style='display:block'/><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>-->
    </div></div>
    
  6. Klik simpan tema.

sekian artikel saya kali ini semoga bermanfaat dan terimakasih sidah berkunnjung diblog ini

Refrensi: https://wendycode.com