How to Create a Floating "Sticky" Sidebar Widget in Blogger
Hello guys, In this guide, we will find out how to Create or make Floating sticky sidebar ads Widget for our blogger website. Well for WordPress there are lots of plugins available to do that but for bloggers, we always need to put our heads on JavaScript codes Right!.
So, this article will be useful for you in that you can Add sticky Sidebar Widgets ads to your Blogger website and increase revenue in Adsense.
Floating Sticky Sidebar Ads Widget on Scroll Blogger Script |
Also Read:
How this help to increase revenue?
Floating elements that stick to your screen as you scroll tend to have a higher click-through and conversion rate than static objects. This is why many websites make use of floating elements throughout their website. We have seen elements like header bar, footer bar, sidebar widget with newsletter option, etc.
In the past, we have already shown you how to make a Sticky Floating Footer bar in Blogger. In this article, we will show you how to create a floating “sticky” Sidebar widget in Blogger?
Before let us know some very basics of Sticky sidebar ads widget benefits and working.
What are sticky sidebar widget?
Sticky ads are those that float down the page as a visitor scrolls down. I don’t have to tell you that having ads stick is much better at getting attention than ads that don’t stick. More attention = more clicks = more ad revenue.
There are different sticky options for desktop and mobile. I explain both below and how you can get those sticky ads on your site.
So In this guide, we will be adding fixed on scroll sticky ads to the blogger website or you can also use them on any website. The Second type is Floating fixed footer ads.
Features of floating Sticky Sidebar Ads Widget Trick
Floating sidebar widgets help us to attract our visitors, or we can say to highlight a particular widget over readers. You can use this trick to make any blogger sidebar widget sticky on scroll like as Advertisement widgets, Subscription Widgets, Popular Posts Widget, and much more gadgets too.
- This Script and CSS code helps you to highlight a particular sidebar widget in your blogger blog.
- This widget will not overlap on the footer bar.
- It will not affect your blog on mobile devices if you're using a responsive blogger template.
Steps to Make any Blogger Sticky [Fixed] Sidebar Widget on Scroll
Follow the below steps carefully as it is not that easy, and take a backup of your template before doing any changes. So in case something went wrong then you can again re-upload your backup script.
Open Blogger Dashboard and follow below steps.
Step#1: Adding a New Widget:
The First thing you need to do is to add a new widget in your sidebar so that later on you can make it sticky. Go to Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript >> and name the widget as “My Sticky Gadget”. Now writing anything in the HTML body Like your Facebook like a box or email subscription form etc. And save it.
Step 2# Adding Jquery
Now click on template go to Edit Html and in the Html page click anywhere in the Html code and press ctrl+f or search for jquery.min.js. If you find it then ignore the below code else if you don’t get it just copy the below line and paste it below <head>. If you find another version of this jquery that’s OK it will do fine.
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2′ type=’text/javascript’/>
Step 3#: Adding JavaScript to your template.
Now search for </body>. Now Copy below code and paste it just above </body> tag. And here replace the #HTML3 with your Widget HTML no. [ Check below Step for knowing your Widget Id number ]
<script type='text/javascript'>
$(function() {
if ( $(window).width() > 990) {
var ks_widget_top = $('#HTML3').offset().top;
var ks_sticky_widgets = function(){
var ks_current_top = $(window).scrollTop();
if (ks_current_top > ks_widget_top) {
$('#HTML3').css({ 'position': 'fixed', 'top':0, 'z-index':999999 });
} else {
$('#HTML3').css({ 'position': 'relative' });
}
};
ks_sticky_widgets();
$(window).scroll(function() {
ks_sticky_widgets();
});
}else{
}
});</script>
Final Step: Location Newly Added Widget and replace the name
More useful script: Responsive Bottom Sticky Ads
After adding the JavaScript code, you have to search for the name of your widget. Since we have named it "My Sticky Gadget". Therefore, in the template coding search for "My Sticky Gadget". To be able to search correctly it is essential that you must use the built-in search box provided by the Blogger template editor.
Note: To enable the search box click anywhere in the template editor and press "CTRL+F". Now on finding "My Sticky Gadget" you will able to see a newly added widget. Similar like below code and note widget Id.
<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
Remember: The ID of your widget should be unique. For example, if you are using id='HTML32' in any of your widgets then you cannot use the same ID for others.
Now click on save the template and you are done!
Read more: meme generator website script
For a complete demo of the script with a proper installation and usage guide please watch the complete video.
Sticky Sidebar Widget on Scroll Script in Blogger
In conclusion of Floating Sticky Sidebar Ads Widget on Scroll Blogger
We hope that this article has helped you in creating a floating sticky sidebar widget on your Blogger website.
Well, that’s it in this post, will see you again with a new and useful script for the blogger platform. I hope you like this script and share it with your friends. Thanks for visiting.
ConversionConversion EmoticonEmoticon