How to add share buttons in Blogger

How to add Facebook, Twitter, Pinterest share buttons to your blog page

There are many ways you can add share buttons in your blog page in blogger. It can be added below posts, above posts or at the top of your blogger page.

Today I am going to tell you how to add share buttons at Top of your blog page. I learnt this trick from http://www.myblogger-tricks.com and I would really like to thank them for putting it there J.

The share buttons will appear like this on top of the blog page.Extreme left is logo which you can personalize.

• First go to your Blogger Dashboard (To know how to go to your dashboard To go to your dashboard & download blogger template)
• Select Template>>>>HTMl. Here you will find your template code.
• Now search for this code : </head>  (To know how to search for a code click here)
• Now paste the below code just above your </head> code. Remember your </head> code will be in the end of this 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>

• Now search for the code:   ]]></b:skin>
•  paste the below code before the code ]]></b:skin>

.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: 45px;
width: 270px;
margin-left: 20px;
margin-top: 5px;
background:url("http://xyz.png") no-repeat;
}

 The part highlighted in Red is your personal image of your choice which you would like to put as logo. If you wish to keep nothing just leave the part between “ “ blank.
If you are loading a url copy, paste that link here.
But if you are uploading it from your PC/Laptop/Mobile you need to get one url first. Click here to know how to get url.
You can also change:
Height, width and margin according to your need.

• Once, you are done with this. Find the code:  </body> and type the code given below just above the closing body tag.

<script type="text/javascript">stLight.options({publisher: "1cce35ce-6744-4bac-9fa5-8f17a67a6fa6"});</script>
<script>
var options={ "publisher": "1cce35ce-6744-4bac-9fa5-8f17a67a6fa6", "scrollpx": 50, "ad": { "visible": false}, "chicklets": { "items": ["sharethis", "facebook", "twitter", "linkedin", "googleplus", "pinterest", "stumbleupon", "technorati", "delicious", "digg", "reddit", "email"]}};
var st_pulldown_widget = new sharethis.widgets.pulldownbar(options);
</script>

Note:If you want to share via g+ ,facebook and twitter ,then you can remove others from the code.CHECK the highlighted part above.Like if you want to remove pinterest,then delete the highlighted part.Similarly you can remove any share button.

• Save your template and view your blog.

Now, people can share your post via social platform :)

Cheers!!! 8->