How to float sidebar in blogger?

Hi friends in this post i am sharing about how to create floating bar for blogger.And the most important thing is you can float whole sidebar or particular sidebar widget.If you want to show your subscribe sidebar widget to your visitors while they scrolling this method is suitable and it also helps to convert visitors to subscribers a little.Search box is also a good method to make it floating for your visitors.Thanks to http://html-tuts.com/jquery-scroll-div-sidebar/ for making this floating bar code.And we provided instructions how to run this code perfectly in blogger.

How to make whole sidebar as floating bar in blogger?

I have used simple default blogger template and i am explaining floating bar for this template.
-----------------------------------------------------------------------------
Find the code like this
<b:section-contents id='sidebar-right-1'> 
<b:widget id='HTML1' locked='false' title='round subscription' type='HTML'> </b:widget>
<b:widget id='HTML2' locked='false' title='round subscription' type='HTML'> </b:widget>
...
...
...
</b:section-contents>
-----------------------------------------------------------------------------
Now we are going to add  following code just below "</b:section-contents>"
$(function() {
    // Set this variable with the desired height
    var offsetPixels = 370;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offsetPixels) {
            $( "#sidebar-right-1" ).css({
                "position": "fixed",
                "top": "15px"
            });
        } else {
            $( "#sidebar-right-1" ).css({
                "position": "relative",
                "top": "0"
            });
        }
    });
});



The id is "sidebar-right-1" so we added in jquery code "sidebar-right-1" .And the id will be different for third party blogger templates.So you have
to check the correct id .Keep in mind the jquery code should be placed below the </b:section-contents> . You can change the values   "370" according to your needs.

How to make specific sidebar as floating bar in blogger?

---------------------------------------------------------------------------------
Find the code like this
<b:section-contents id='sidebar-right-1'> 
<b:widget id='HTML1' locked='false' title='round subscription' type='HTML'> </b:widget>
<b:widget id='HTML2' locked='false' title='round subscription' type='HTML'> </b:widget>
...
...
...
</b:section-contents>
---------------------------------------------------------------------------------
If you want to make second widget as floating bar copy its id "HTML2"
Now just below the "</b:section-contents>" add the following code
$(function() {
    // Set this variable with the desired height
    var offsetPixels = 370;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offsetPixels) {
            $( "HTML2" ).css({
                "position": "fixed",
                "top": "15px"
            });
        } else {
            $( "#HTML2" ).css({
                "position": "relative",
                "top": "0"
            });
        }
    });
});
Replace HTML2 with your id to make the widget float.  You can change the values   "370" according to your needs.
That's all friends.

SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

• 
• 
•