Adding a Floating Sticky Sidebar Ad Widget on Scroll in WordPress Website

In this guide, I will demonstrate how to incorporate a sticky floating sidebar ad to your Blogger website. By following these straightforward steps, you’ll successfully integrate a similar ad onto your site.

Sticky ads are instrumental in enhancing the click-through rate (CTR), improving impressions, and boosting earnings in Adsense. Previously, I detailed the process of adding a sticky footer ad in Blogger that remains fixed at the screen’s bottom. However, this tutorial focuses on affixing ads to both sides of the desktop screen as users scroll through the page.

By adopting this approach, these ads garner increased visibility from visitors, thereby escalating the likelihood of generating more clicks. In my experience, I have observed a notable surge in both impressions and clicks from desktop users through these types of ads.

You can easily implement this Floating Sticky Sidebar Ads Widget on Scroll by carefully following the instructions below:

1. Navigate to the WordPress dashboard and access the theme section.

2. Prior to modifying any theme code, ensure to create a backup of your current theme.

3. Select the “Edit HTML” option from the drop-down menu and proceed to scroll down to the end of your current theme code.

Search for the </body> tag and place the code right before it.

 <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>    
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style scoped='' type='text/css'>
.fixed-leftSd,.fixed-rightSd{position:fixed;top:80px;width:120px;height:600px; margin: 15px; z-index:9999;transform:translateZ(0)}
.fixed-leftSd{left:0}
.fixed-rightSd{right:0}
.close-fixedSd{position:absolute;width:120px;height:21px;line-height:15px;font-size:11px;font-weight:400;top:-20px;left:0;text-align:center;background:#e0e0e0;color:#666;padding:5px 0;cursor:pointer}
@media screen and (max-width:1300px){.fixed-leftSd,.fixed-rightSd{display:none;visibility:hidden;}}
</style>
<div class='fixed-leftSd'>
<div aria-label='Close Ads' class='close-fixedSd' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>
<b>CLOSE ADS</b>
</div>
<!-- 1st Ad code here -->
<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxx' data-ad-format='auto' data-ad-slot='xxxxxxxx' data-full-width-responsive='true' style='display:block'/>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class='fixed-rightSd'>
<div aria-label='Close Ads' class='close-fixedSd' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>
<b>CLOSE ADS</b>
</div>
<!-- 2nd Ad code here -->
<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxx' data-ad-format='auto' data-ad-slot='xxxxxxxx' data-full-width-responsive='true' style='display:block'/>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</b:if>
  </b:if>

In this instance, it is imperative to modify two parameters. Specifically, you will need to update your AdSense publisher ID and the ad slot code for your responsive display ad unit.

In this scenario, there are two sets of ad codes provided, necessitating changes to both sets for proper configuration. Remember to adjust the values in the ad codes accordingly and then save the theme.

Steps to Obtain the Publisher ID and Ad Slot Code:

1. To acquire the Publisher ID and Ad slot code, you must first log in to your Adsense dashboard and navigate to the Ads section located in the left-side menu.

2. Click on “By Ad Unit” at the top of the page and proceed to create a new display ad unit while ensuring responsive settings are enabled.

3. Upon completion, the Publisher ID and Data ad slot code will be visible within the generated AdSense code. Simply substitute the appropriate values in the provided code and save the theme settings accordingly.

After completing these steps, review any post page to confirm if the ads are displaying correctly. In the event of any discrepancies, CSS adjustments may be required to align with the website’s layout.

In the provided CSS code, a 35px margin has been set from both the left and right edges. You are encouraged to modify this value based on your website’s design.

I trust you have effectively integrated the sticky floating sidebar ad onto your WordPress website. If you found this guide helpful, we would appreciate it if you shared it on social media and tagged us in your post.