On-Scroll Sticky Bar. A simple widget which appears in the upper part of your page as you scroll down and disappears again on reaching the top something similar to the Facebook header bar. It contains social sharing options as well as links to Home Page of your blog. Also present are the Slide to Top and Email subscribe options. This can be easily customized to include options according to your needs. Lets get started and see how to add it in your blog !

To add to sticky bar I will recommend you to use old blogger user interface because as per widget author it throws an unexpected error,you can switch back to old blogger interface by clicking on the Settings Wheel icon at top right of your new blogger dashboard.



Demo.

You can see the live demo on this very page itself ! Please scrool to  down this page, you can see it.




sticky header bar
 




How To Add Scrolling Sticky Bar To Blogger? Please follow the step by step below:


Steps 1 : Adding CSS code The Bar Styles




  1. Go to Blogger Dashboard and open up the Design Tab of the blog in which you want to add the Scrolling Sticky Bar. Now select the Edit HTML option.

  2. find for  ]]></b:skin>

  3. add the following CSS code just before ]]></b:skin> tag 









  



Step 2 : Adding CSS code The Bar Styles




    1. Now find for  </body> tag

    2. add the following script code below just before </body>  tag  







    Note: In case you have already included the jQuery library in
    your blog then remove Line 1 . The same applies for Line 12 ,13 and 14
    as well if you have included Facebook , Google+ and Twitter scripts
    respectively.




    Step 3 : Adding The HTML code


    1. Now search for <body tag  and add the following code just below it If you are using default blogger templates then search for <body tag. See Video tutorial below for more details information. 

    2. add the following code below just below of code  <body tag 

    3. Hit the Save Template button and preview your blog to see how the bar appears.








    Note: before installing the html code, you first have to change the blog url and the url feed first post with a link url and link url fedd blog post from your blog to redirect to your blog.



    Line No. 4 :

    <li class='Home'> <a href='http://helpsblogging.blogspot.com/'>Home</a> </li>

    Replace http://helpsblogging.blogspot.com/ with your blog URL.



    Line 15:

    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=helpsblogging&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' style='padding:3px;text-align:center;' target='popupwindow'>



    Line 16:

    <input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = "";}' placeholder=' Enter Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='stylifyyourblog'/><input name='loc' type='hidden' value='en_US'/> <input class='SYB-emailsubmit' type='submit' value='Subscribe'/> </form>



    Line 15 and 16 replace instance of stylifyyourblog with your RSS Feed Name.





    Video Tutorial :









    Credit:

    This blogger widget created by Prayag from Stylifyyourblog and I share again on http://helpsblogging.blogspot.com/.

    If you have any ideas or questions about this widget then feel free to share with us. :)





    Happy Blogging....



    0 comments:

    Luncurkan toko Anda hanya dalam 4 detik dengan 
     
    Top