How to Add Floating Sidebar Ads in Blogger

0

How to Add Floating Sidebar Ads in Blogger

To add floating sidebar adsense ads in blogger of the screen on your Blogger website, you can use a combination of HTML, CSS, and JavaScript. Here's a step-by-step guide:


  1. Log in to your Blogger Account:
  2. Go to Blogger and log in to your account.
  3. Access Theme Editor:
  4. In your Blogger dashboard, navigate to the blog you want to edit.
  5. Click on "Theme" in the left-hand menu.
  6. Edit HTML:
  7. Click on the "Edit HTML" button.


Backup your Template:


Before making any changes, it's a good practice to make a backup of your template. Click on the "Download Theme" button to save a copy of your existing template.


<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:-15px;width:120px;height:600px; margin: 15px; z-index:9999;transform:translateZ(0)}
.fixed-leftSd{left:-15px;}
.fixed-rightSd{right:35px;}
.close-fixedSd{position:absolute;width:160px;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>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="YOUR-AD-CLIENT-ID"
         data-ad-slot="YOUR-AD-SLOT-ID"
         data-ad-format="auto"></ins>
    <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>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="YOUR-AD-CLIENT-ID"
         data-ad-slot="YOUR-AD-SLOT-ID"
         data-ad-format="auto"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

</div>

</b:if>
</b:if>


Replace "YOUR-AD-CLIENT-ID" and "YOUR-AD-SLOT-ID" with your AdSense ad client ID and ad slot ID.

Save Theme:

Click on the "Save theme" button to save your changes.
Preview and Adjust:

Preview your blog to see if the floating AdSense ad is displaying correctly. Adjust the CSS code as needed to fit your design.
Remember to comply with AdSense policies, and ensure that the ad placement adheres to Google's guidelines to prevent any issues with your AdSense account.

Post a Comment

0 Comments
Post a Comment
>
To Top