Widget Slide Pop Up
Widget slide pop up ini dapat Anda isi dengan konten video youtube, adsense ataupun gambar.
.png)
Pop-up adalah jendela informasi yang muncul di hadapan Anda ketika sedang mengakses website atau menggunakan komputer dan smartphone, gunanya untuk memusatkan perhatian Anda pada isi dari pop up tersebut, bisa berupa cuplikan video, iklan, himbauan atau pun gambar.
Seperti penjelasan saya diatas tadi, jadi bisa dibilang bahwa fungsi pop up itu multi fungsi, Anda bisa menggunakan nya sesuai kebutuhan Anda.
Sebenarnya ada banyak cara menampilkan pop up, tetapi saat ini saya akan membahas cara menampilkan pop up dengan cara slide slide dari kanan ke kiri.
Ok, cukup sekian penjelasan saya tentang pop up. Sekarang mari kita mulai cara pembuatan nya.
Untuk langkah pertama silahkan login ke Blogger > Tema > Edit HTML. Kemudiang salin kode CSS dibawah dan letakkan diatas kode ]]></b:skin> atau diatas kode </style>
/* slide pop up by Xhref */
.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}
Kemudian salin kode html berikut dan tempelkan diatas kode <footer....
<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/######?autoplay=1' allow='fullscreen'></iframe> <!-- 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>
Sekarang Anda tinggal menyesuaikan dengan kebutuhan Anda apa isi dari pop up yang ingin ditampilkan, bisa berupa iklan, gambar atau video youtube. Fyi, untuk video youtube akan otomatis play jika dibuka lewat PC atau laptop.
Ok, cukup sekian tutorialnya dan terimakasih sudah mengunjungi blog xhref.
Semoga bermanfaat.
Gabung dalam percakapan