How To Add Welcome Bar Having Share Buttons In Blogger

101helper

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. 

Screenshots:


101helper

Features:

  • 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.


101helper

(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>
<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);

</script>

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


101helper

<style type="text/css">
.stpulldown-gradient
{
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;
}

</style>

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

Customization:

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.
How To Add Welcome Bar Having Share Buttons In Blogger How To Add Welcome Bar Having Share Buttons In Blogger Reviewed by Anonymous on September 04, 2014 Rating: 5
Powered by Blogger.