The following article will help you get a social sharing widget under each blog post as I have in my blog.
It consists of four parts of template Editing :-
Adding CSS
See related posts:
It consists of four parts of template Editing :-
- Adding CSS.
- Adding XML.
Adding CSS
- Goto Dashboard > Template > Customise > Advanced > Add CSS
- Paste the following code in the appearing box,
.sharebutton{
padding:10px;
background-color:transparent;
border-radius:5px;
box-shadow:0px 0px 3px rgba(0,0,0,0.3);
border-top:5px solid black;
}
.share, .share:hover{
cursor:pointer;
padding:5px 10px;
box-shadow:0px 0px 3px rgba(0,0,0,0.3);
color:black;
text-decoration:none;
}
.link_share{
width:100%;padding-bottom:3px;border:3px solid transparent;;border-radius:2px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
-goog-ms-transition-duration: 1s;
transition-duration: 1s;
}
.link_share:focus{
border-bottom:3px solid black;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
-goog-ms-transition-duration: 1s;
transition-duration: 1s;
}
- Press Ctrl + F and Find <b:if cond='data:post.hasJumpLink'>
- The code around it will look like,
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if> - Right after that place the below code,<p class='sharebutton'><b>Share this post</b><br/><br/>
<span class='post-icons'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Facebook'><img alt='Add To Facebook' border='0' class='icon-action' height='36' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcnUmMyStCZCr23NNaO0IXSUp154VHzGvv49eXhSKaRyytpxh82iKP_cNxTjcZfl0NZ5ErbdNUk504nkp8zsw8-2mig5MXNe_johDiIxtPZ_HWO07dxZO5_YmLeDrKG5ojkUSQRz-g0dI/s200/facebook.png' width='36'/></a>
<a expr:href='"https://twitter.com/intent/tweet?button_hashtag=howtoblog&text=" + data:post.url' target='_blank' title='Tweet this'><img border='0' class='icon-action' height='36' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8LBiwnW55czl758IX_7vhRa68x58pSby17pKkKRFdsobUQTcgq4ZXQZ1UwbptXf05iDjRwWhQmWOEBNw01eQ3raA9oyqfywMLPNpAW7yY7jbytmDk6aaPW-9V9FCVodI5MBTNV6kdxUQ/s512/Twitter%2520Icon.png' width='36'/></a>
<br/><br/>
<krish style='width:100%;font-weight:bold;font-style:italic;'>Share Link : <input class='link_share' expr:value='data:post.url' onfocus='this.select()' type='text'/></krish>
</span>
<font size='2'>Click <a href='http://howtoblog.krishnainfotron.com/2012/08/social-book-marking-buttons-in-all.html'>here</a> for <b>Social sharing icons V2</b>.</font>
</p><br/>
Hi David,
ReplyDeleteThank you for your comments. This is age old article like you mentioned. I'll write up a new one soon and publish.
Please keep following the blog for it.