Skip to main content

How to Make Any Widget and Navigation Bar Sticky in Blogger

As the title of this post explains the post is about making widget and navigation bar sticky on Blogger blogs. Sticky means the widget will float when users will scroll down your blog post. It means the widget that you will make sticky with the help of my JavaScript will be visible every time. The widget will keep float at the top until it's original place comes or when the page is scrolled back to top. It is very easy to make any widget and navigation bar sticky. To do this you will have to use the Script that I will provide on this post.

If you haven't understand about the sticky and floating widget until now than take a look at the navigation bar of my blog. You can see the navigation bar keeps floating on the top when you scroll from it's original location. It can be very useful in making subscription box, Facebook Like Box, Follow Button, Like buttons etc. It will make your blog easily navigable and your users will be able to locate your blog's content very easily. You will be able to float or make sticky anything which has ID. As you were knowing that all the Widgets in Blogger blog are given a unique Widget ID that can used to customize and design the widget of your Blogger blog. Now see the steps given below to know how to make widget of your Blogger blog sticky or floating. But before that see the image given below to know more about sticky or floating widget.

Make Any Widget and Navigation Bar Sticky in Blogger

Now you have understand what sticky means and so you will also want to know how to make your Widget sticky to make it visible even after scrolling through that widget specified place. See the very easy steps given below.
  • At first sign in to your Blogger blog and navigate to the title of the blog in which you want to make the widget sticky.
  • Now you have to go to Template page from the Dashboard section.
  • Click on Edit HTML which is located below the live preview of the Template page of your blogger blog.
  • In the HTML page search for the closing body tag. If you don't know what closing body tag means than see the closing body tag below and search for it in your Blogger Template. Now search for the closing body tag given below.
</body>
Tip: The closing body tag (</body>) is generally located at the very last lines of the Template. You can also search for that code by pressing CTRL+F. Now follow the next step given below.
  • Now add the JavaScript Code given below just above/before the "</body>" tag.
<script>
$(document).ready(function () { 
  var top = $(&#39;#YOUR-WIDGET-ID-HERE&#39;).offset().top - parseFloat($(&#39;#YOUR-WIDGET-ID-HERE&#39;).css(&#39;marginTop&#39;).replace(/auto/, 0));
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y &gt;= top) {
      $(&#39;#YOUR-WIDGET-ID-HERE&#39;).addClass(&#39;fixed&#39;);
    } else {
      $(&#39;#YOUR-WIDGET-ID-HERE&#39;).removeClass(&#39;fixed&#39;);
    }
  });
});
</script>
<style>
  #YOUR-WIDGET-ID-HERE.fixed {
background:#FFFFFF  !important; position:fixed !important; top:0; z-index:9999; margin-top: 0; position:relative\9 !important;
}
</style>

It's not over yet! You will need to replace YOUR-WIDGET-ID-HERE in the above JavaScript code with the widget ID that you want to make sticky. You will need to replace YOUR-WIDGET-ID-HERE with your Widget ID in line 3, 7, 9, 15 in the above Script. It means you have to add your Widget ID five (two times in line 3) times in the above JavaScript code to make it sticky Widget.  If you don't know how to get the ID of the Widget or Gadget that you want to make sticky than follow the very easy steps that is explained here to get your Blogger Widget ID.
  • Now after replacing YOUR-WIDGET-ID-HERE with the Widget ID of your Blogger Widget take a look at your Blogger template by pressing the Preview button.
  • Save your Template.
Style your Sticky Widget
  1. Yes, you can style or design your Sticky Widget. Normally the Widget are not given the style sheet. So, to make it look just like the Widget of you blog you can use the CSS codes.
  2. Styling for the Sticky Widget can be applied in line 16. By default the background color is white (#FFFFFF).
  3. Change the styling according to your need and to make it look jut like your sidebar.
Great! You have just made one of your Widget of your Blogger blog sticking. Now to make your navigation bar floating you will just need to get the ID of your Navigation bar and add the ID in the specified place in the above given JavaScript code. It can be used to make any widget or part of your Blogger blog sticky that has a Class or ID. Just go to the link given in previous paragraph to know your widget ID.
That's All! I hope this post helped you in making your Blogger Widget Sticky. If you faced any problem than you can drop a comment below.
Labels:

Comments

Post a Comment

Popular posts from this blog

Need for Speed (NFS) Carbon Cheats, Codes and Unlock Parts

Need for Speed makes some great racing games like NFS Most Wanted, Rivals etc. and Need for Speed Carbon is another 10th addition to their NFS series. It's the first game to get the PEGI rating 12+. It's a very good game with it's story line. If you are looking for some adventure and a good racing than this one will be in your game list. While playing the game you will face some difficulty in completing this game. And from than onwards you may look some cheat codes that can help you in completing NFS carbon. And to make it easier for you here is the list of some working cheat codes and trainer. But you proceed to know about cheats and tricks for Need for Speed Carbon you would like to know the adventurous story of the game. So let's start. The game is set in the fictitious city of Palmont. Soon after the player leaves the Rockport City ( remember jumping of an old bridge in last scene of NFS Most Wanted) the player drives on a route to Palmont city with his BMW ca...
2 comments
Read more

How to Watch Any TV Show or Movie on Kodi

Kodi is a cross-platform media center solution developed by XBMC/Kodi Foundation, a non-profit technology association. Kodi which was previously known as XBMC has been growing rapidly from last few years. While the application offers to play local media files, but, it has plethora of third party add-ons, which, we can use to increase it's usefulness. In this post, you'll learn the process to install Indigo and Exodus on Kodi 18 (64-bit). The process is similar on version 17 of this app, however, I haven't checked the previous versions. Note : Streaming copyrighted content is illegal, nevertheless, it's completely legal to use Kodi for viewing the content you've purchased. First, we'll need to add Indigo Installer. Follow the following steps to know how to do it: Open Kodi . Click on the Gear button (settings). Select File Manager . Double Click on Add Source . Click on <None> ... ...type  http://fusion.tvaddons.ag and...
Post a Comment
Read more

Top 5 Alternatives to Extratorrent

In an unforeseen move, Extratorrent decided to shut down few months ago. It was one of the most popular torrent site, but now users who visit it's homepage are greeted with a message which clearly states they are not going to return in the future. Now that they are gone, various clone sites such as extratorrent.cd has been setup to squeeze money from the confused visitors via its advertisements. People visiting these clone sites should know that the original ExtraTorrent owners have deleted all data, and none of the impostors have access to the old ExtraTorrent files. There are many alternatives out there. You just need to look at the right place. Take a look at the following original torrent sites which might entice you. 1337x.to 1337x is probably the best designed torrent site you'll ever come across. Although it lacks the ExtraTorrents' rating system, nonetheless, most of the contents are verified by moderators. The site has easy-to-navigate subsections whic...
Post a Comment
Read more