Pada kesempatan ini saya akan membagikan widget slide pop up untuk keperluan promosi dengan html dan css.
Widget ini sebenernya sama saja dengan widget ads anchor, widget ini multi fungsi bisa untuk menampilkan video youtube, gambar atau iklan adsanse, bisa kalian pilih ingin menampilkan apa sesuai kebutuhan.
Untuk video youtube sendiri sudah auto play namun hanya berfungsi di tampilan pc saja sedangkan di tampilan mobile itu tidak jalan.
Untuk demonya silakan klik tombol dibawah
Widget Slide Pop Up
Silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letakan di atas kode ]]></b:skin> atau di atas kode ></style>
/* 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}}
/* 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 letakkan di atas kode <footer dan silakan di sesuaikan id video 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/AVvXsEib0GRX4pq24HyoZJ0JPieWY-wXvC0QqVPoibp_Ve9wdVTyMuTdMwvGU1T5R7R2dmt_ZzgG7gmBkpx_Y5izBrwFj0VgewfuIgm6NJUG01rqPduuVOFvDECUdeyWDdu6LZE6Ei15VOqHvo0z/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
Jika ingin membuat kebalikannya, yaitu tertutup di awal saat di klik baru muncul 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=''/>
Semoga bermanfaat dan terima kasih sudah berkunjung.
