10

How to Make a Sticky Sidebar Widget in Blogger?

Yesterday was a bit hectic for me. I was away from the internet as well so failed to update this blog. However, i am ready to update it again. I have already provided the Top 7 Free Premium Blogger Templates of 2013 with Sticky Menubar. After checking different Emails sent by blogger users in last 28 days,  i found that many of them were looking for an easiest method to make their sidebar widget sticky. Some of their request are pasted below:

Hello Ravi. I am new in blogging and currently running a blogger blog. I really impressed with floating sidebar widget because it gives a different experience to users. I also want to use it in my blog. For this, i have already searched on Google and also tried the method, which was provided by MyBloggerLab but failed to make everything working. Their steps are too lengthy and complex as well. Can you provide an easiest way.

 

Hi sir. I am a regular visitor of your blog i.e Geteverything.org. You provide tutorials which are always easier to understand as compared to the tutorials on other blog. I am using a Blogspot blog and want to make my sidebar widgets sticky. My brother is also using a blogspot blog and he has managed to do that through the code provided by Bloggersentral. I have also checked that post but it is too short and doesn’t provide complete information. Can you provide complete procedure. I won’t mine using the same code.

and so on………

How to make a sticky sidebar widget in blogger

Today, i am going to fulfill the request of all Blogger users, who are struggling to make their sidebar sticky. After doing few experiments and research, i came to know that, the code which has been provided by BloggerSentral works fine. However, the post lack details so i will provide complete procedure for making a Sticky Sidebar Widget in Blogger.

You Might Also Like– How to disable html codes in Blogger Comments?

How to Make a Sticky Sidebar Widget in Blogger?
  • First of all, Sign into your Blogger Account.
  • Now you will see your Dashboard. Just click on Layout as shown in below given figure.

Layout option in Blogger

  • Now, Choose the Widget in your layout, you want to make sticky. For example- I am trying to make “Find us on Facebook” widget sticky. The screenshot of the same is shown below:

Sidebar Widget in Blogger

  • Now copy the Name of the widget. For example- To make the “Find us on Facebook” widget sticky, i will have to copy the text “Find us on Facebook“. I will use it later in this tutorial so paste it into a notepad. The screenshot is shown below:

Widget Title in Blogger

  • Now Click on the “Template” Option present in the left hand side. The screenshot is shown below:

Template option in Blogger

  • After that, Click on “Edit HTML” option. The below given figure shows the same:

Edit HTML option in blogger

  • In “HTML Editor”, Press “Ctrl + F” on your keyboard and search for the name of Widget(You want to make sticky). Please note that, it is the same widget name, which you have copied in previous step. In my example, i am trying to make a widget named “Find us on Facebook” sticky so searching for the same. The screenshot of the same is shown below:

Finding widget name in blogger HTML Editor

  • Once found, Note the id of the widget. In my example , its id is “HTML6“. It can vary in your html editor window.
  • Now, In the same “HTML Editor” window, Press “Ctrl + F” on your keyboard and search for “</body>” tag. The screenshot of the same is shown below:

</body> in Blogger HTML Editor

  • Paste the below given Code just above “</body>” tag.

Note :: Below given code is not developed by us. The credit of the code goes to BloggerSentral Blog . We are just sharing the code developed by the BloggerSentral Blog after the permission of the blog owner and due to the request of the users. You can also share the below given code and use it as well but don’t change the Link or Notice which is placed above the code. Use of below given code after the removal of links is illegal. 

<script>
// Sticky widget by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky(“YOUR_WIDGET_ID“); // enter your widget ID here
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement(“div”);
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ‘ bs_sticky’;
window.addEventListener(‘scroll’, bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ‘ bs_sticking’;
bs_sticky.style.width = width + “px”;
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>

<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>

  • Make sure that you place the above Given code just above the “</body> ” tag. The screenshot of the same is given below:

Make a sidebar widget sticky in blogger

  • Replace “YOUR_WIDGET_ID” in the above code with the Widget ID. For example- the Widget ID of my targeted Widget named “Find us on Facebook” was “HTML6“. It is shown in the above figure. That’s it. You are done so click on “Save Template” button and enjoy.
  • You can use the same method multiple times for making multiple number of Widgets sticky in blogger. To check the demo, click on below given button. Scroll down the page. You will find the widget titled “Find us on Facebook” sticky:

Sticky Widget DEMO

From the Editor’s Desk

Using the above given code, you can make unlimited number of Sidebar widgets sticky in blogger. The code can also be used to make the Menu bar sticky as well but i am not discussing the procedure now because it may confuse you. I am saying this because every custom blogger template contains different “id” or “class” for Menu items.
Just use the above tutorial and enhance your user’s experience. The tutorial is too simple. However, if you are still feeling any difficulty, feel free to ask the same via comment. It would be my pleasure to help you.
Ravi Kumar
 

a:1:{s:13:"administrator";b:1;}’ WHERE user_id=7 AND meta_key=’wp_capabilities

Click Here to Leave a Comment Below 10 comments