How To Create “Sticky” Sidebar Widget In Blogger Using jQuery

How To Create “Sticky” Sidebar Widget In Blogger Using jQuery

I have seen at more and more website, they created sticky sidebar on their blog/websites, then today I’m here with how to create “Sticky” sidebar widget in blogger using  jQuery .

People visit your blog to read the posts, Not to see the widgets. Most of the time they open the post, scroll & read the content and left. When they are at the bottom of the post your sidebar was out of their screen. And you don’t get any benefit from it. I know you put many widgets there!

One of the best way to get benefit from your widgets is make one of your widget STICKY that scroll with user.

For example you want more subscribers then just make your Subscription Form sticky.

Note : - Don’t try to stick your Google adsense ads for getting more clicks on it, your A/C can be ban or blocked by this reason.

• You can stick your Subscription form to get more subscriber.
• You can stick Facebook/Google Plus Widget for more Like.
• You can stick Popular post to decrease bounce rate.
• You can stick any offers to generate Revenue.

How to create sticky sidebar in blogger?

Go to blogger–>Template—>Edit HTML
CTRL + F to find 

 tag in your blogs HTML
Copy and paste below code just above it.

• Remove above red colored line if  your blog have already jQuery plugin.
• Next search for

tag,

Copy and paste below code just above it.

• Now search for ]]>

tag,

Copy and paste below css code just above it.

#mdstickybar { background-color:#ECEEF5; padding-top:10px; width:300px!important; padding-bottom:15px; color:#474747; }

You can change your widgets background color, width, text color by editing into above css code.

• Lastly save your template and lets try to stick any widget…
• Go to Layout–>Choose which widget you want to stick—>Click on edit.

• After appearing widget page, copy the widget ID from the top address bar.

Blogger give automatically one uniqe ID for per widget, thats you copied ID of your widget which you want to stick .

• Now go to Template—>Edit HTML
• Press CTRL + F search/find box will appear, paste your widget ID and hit enter to search your widget in the template.

• Open folded code by clicking on black arrow
• Your widgets full code will look like this :

• Copy and paste below code just above

• Now copy and paste below code just after

• Finally your code will look like this :

Now save your the template and see the result :D
Now visitors will see your sticky widget when they scroll. Hope this widget will help you get benefit from your sidebar.