Wednesday, May 29, 2013

Below Post Social Sharing Widget for Blogger

This is a Below Post Social Sharing Widget. In this tutorial im gonna explain, how to add it to end of blogger post. It include nice title  hover effect too. By  using this social sharing widget, you can share your social networks with one click.It means, you can get some visitors to your blog if  someone do sharing. Im using Css3 and HTML, Just check out demo about this Social Sharing Widget .

You may Like these articles

Retro Style Rss Subscription Widget For Blogger
Unique Style V2 Social Sharing Box For Blogger
Peeling Stickers Social Media Widget For Blogger

Social+Sharing+Widget


How to add Social Sharing Widget For blogger


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Find this tag by using Ctrl+F    ]]></b:skin>

5. Paste below code Before ]]></b:skin> tag

ul.social_btrix {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social_btrix li.abfacebook {
background-image:url(http://4.bp.blogspot.com/-nJMUyZUi2SM/UaXEnGYtwWI/AAAAAAAAAkM/SXrQ4Q8ASoA/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(http://4.bp.blogspot.com/-_18_qzg7sHs/UaXEnVKS3aI/AAAAAAAAAkY/UYLCvEQuOEI/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(http://2.bp.blogspot.com/-DpI_6iUH6GY/UaXEnB83lFI/AAAAAAAAAkQ/Q6QtGamgL_E/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(http://2.bp.blogspot.com/-tMeDXWRp5VY/UaXEmVQIGDI/AAAAAAAAAj0/FrLLKtGE8j0/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(http://1.bp.blogspot.com/-NxzIC4d0ixE/UaXEmytFBoI/AAAAAAAAAkI/jmk72VMrnvA/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(http://4.bp.blogspot.com/-J2vYlohj8qw/UaXEmX-JDMI/AAAAAAAAAj8/QwSrbs1Md8w/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(http://2.bp.blogspot.com/-HaUpL3wjx3I/UaXEmf3UVSI/AAAAAAAAAj4/cHVj0FALvgk/s1600/btrix-Linkedin-icon.png);
}
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}

6.
Find this tag by using Ctrl+F    <data:post.body/>

7. Paste below code Before <data:post.body/> tag

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
    <ul class='social_btrix' id='animation_btrix'>
    <li class='abfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='abstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='abdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
    </ul>
</b:if>

8. Now save your template. You are done.
Hope this Social Sharing Widget helps to get more traffic from social networks.

34 comments:

  1. cool thing but you can do it easily..
    Just check it out
    Blogtrixz:http://blogtrixz.blogspot.in

    ReplyDelete
  2. Great tutorial.
    love it ;)

    ReplyDelete
  3. I really like a lot of your tutorials, but I can not get this to work on my Blog. I followed it exactly but just wont work. I love to use this and get rid the sharethis one. http://therecipesofdisney.blogspot.com/ Have any suggestions why not working for me?

    ReplyDelete
    Replies
    1. Hi deanna,
      Did you add my code properly?

      Delete
  4. Replies
    1. Below means, this gadget will show up end of your post.
      hope you understood :)

      Delete
  5. This tutorial does not work at me :(

    ReplyDelete
  6. Hi,

    I have tried using your code. But the widget does not show up.
    Can you please help?
    My website is webchattr.blogspot.in
    I am using elice theme from
    http://www.blogtipsntricks.com/2013/07/elice-responsive-blogger-template.html

    ReplyDelete
    Replies
    1. Code is working fine.Did you follow steps correctly?

      Delete
  7. thanks i will use this in one of my blogs thanks again

    ReplyDelete
  8. i cant find this code in my blog html plz help me out
    after using ctrl+f no results shown i tried it many times but no results found it showed

    ReplyDelete
    Replies
    1. Let me know your blog URL.
      I will give a solution for you.

      Delete
  9. I followed it step by step but it is not showing...

    ReplyDelete
    Replies
    1. It working fine, Let me know your blog address.

      Delete
  10. Is It works only on new post after installation? On my old post it doesn't work..

    http://www.venz-9.tk

    ReplyDelete
  11. I've pasted the code in the appropriate places and it doesn't seem to be working.

    babyblackwidows.blogspot.com

    ReplyDelete
    Replies
    1. It works fine Tyler.
      Do you need any help?

      Delete
  12. This is awesome!
    I wonder if you might give me a hand adding a piece to it. I'm wanting to add an icon that shows the comment number over it, and when clicked, takes them to the comments section, but I can't figure out how to get the coding right. Any suggestions?

    ReplyDelete
    Replies
    1. Hi Matthew,
      I can give a suggestion for you, let me know your blog URL please..

      Delete
  13. Hey sohan awesome tutorial but this code dosent work for me, after trying 2 time the same process also it doesent showing whats wrong, i spent so much time, also try another one too and expirience is again same, my url http://pinterestprofitideas.blogspot.in

    please let me know what is the issue?
    thanks

    ReplyDelete
  14. There's more than 5 tag in my template. Which one should i use?

    ReplyDelete
    Replies
    1. I cant tell it without looking at your template, if you send it to me, i can help.
      thank you.

      Delete
    2. I cant tell it without looking your template. if you send it to me, i can do it for you.
      thanks you.

      Delete
  15. Hello admin, i love these buttons to add on my www.apktub.com but, can you explain some more how to add these in blogger.

    ReplyDelete
  16. Pinterest window is opening as blank screen.
    Please check and correct.

    ReplyDelete
  17. i followed steps but it didnt work www.theteamryno.com

    ReplyDelete