X Close
T Thursday, September 04, 2014

How to add welcome bar having share buttons in blogger

fahim raza Be the first to comment!

Blogging isn't just about building traffic and earning money. It is also about how you maintain your blog so visitors to your blog take some beneficial action such as sharing your posts, subscribing to your blog, following on social networks and so on.
There are many ways to increase your post shares and getting more followers, here is one. Add a welcome bar to your site which contains social sharing buttons. It will help visitors to share your posts easily because this bar scrolls down when page is scrolled down. 




  • Easy to add to website or blog.
  • Contains social sharing buttons.
  • Contains a logo area.
  • Stylish and cool look.
  • Appears only when page is scrolled down.
  • No registration required!

How it works:

It works in a very simple way. You have to paste a Javascript and a css code in your blog template. When your blog loads the code which you paste automatically loads all the Javascript codes which are in the form of links in code.

Add welcome bar:

To add welcome bar to your blog follow the below steps:

(1). Log-on to blogger and log-in to your account.

(2). Go to template and edit it.


(3). Find <head> by the combination of Ctrl+F.

(4). Below <head> paste the below code.

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

(5). Now add below code above </body>.

<script type="text/javascript">stLight.options({publisher: "ur-f7ae851f-962e-15ed-33ac-95a9e9d14c", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
var options={ "publisher": "ur-f7ae851f-962e-15ed-33ac-95a9e9d14c", "scrollpx": 50, "ad": { "visible": false}, "chicklets": { "items": ["sharethis", "facebook", "twitter", "linkedin", "digg", "blogger", "stumbleupon", "tumblr", "reddit", "pinterest", "googleplus", "email"]}};
var st_pulldown_widget = new sharethis.widgets.pulldownbar(options);


(6). Save the template and go back to Template customize it and go to Advance--->Add css and post the below code.


<style type="text/css">
background: #E1E1E1;
background: -moz-linear-gradient(top, #E1E1E1 0%, #A7A7A7 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E1E1E1), color-stop(100%,#A7A7A7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E1E1E1', endColorstr='#A7A7A7',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #E1E1E1 0%,#A7A7A7 100%); /* opera */
color: #636363;
#stpulldown .stpulldown-logo
height: 40px;
width: 300px;
margin-left: 20px;
margin-top: 5px;
background:url("http://sd.sharethis.com/disc/images/Logo_Area.png") no-repeat;


(7). Save changes and go to your blog scroll down to see welcome bar.


Change http://sd.sharethis.com/disc/images/Logo_Area.png to the link of your blog logo in the code of step 6. Increase or decrease the logo area width and height in the code(step6).

Thanks for visiting 101Helper. Follow and subscribe for latest updates. share this post with others to help 101Helper grow.

Tags: How to add welcome bar having share buttons in blogger, 101helper, gadgets for blogger, tips and tricks for blog.

No comments :

Post a Comment