Cara Membuat Pop-Up Video Youtube atau Video, Foto Promosi Lainnya.
Aras Aras | Kali ini mimin coba membagikan cara membuat Video Pop-Up, Sederhananya Video yang kita tampilkan di halaman post bisa di sembunyikan ke samping. Cara ini bisa membantu beberapa promosi yang adan lalukan, dan juga bisa membantu pengunjung menyembunyikan promosi jika mereka tidak tertarik, jadi mereka tidak terganggu saat membaca artikel kita.
Langkah Pertama:
Buka Blog> Pilih Teman, Lalu Pilih Edit Tema Lalu Klik Sembarang dalam HTML, Kemudian Klik Ctrl+F, Cari Kode:
]]></b:skin>
Copy Code Dibawah ini, Simpan Ditas Kode ]]></b:skin>
.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}}
/* 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}
Langkah Kedua:
Buka Halaman Postingan, Pilih Salah Satu Postingan Yang Ingan Ditampilkan Pop-Up, Ubah Ketampilan HTML, Lalu Copy Scrip Dibawah Diposisi Paling Bawah Halaman.
Copy Code Dibawah ke Halaman Post. Poisikan Kode Paling Bawah
<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'>
<!-- ubah ( MCGWhgwcr3c dengan ) dengan id vidio youtube kalian -->
<iframe src='https://www.youtube.com/embed/MCGWhgwcr3c?autoplay=1' allow='fullscreen'></iframe>
<!-- untuk menampilkan gambar hapus tag komen di bawah ini -->
<!--<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO1c9FGIm4rqQqcPLxbei4H1k9LHgtzvye9rKXLbO4jTi0shwtX5317S4IFwgvx1ZbwO787U7diS5FtP91-JTbIdrLS4WJMsXXjXpTN8jEvmhooG76Gews_3MI5gtk4w46b8-_517PVeBI/s0/widget+pop+up+flash+sale.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>
Langkah Ketiga:
Ganti skip yang di blog hijau https://www.youtube.com/embed/MCGWhgwcr3c?autoplay=1. Ganti dengan ID Eneble Video Youtube Anda.
Langkah Keempat:
Pratinjau Halaman Post
Silahkan buka situs anda dan coba apakah berfungsi atau tidak.
Terimakasih sudah mengunjungi Halaman Aras Atas.
https://aras-atas.blogspot.com/2023/01/live-tutorial-blog-aras-atas.html
Rate This Article
Thanks for reading: Cara Buat Pop Up Konten Youtube dan Video Promosi Lainnya, Sorry, my English is bad:)