Home
Adsense
Blogger Tutorials

How to Add a Slide Pop-Up Widget in Blogger (HTML & CSS Only)

Create a responsive slide pop-up widget in Blogger using only HTML and CSS. Display YouTube videos, images, or AdSense ads without JavaScript.
Techno Praveen
How to Add a Slide Pop-Up Widget in Blogger (HTML & CSS Only)
How to Add a Slide Pop-Up Widget in Blogger (HTML & CSS Only)

Multi-purpose widget that can display YouTube videos, images, or AdSense ads

Hhis is a paragraph with drop cap. ello everyone, in this post I will share a slide pop-up widget for promotional purposes built using only HTML and CSS.

This widget was requested by members of the Wendy Code WhatsApp group some time ago. I was only able to create it now because I was busy for the past two weeks and couldn’t publish a new article earlier.

This widget is basically similar to the anchor ads widget that I shared before. The difference is that the anchor ad slides vertically, while this widget slides horizontally from the side.

This widget is multi-purpose: you can use it to display a YouTube video, an image, or AdSense ads—just choose what you need.

The YouTube video supports autoplay, but it only works on desktop. On mobile devices, autoplay does not work yet, and I still haven’t found a workaround.

To see the demo, click the button below. If you want to try it yourself, follow the steps below.

Slide Pop-Up Widget

Go to Blogger → Theme → Edit HTML, then copy the CSS below and place it above the code ]]></b:skin> or above the </style> tag. 


/* slide pop up by Techno Praveen */
.xd-pop-sld{display:none}
.xd-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}
.xd-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;
transform:rotate(270deg)}
.xd-sld-ktn iframe,.xd-sld-ktn img{width:100%;height:100%;border:0}
.xd-sld-ktn{flex-grow:1;overflow:hidden;position:relative;width:100%;height:100%}
.xd-pop-sld:checked ~ .xd-spop-sld{transform:translateX(100%)}
.xd-pop-sld:checked ~ .xd-spop-sld .xd-sld-ktn{display:none}

/* Dark mode (adjust .drK if your theme uses a different class) */
.drK .xd-spop-sld,.drK .xd-sld-cls{border-color:rgba(255,255,255,.1)}
.drK .xd-spop-sld{background-color:#2d2d30}

Finally, copy the HTML below and place it above the <footer tag. Adjust the YouTube video ID, or replace it with an image or AdSense ad if needed. 


<input class="xd-pop-sld hidden" id="xd-pop-sld" type="checkbox"/>

<div class="xd-spop-sld">
  <label class="xd-sld-cls" for="xd-pop-sld">
    <svg viewBox="0 0 24 24">
      <g transform="translate(5, 8.5)">
        <path d="M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0"/>
      </g>
    </svg>
  </label>

  <div class="xd-sld-ktn">
    <!-- Replace MCGWhgxdr3c with your own YouTube video ID -->
    <iframe src="https://www.youtube.com/embed/MCGWhgxdr3c?autoplay=1"
            allow="fullscreen"></iframe>
    
    
    <!-- Uncomment to display an image -->
    <!-- <img src="YOUR_IMAGE_URL.jpg"/> -->

    <!-- Uncomment to display AdSense -->
    <!--
    <ins class="adsbygoogle"
         data-ad-client="ca-pub-0000000000000000"
         data-ad-slot="0000000000"
         style="display:block"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
    -->
  </div>
</div>

Reverse Mode (Closed by Default)

Update: If you want the widget to be hidden by default and only appear after clicking, simply add checked="" to the input element. 

<!-- Original -->
<input class="xd-pop-sld hidden" id="xd-pop-sld" type="checkbox"/>

<!-- Change to -->
<input class="xd-pop-sld hidden" id="xd-pop-sld" type="checkbox" checked=""/>

That’s all for this slide pop-up widget . Hopefully it’s useful. Thanks for visiting!

Post a Comment