How To Add A Floating Sticky Sidebar Ads Widget On Scroll In Blogger Website
• Log in to your Blogger account and navigate to your blog's dashboard.
• Click on the "Layout" option from the left-hand menu.
• Click on "Add a Gadget" from the area where you want to add the floating sidebar ads widget.
• Select the "HTML/JavaScript" gadget option.
• In the "Content" field, paste the code for your floating sidebar ads widget. You can find such code by searching for a third-party floating sidebar ads widget generator on the internet. Ensure that the code you get is designed to work with Blogger and not another platform.
• Give your widget a title, such as "Floating Sidebar Ads" or something similar, and click on "Save."
Your floating sidebar ads widget should now be added to your Blogger website. When a user scrolls down your website, the widget should remain in view, making it more likely to be seen and clicked on.
Note! Ensure that the floating sidebar ads widget doesn't block or cover too much content on your website, as this could lead to a poor user experience. Additionally, be careful not to violate any of Blogger's terms of service regarding advertisements or widgets.
Here's an example code for a floating sticky sidebar ads widget in Blogger:
php
<!-- Begin Code -->
<style type='text/css'>
/*---Floating widget CSS starts--*/
#sidebar-float {position: fixed;
top: 50%;
right: 0;
z-index: 99999;
width: 300px;
height: 250px;
transform: translateY(-50%);
}
/*---Floating widget CSS ends--*/
</style>
<script type="text/javascript">
//<![CDATA[
window.onscroll = function() {myFunction()};var sidebar = document.getElementById("sidebar-float");var sticky = sidebar.offsetTop;
function myFunction() { if (window.pageYOffset > sticky) { sidebar.classList.add("sticky"); } else { sidebar.classList.remove("sticky");}
}
//]]>
</script>
<div id="sidebar-float">
<!--- Add your ads code here --->
</div>
<!-- End Code -->
Rate this article
Getting Info...