Menu Close Menu

Add Beautiful Social Sharing to Blogger Blog

Social Icon Set PreviewIn this post I am going to show you great tips on adding beautiful wood style social sharing icon in blogger blog. Special Thanks for these icons Land of Web. and make some change in these icons and add two more icons Reddit and Stumbleupon and make useful in blogger with hover effect. in few days we thinking sharing with you some icons. which all icons is my own creation so I post these as soon as possible. this tip is very easy and just 2 step for adding this tip, you need to add css and html code in your template I am showing video for doing this. if you face any problem with doing this. leave your comment below in comment sections thanks for reading so lets start Tutorial.

Add Beautiful Social Bookmarking Icons

Before Editing Make a Template Backup ( How to make a template backup )
1. Go to your blogger Dashboard>>Template>>Edit Template (do not click on expand widget box)
2. and find these lines..
]]></b:skin>
3. And paste this css code before ]]></b:skin>.
/*----Start BT Social Sharing CSS----*/
.fade img {
filter:Charlie(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.fade:hover img {
filter:Charlie(opacity=20);
-moz-opacity: 0.20;
opacity: 0.20;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
/*----end BT SocialSharing CSS----*/
4. click on save template.
5. and now click on expand widget box which available on top left corner at the blogger template window.
6. and find these lines.
<data:post.body/>
7. and paste this html code after <data:post.body/>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><span style='color: #000000; font-size: 14px; font-family: Trebuchet MS;'><b>If You Enjoyed This Take 5 Second to Share it.</b></span><br/>
<a class='fade' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='64px' src='http://4.bp.blogspot.com/-5c0OKSkj__A/UJ-RBiEJ4_I/AAAAAAAAADw/Kzo4MJEKWss/s1600/technorati1.png ' width='64px'/></a>
<!-------DIGG-------->
<a class='fade' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='80px' src='http://2.bp.blogspot.com/-KxZlE7ES3x0/UJ-Qvecm3KI/AAAAAAAAADI/bTroWea_L0g/s1600/Digg1.png ' width='80px'/></a>

<!------ Twitter ------>
<a class='fade' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='100px' src='http://3.bp.blogspot.com/-Q61zLdvhfVg/UJ-Q837JL7I/AAAAAAAAADo/RGEsShvCrCc/s1600/Twitter1.png' width='100px'/></a>

<!------Facebook------>
<a class='fade' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' height='100px' src='http://2.bp.blogspot.com/-lJiA75iOocU/UJ-QyIlNNoI/AAAAAAAAADQ/aXWvnWeHxmE/s1600/Facebook1.png ' width='100px'/></a>

<!------Reddit------>
<a class='fade' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='80px' src='http://1.bp.blogspot.com/-z0lRHHzjSgo/UJ-Q1IjNL5I/AAAAAAAAADY/eLwZTw2YE9o/s1600/Reddit1.png' width='80px'/></a>

<!------Stumble------>
<a class='fade' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='64px' src='http://3.bp.blogspot.com/-FLbwRBN7BO8/UJ-Q4ML9PUI/AAAAAAAAADg/v9Wh6OX_0pY/s1600/Stumble1.png' width='64px'/></a>
</center>
</b:if>
and now click on save and see result your blog.
Note:- if you want to change text color, font and font size make change in these lines. yellow for text color green for text size and red for font style. and pick color from color code genrator tool.
<span style='color: #000000; font-size: 14px; font-family: Trebuchet MS;'>
if you have any problem leave your comment and question below.

"Be the first to express your thoughts" :

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. This comment has been removed by a blog administrator.

      Delete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  9. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by a blog administrator.

      Delete
    2. This comment has been removed by the author.

      Delete
  10. This comment has been removed by a blog administrator.

    ReplyDelete

Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.