How to Add Floating Ads Using CSS in Blogger
Hi to all, in this article I am going to tell you all about how to add floating ads in blogger website easily in just few minutes by using pure CSS.
Basically it is a type of footer ads, but the main difference is that t is more clickable than the footer ads.
In any blogger template or theme, you can add this floating ads but you need to have an active AdSense account or any other ad network so that you can add ads inside this floating ads popup.
So, please read the below provided steps carefully to get clear understanding about adding floating ads using CSS in your blogger website without any issue or error.
Step-1: Login to Blogger
First of all you need to visit official website of blogger.
Now you need to login to your blogger website dashboard by using your login credentials.
Step-2: Backup your Website Theme
After successful login to your blogger dashboard, you need to backup your blogger website theme for future purpose.
Now to take backup of your blogger theme, you nee to follow the below given path:
Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download & verify captcha -> File downloaded successfully.
Step-3: Visit Theme Editor
After successful backup of you blogger theme, you need to visit your blogger theme editor section to add few codes.
To visit blogger theme editor section, you need to follow the below given path:
Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.
Step-4: Adding HTML Code in Theme
After visiting your blogger website theme editor section, now you need to add a simple HTML code inside it.
Now you need to copy below provided HTML code.
<b:if cond='data:view.isPost'>
<div id="floating_ads_container">
<div id="floating_ads_wrap">
<div id="floating_ads_bottom_ad">
<!--[ads]-->
<!--Add Your ads code here-->
<div id="floating_ads_bottom_close">
<a href="#" onclick="document.getElementById('floating_ads_container').style.display='none';return false;" id="floating_ads_bottom_textcss_x">×</a>
</div>
</div></div></div></b:if>
Paste the copied HTML code just above closing body tag or </body> tag.
After pasting the html code in your blogger theme editor, you need to add your google ads, for that you need to visit your google AdSense account and need to create a display ads and then copy the code and paste that code in the place as mentioned in the HTML code.
Step-5: Adding CSS Code in Theme
Now you need to copy below provided CSS code.
<style>
#floating_ads_container {position: fixed;bottom: 2px;width: 100%; -webkit-transition: width 1s, height 1s; transition: width 1s, height 1s;z-index:999;} #floating_ads_wrap {text-align: center;} #floating_ads_bottom_ad {display:inline-block;position:relative} #floating_ads_bottom_close {position: absolute;top:-20px;display:block; font-size: 20px; font-weight: bold; text-decoration: none; border-radius:50%; cursor: pointer; text-align: center; height: 25px; width:25px; line-height: 25px; background-color: #ccc;z-index:5; color: #fff! important; right:-10px;}
</style>
And paste the copied CSS code just above closing head tag or </head> tag.
Step-6: Saving the Theme Code
After adding the HTML and CSS code inside your blogger theme editor as mentioned in above steps, now you need to click on save button.
After clicking of save button, it will take few seconds to process your complete code to check whether any errors is there or not and after successful processing, you will get a message i.e. Updated Successfully.
Now you have successfully added floating ads using CSS in your blogger website easily without any error.
Note:
If you get any error or issues while saving the theme code, then you need to restore your backup theme code again and need to repeat the same process as given in above steps carefully.
If you want to change width and height and styles, then you need to modify CSS code above given carefully.
Conclusion
I hope that you have understood about how to add floating ads in your blogger website easily in just few minutes by using pure CSS.
