Add Social Sharing Buttons Below Every Post in Blogger | SoronnoJ

Facebook Twitter RSS Google

Home » Unlabelled » Add Social Sharing Buttons Below Every Post in Blogger

Add Social Sharing Buttons Below Every Post in Blogger

Social Bookmarking and sharing buttons helps your blog visitors to easily bookmark or Share your blog content with popular social websites like Facebook, Twitter, etc. In this post we are going to show you how to add simple social sharing buttons below every post in blogger. In this widget we added Facebook, Twitter, Google Plus, Pinterest, Delicious, Digg, Stumble upon, Reddit, RSS icons. If you are ready to add these sharing widget below every post in your blogger blog, then kindly follow these steps.

Social_Sharing_Buttons_Below_Every_Post_Blogger

How to Add Sharing Buttons Below Every Post

1. Go To Blogger > Template
IMPORTANT:Back up your template
2. Click Edit HTML > Proceed > Click the Expand Widget Templates Box
3. Search for this code <data:post.body/>
4. Just below paste the following code

<style>
/*--------Social Sharing Widget Below Blog Post ------*/
.sharebelow a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTHQy7h7YXu9hMYbL2R21x85EhJEgVxyXq4G_TfZECswhbfHPML7JmHvKEjttKx1_WWnxFS0VLG03x-t7zX2Lm-XN_RW7ZGMgNaMQ_2b6FlVlceOAgPG372b0aw-U0HY3v84sl7PlnfcA/s1600/sharebelow.png) no-repeat;
}
.sharebelow a.googleplus {
background-position: 0px -348px;
}
.sharebelow a.googleplus:hover {
background-position: 0px -406px;
}
.sharebelow a.pinterest {
background-position: 0px -464px;
}
.sharebelow a.pinterest:hover {
background-position: 0px -522px;
}
.sharebelow a.delicious {
background-position: 0px 0px;
}
.sharebelow a.delicious:hover {
background-position: 0px -58px;
}
.sharebelow a.digg {
background-position: 0px -116px;
}
.sharebelow a.digg:hover {
background-position: 0px -174px;
}
.sharebelow a.stumbleupon {
background-position: 0px -812px;
}
.sharebelow a.stumbleupon:hover {
background-position: 0px -870px;
}
.sharebelow a.technorati {
background-position: 0px -928px;
}
.sharebelow a.technorati:hover {
background-position: 0px -406px;
}
.sharebelow a.twitter {
background-position: 0px -928px;
}
.sharebelow a.twitter:hover {
background-position: 0px -986px;
}
.sharebelow a.facebook {
background-position: 0px -232px;
}
.sharebelow a.facebook:hover {
background-position: 0px -290px;
}
.sharebelow a.reddit {
background-position: 0px -580px;
}
.sharebelow a.reddit:hover {
background-position: 0px -638px;
}
.sharebelow a.rss {
background-position: 0px -696px;
}
.sharebelow a.rss:hover {
background-position: 0px -754px;
}
.shareandbookmark{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:18px;
font-family:sans-serif;
}
</style>
<div class='sharebelow'>
<b:if cond='data:blog.pageType == "item"'>
<div class="shareandbookmark">
Kindly Bookmark and Share it:</div>

<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :>'/>

<a class='googleplus' expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='external nofollow' target='_blank' title='+1 it :>'/>

<a class='twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :>'/>

<a class='pinterest' href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :>'/>

<a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :>'/>

<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :>'/>

<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank' title='Digg this :>'/>

<a class='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :>'/>

<a class='rss' expr:href='data:blog.homepageUrl + "feeds/posts/default"' target='_blank' title='Bookmark :>'/>
</b:if></div>
<div style="clear:both"/>

5. Save your template and you are done!

Hope This Post Helps You !

1 comments:

Anonymous4 November 2013 at 21:14
Perfect! I've been looking for this exactly. I’ll bookmark your blog and check again here regularly. I’m quite sure I will learn many new stuff right here! Best of luck for the next!
website design
ReplyDelete
Replies