grup whatsapp indonesian members only
Join Now

widget slide pop up

widget slide pop up widget multi fungsi bisa untuk menampilkan vidio youtube dan gambar atau iklan adsanse
widget slide pop up

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%!important}}
@media screen and (max-width:650px){.wc-spop-sld{width:85%!important;height:200px!important}} 
/* 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://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>

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

Baca juga :
Donasi untuk mendukung creator terus berkarya, mulai seribu rupiah saja

6 komentar

  1. Terimakasih banyak mas sudah dibuatkan tutorialnya.
    1. siap mas sama2 ya
  2. How did u make that intro for your youtube video sie 🙃
    1. I use the Filmora template which is widely shared on YouTube
  3. Hello,
    How to add lazyload to blogger,
    I have seen a lot of lazyload scripts on internet but they doest works. When I test speed of page all images goes loaded.

    Please tell me how we can add original lazyload scripts on blogger.
    1. what template do you use?


image quote pre code
© Wendy Code Developed by Jago Desain

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english