Hello Everyone! In this article see about Add Responsive Bottom Sticky Ads in Blogger for free.
What are sticky ads?
Sticky ads will always appear on websites. We can fix this ad on the bottom, top or Sidebars of the blogger website like horizontal and vertical formats. The position and ads size will be our own choice. We can fix this type of ad on both blogger and WordPress.
Demo
Benefits of Sticky ads
sticky ads will help to improve our AdSense CTR and Revenue. So, most bloggers are using this type of ad format.
Important Guidelines
This ad format will increase AdSense earnings. But, in some cases AdSense will be disabled due to high CTR.So if you are using this ad means, reduce the number of other ad placements.
Before doing this process, please backup your blogger theme codes for prevention. Then proceed below steps.
Add Responsive Floating Bottom sticky ads
Step 01 Go to Blogger.com
Step 02 Go to the Themes section
Step 03 Click Edit HTML
Step 04 Find ]]></b:skin>
Step 05 Paste the below CSS code, above it.
/* Widget Sticky Button */
.sticky-button{position:fixed;bottom:0;right:20px;width:50px;height:50px;border-radius:50px;background-color:#fdd929;box-shadow:0px 4px 12px 0 rgba(9,32,76,.05);z-index:20;overflow:hidden;-webkit-transition:all .2s ease;transition:all .2s ease;opacity:0;visibility:hidden}
.sticky-button.sticky{bottom:20px;opacity:1;visibility:visible}
.sticky-button > *{display:flex;align-items:center;height:100%}
.sticky-button > * svg{margin:auto;fill:inherit}
.sticky-ad{position:fixed;bottom:0;left:0;width:100%;min-height:70px;max-height:200px;padding:5px 0;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1);-webkit-transition:all .1s ease-in;transition:all .1s ease-in;display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:20}
.sticky-ad .sticky-adClose{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;position:absolute;right:0;top:-30px;background-color:#fefefe;box-shadow:0 -6px 18px 0 rgba(9,32,76,.08)}
.sticky-ad .sticky-adClose svg{fill:#767676}
.sticky-ad .sticky-adContent{flex-grow:1;overflow:hidden;display:block;position:relative}
.sticky-adInput:checked + .sticky-ad{padding:0;min-height:0}
.sticky-adInput:checked + .sticky-ad .sticky-adContent{display:none}Step 06 Then find </body>
Step 07 Paste the below HTML code above </body> tag
<input class='sticky-adInput hidden' id='sticky-adIn' type='checkbox'/>
<div class='sticky-ad' id='sticky-ad'>
<label class='sticky-adClose' for='sticky-adIn'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></label>
<div class='sticky-adContent'>
<!--<div class='ads-here' style='display:block;height:60px'/>-->
<ins class='adsbygoogle' data-ad-client='ca-pub-4074692521879390' data-ad-format='horizontal' data-ad-slot='6218242616' data-full-width-responsive='true' style='display:block;text-align:center'/>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
</div>
Step 08 Change ca-pub-xxxxxxxx with your Adsense ca-pub ID
Step 09 Also change ad-slot-xxxxxx with your ad unit ID
That's all..,
Step 10 Save Changes by clicking the Save Button on Top Corner
Watch Tutorial Video
If you have any doubts regarding, add responsive floating sticky ad on blogger to watch the our Tutorials video.
Conclusion
Hope this article "add floating bottom sticky ads on blogger" is informative. If you think this Article is useful. To share with your friends and support us. Post your queries regarding this article, comment below. Thank you
Copyright: Tamil Assistant