widget slide pop up

multi fungsi bisa untuk menampilkan vidio youtube dan gambar atau iklan adsanse

Hallo semua pada kesempatan kali ini saya akan membagikan widget slide pop up untuk keperluan promosi hanya dengan html dan css.

widget ini di reguest oleh teman - teman grup whatsapp wendy code beberapa waktu lalu, dan baru bisa saya buatkan saat ini karena 2 minggu lalu saya sedang sibuk dan tidak sempat membuat artikel di blog ini.

widget ini sebenarnya sama aja dengan widget ads anchor yang pernah saya share dulu, bedahnya jika anchor itu slide nya ke bawah kalau ini ke samping.

widget ini multi fungsi bisa untuk menampilkan vidio youtube, gambar atau iklan adsanse, bisa kalian pilih aja ingin menampilkan apa sesuai kebutuhan kalian.

untuk vidio youtube sendiri sudah auto play namun hanya berfungsi di tampilan pc saja sedangkan di tampilan mobile itu tidak jalan, saya sendiri belum tau cara mengatasinya.

untuk demonya silakan klik tombol di bawah ini, ok buat kalian yang ingin mencobanya mari simak caranya.

Widget Slide Pop Up

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/* slide pop up by wendy code */
.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}

dan terakhir silakan salin html di bawah ini dan letkkan di atas kode <footer dan silakan di sesuaikan id vidio youtube kalian, atau jika ingin menampilkan gambar maupun iklan adsanse juga bisa.

<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/AVvXsEhAJIb64N6UZWNCFvUPZff3f-zL3JwDYVAbnWn33yoOF4QRE-s_A1uR6fX3QlGOq3Vl0x2xuHqAyZuBDnMkmpJ2L20nw5vT8AA9fZvR9o2xc4MMK13xsCsteK_SFNrpbDjAUcPGKWSa_xiL/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>

Kebalikannya

update
jika ingin membuat kebalikannya, yaitu tertutup di awal saat di klik baru munculkan konten, cukup tambahkan checked='' pada tag input lihat contoh di bawah ini

<!-- kode ini -->
<input class='wc-pop-sld hidden' id='wc-pop-sld' type='checkbox'/>

<!-- ubah jadi -->
<input class='wc-pop-sld hidden' id='wc-pop-sld' type='checkbox' checked=''/>

ok jadi sekian widget slide pop up yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.