Pop up slide widget

Salam to all on this occasion I will share a slide pop up widget for promotional purposes only with html and css.

This widget was reregistered by friends of the whatsapp group Blogger Store some time ago, and I can only make it now because 2 weeks ago I was busy and didn't have time to write articles on this blog.

This widget is actually the same as the anchor ads widget that I shared before, the operation is if the anchor slides down, if this is to the side.

This multi-function widget can display YouTube videos, images or Adsense ads, you can choose what you want to display according to your needs.

for the youtube video itself it has auto play but only works on the PC display while on the mobile display it doesn't work, I don't know how to fix it myself.

for the demo, please click the button below, ok for those of you who want to try it, let's see how.

DEMO

Slide Pop Up Widget

please go to blogger > themes > edit html copy the css below and paste it above the code ]]></b:skin> or above the code </style>

/* slide pop up by Blogger Store (style buka di awal) */
    .bs-pop-sld{display:none}
    .bs-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}
    .bs-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)}
    .bs-sld-ktn iframe,.bs-sld-ktn img{width:100%;height:100%;bottom:0;right:0;border:0}
    .bs-sld-cls svg{width:18px;height:18px;fill:none!important;stroke:#48525c;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
    .bs-sld-ktn{flex-grow:1;overflow:hidden;display:block;position:relative;width:100%;height:100%}
    .bs-pop-sld:checked ~ .bs-spop-sld{-webkit-transform:translateX(100%);transform:translateX(100%)}
    .bs-pop-sld:checked ~ .bs-spop-sld .bs-sld-ktn{display:none}
    .bs-pop-sld:checked ~ .bs-spop-sld .bs-sld-cls svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
    @media screen and (min-width:650px) and (max-width:950px){.bs-spop-sld {width:60%}}
    @media screen and (max-width:650px){.bs-spop-sld{width:85%;height:200px}} 
    /* CSS dark mode sesuaikan class (.drK) jika berbeda agar dapat berfungsi */
    .drK .bs-spop-sld,.drK .bs-sld-cls{border-color:rgba(255,255,255,.1)}
    .drK .bs-spop-sld{background-color:#2d2d30}

and finally, please copy the html below and put it above the <footer code and please adjust your youtube video id, or if you want to display images or adsense ads you can too.

<input class='bs-pop-sld hidden' id='bs-pop-sld' type='checkbox'/>
    <div class='bs-spop-sld'>
    <label class='bs-sld-cls' for='bs-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='bs-sld-ktn'>
    <!-- change (MCGWhgbsr3c with ) with your youtube video id -->
    <iframe src='https://www.youtube.com/embed/MCGWhgbsr3c?autoplay=1' allow='fullscreen'></iframe>
      
    <!-- to display the image remove the comment tag below -->
    <!--<img src='https://1.bp.blogspot.com/-DpmNbsV1iL8/YZ9k7vPiIgI/AAAAAAAADQk/esC3SJILNuI_ENOhxwQVYPyhrjhUiRFagCNcBGAsYHQ/s0/widget%2Bpop%2Bup%2Bflash%2Bsale.jpg'/>-->
      
    <!--to display adsense ads remove the comment tag below and adjust the code ca-pub and 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>

The opposite

update
if you want to make the opposite, i.e. it closes at the beginning when on click just shows the content, just add checked='' in the input tag see example below

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

DEMO

ok so that 's the slide pop up widget that I can share this time, hopefully it's useful and thanks for visiting.

Pop up slide widget