How to Make a Rail Ads (Sticky Floating Ads) in Blogger

How to Make a Rail Ads (Sticky Floating Ads) in Blogger
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

 In this article, I'll show you how to add a Sticky Floating Sidebar Ad to your Blogger website. You can add a similar ad to your website by just following the simple steps.

How to Make a Rail Ads (Sticky Floating Ads) in Blogger

Sticky ads help us get a better click-through rate (CTR) and make more money in Adsense. I've already talked about how to add "sticky footer ads" to Blogger, which are ads that stay at the bottom of the screen. But this one will stay in the two sides of the desktop screen when the user scrolls down the page.

In this way, more people will see this ad and it will be more likely that people will click on it. In fact, desktop users are more likely to see and click on these types of ads.

Follow the steps below to add this Floating Sticky Sidebar Ads Widget on Scroll.


How to Add Floating Sticky Sidebar Ad on Blogger

So, let's go to the theme section of the Blogger dashboard.

Now, you need to save a copy of your theme's code before you make any changes to it.

Step 1 :- First Login Your Blogger Account.
Step 2 :- Then Select The Edit Html on the Theme Page.
Step 3 :- Scroll down to the end of your them code or find </body>.
Step 4 :-Then Copy And Paste the code below above the </body> tag.


 <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> 

Here, remember that you need to change two values. One is your Adsense publisher ID, and the other is your responsive display ad unit's Ad slot code.

Here, there are two ad codes, so you need to change the values in both of them and save the theme.

How can You get the publisher Id and Ad slot code? 

Well, to do this, you need to log in to your Adsense dashboard and click on the Ads section in the left menu.
How to Make a Rail Ads (Sticky Floating Ads) in Blogger


Now, you need to click on "By Ad unit" at the top and make a "New display ad unit" with responsive settings.

After that, the code that AdSense makes will show you the Publisher Id and Data ad slot code.
sticky Floating sidebar ad in blogger

Just replace the values in the given code and save the theme code.

Now, Open any post page and check if the ads are showing properly or not. 

Otherwise, we need to modify the CSS settings according to the layout of the website.

Here, As you can see in the CSS code, I have assigned a margin of 40px from both the left and right sides. You can change this value according to your website layout. 

Conclusion

 I hope you have successfully added the Rail Ads (Sticky Floating Ads) in Blogger to your Blogger website. If you found this Article, helpful do us a favor by sharing it on social media. Don’t forget to tag us on that post. 

Post a Comment

Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
Site is Blocked
Sorry! This site is not available in your country.