Friday, 19 July 2013

Tagged under: ,

ProBlogger: All in One Social Sharing Buttons widget for Blogger

All in one social sharing widget for blogger
Social sharing widgets play a vital role in blogospher and has become one of the tremendous factor for each blog and websites. You might have seen alot of blogs and websites holdings different styles of social sharing widgets. Likely If you take a tour of my Blog then you will find different types of social sharing gadget on different locations. Each social sharing gadget has its own task to publish posts on different social media websites. You can put your gadgets according to your blog designing and layouts. So if you are a regular PBT reader then you might be aware that in early days we have published so many Blogger Widgets and Plugins they were well appreciated and liked by Newbies bloggers.

So since from the couple of days we have received so many request from our loyal readers, Asking for social sharing widgets. They have voiced to kindly shared PBT below every posts social sharing widgets with us. So in this article we will share with you the PBT All in One Social Sharing Gadgets Using Below Every Posts in Blogger.


All in One Social Sharing widget Below Every Posts For Blogger

This widget is fully customized for blogger blogs which holds all popular social sharing websites plugins. We have included Facebook, Twitter, Google plus, StumbleUpon, Digg, Delicious and Technorati widget.
You can easily grab all these social sharing websites buttons together at one place. This all in one social sharing plugins, will add to blogger below every posts which will help in sharing your article within a seconds.

Why We have Escaped Pinterest Buttons

You might be thinking why pinterest buttons is silent in the gadget. before thinking too much let me tell you are you interested to increase your page loading time. Do you want to compel your blog on loading time by your own hands. The Answers is absolutely No.
No body will give up this habit. Every blogger and webmaster always try to decrease blog loading time and always try to make page loading time faster and faster. So if you have added pinterest button in your posts then your blog page loading time must be increased several times.
Pinterest Button work with JavaScript. If someone wish to add pinterest button into blog then he must be added this button with JavaScript coding otherwise the pinterest button will not work correctly and will be no in use to publish your post on pinterest. So thats why we have eliminated this button from the gadget.

Add All in One Social Sharing Buttons widget below Every post in Blogger.

There is nothing to worry follow the below straight forwards steps to add this gadget into your blog. Before going to add this gadget lets find out its demo how it look liked.

All social sharing buttons widgets for blogger


All social sharing buttons gadgets for blogger

Attention: If any one want to share this widget on his/her blog then do not forget to give credit links back  to PBT. Also  Don't change the credit names (PBT).  Anyone who does not link back then it could be destroyed his Blog post maliciously. If you do so the legal action will be taken against him.




Step 1:

  • Go To Blogger Dashboard:
  • Go to >> Template >> Edit/Html:
  • Find for ]]></b:skin> and past the below css codes above
    ]]></b:skin>


/*-----------------PBT Social Sharing Widget For Blogger---------------*/

ul.social_pbt {
list-style:none;
display:inline-block;
margin:15px 0 0 -20px;
}
ul.social_pbt li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_pbt li a {
display:block;
width:35px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_pbt 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_pbt li.abfacebook {
background-image:url(http://4.bp.blogspot.com/-nJMUyZUi2SM/UaXEnGYtwWI/AAAAAAAAAkM/SXrQ4Q8ASoA/s1600/btrix-facebook-icon.png);
}
ul.social_pbt li.abtwitter {
background-image:url(http://4.bp.blogspot.com/-_18_qzg7sHs/UaXEnVKS3aI/AAAAAAAAAkY/UYLCvEQuOEI/s1600/btrix-twitter-icon.png);
}
ul.social_pbt 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_pbt li.abstumbleupon {
background-image:url(http://1.bp.blogspot.com/-NxzIC4d0ixE/UaXEmytFBoI/AAAAAAAAAkI/jmk72VMrnvA/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_pbt li.abdig {background-image:url(http://4.bp.blogspot.com/-J2vYlohj8qw/UaXEmX-JDMI/AAAAAAAAAj8/QwSrbs1Md8w/s1600/btrix-Digg-icon.png);
}
ul.social_pbt li.ablinkedin {
background-image:url(http://2.bp.blogspot.com/-HaUpL3wjx3I/UaXEmf3UVSI/AAAAAAAAAj4/cHVj0FALvgk/s1600/btrix-Linkedin-icon.png);
}
ul.social_pbt li.abrdit { background-image:url("http://2.bp.blogspot.com/-IoRJ0ANjqqE/UdqIksmNtOI/AAAAAAAAB3Q/obv4nqm8gow/s1600/redit.png"); }

ul.social_pbt li.abdelis { background-image:url("http://2.bp.blogspot.com/-ZG4jtragtu0/UdqGRoOkRZI/AAAAAAAAB3E/ZSqbOzoCjj4/s1600/delecious.png"); }

ul.social_pbt li.abtechno { background-image:url("http://3.bp.blogspot.com/-U31R7OvCoSw/UdqI4-fcMqI/AAAAAAAAB3c/F14zlgYyCZ8/s1600/technorathi.png"); }

#animation_pbt:hover li {
opacity:0.2;
}
#animation_pbt li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_pbt li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_pbt li:hover {
opacity:1;
}
#animation_pbt li:hover a strong {
opacity:1;
top:-10px;
}


#subbutton {
    background: none repeat scroll 0 0 #0089E0;
    border: 1px solid #292929;
    border-radius: 5px 15px 5px 15px;
    color: #FFFFFF;
    font-weight: bold;
    height: 40px;
    margin-top: 15px;
    text-transform: uppercase;
    transition: border-radius 0.5s ease 0s;
}
#subbutton:hover {
    border-radius: 15px 5px 15px 5px;
}
You done Almost step 1:

Step2:

  • Go To Blogger Dashboard:
  • Go to >> Template >> Edit/Html:
  • Now find for <data:post.body/> or <p><data:post.body/></p>  and past the below given code:
  • If you could not find the above tags then look at the below illustrative screenshot.
All in One Social Sharing Gadget
     
All in One Social Sharing Gadget

All in One Social Sharing Gadget


After clicking on the var'post' scroll down slowly you will find one of these codes <data:post.body/> or 
<data:post.body/> and past the below given code.


     <div style='border-bottom: 1px solid #ddd;  border-top: 1px dotted #ddd;  color: #000000;  font-size: 24px; margin: 45px 0px 10px;  padding: 15px 30px'><b>Share This Article with your Friends</b></div>

        <ul class='social_pbt' id='animation_pbt'>
        <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='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>
    <li class='abrdit'>
    <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share this on Reddit'><strong>Reddit</strong></a>
    </li>
    <li class='abdelis'>
    <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share this on del.icio.us'><strong>Delicious</strong></a>
    </li>
    <li class='abtechno'>
    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this on Technorati'><strong>Technorati</strong></a>
    </li>
        </ul>


Now you done Almost Save your Template and refresh the Page.


Related Tutorial



Need Help

Guys this is little tutorial about how could we add all Social sharing combination buttons widget/Gadget below each posts in blogger Blog. We hope that you would find this tutorial helpful for your blog. If you have found any bugs and facing any problem then kindly post your query in comment sections. Thanks and happy Blogging Journey.

34 comments:

  1. Awesome widget dear. Finally, I got it. Thanks a lot.

    ReplyDelete
    Replies
    1. Thanks Yaqoob i think your work has been done by PBT. Anything you need feel free to ask. thanks buddy.

      Delete
  2. Replies
    1. Thanks Fazle bro for your appreciations. Keep visiting us.

      Delete
  3. nice! thank you for the share brother!

    ReplyDelete
    Replies
    1. thanks Saqib Ahmad for liking our efforts..see you buddy soon.

      Delete
  4. very nice widget,i will use on my blog.

    ReplyDelete
  5. it's really Nice sharing for socail Sharing widgets

    ReplyDelete
    Replies
    1. yes bro this is the nice collection of all social sharing button widget

      Delete
  6. Really Cool !
    I Had seen this On your website and i really wanted it !
    You are really great to share such a nice widget .

    Regards ,
    Rizwan - A Lifelong ProBloggerTricks FAN

    ReplyDelete
    Replies
    1. Wow Rizwan what a nice words about us. Its a great pleasure for me to hear this.

      Delete
  7. It's a really good looking social sharing widget hafeez and it is working for me but i am having a problem the social sharing widget is appearing just below the post body as if it's a part of the content.how can i put space between the content and the widget like your blog has ?? please do reply to my query.

    ReplyDelete
    Replies
    1. its very simple just insert 3 or 4 br
      tag above the html coding which show in step2: thats is. feel free to ask.

      Delete
  8. nyc Post Dear Thanks For Share :)

    ReplyDelete
  9. put Banner, I think it will good than

    ReplyDelete
    Replies
    1. where should i put banner...what are you talking about ?

      Delete
  10. Nice Sharing widget look's like juicy thanks for Sharing

    ReplyDelete
    Replies
    1. Thanks buddy its indeed an awesome widget for all blogger users.

      Delete
  11. Nice dear can you give me coding of Islamic animated widget on the header of your blog please

    ReplyDelete
    Replies
    1. Bro we will soon write an article on this gadget just keep in touch with us.

      Delete
  12. Marvelous dear it is such a brilliant widget what a talent. Thanks for sharing. Sir I am going to write article on one of the best helper to blogger beginners. I selected your name in the list of them. Sir I request you to be a part of my struggle and do simple work for me if you can.
    You just write a short story up to 100 words or more on your blog. Story is about Blog beginning with respect to traffic point of view. How many visitors were in first days, after a month that’s it. Sir please kindly do this with in 2 or three days after that send it to
    admin@bloggerbasic.com
    Regards
    www.bloggerbasic.com

    ReplyDelete
    Replies
    1. Thanks Solangi Naeem that you give me this opportunity. I will write as soon as possible...and will send it to you. Thanks for being landed on this awesome post.

      Delete
  13. Bro Really A Nice Widget. Bro One Thing You Told Me I Will Give You Interview Where?? Is That Plz Give Me Bro

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

    ReplyDelete
  15. as salam aalaikum
    It didnt work on my blog either. Brother could you please help? My blog is still under construction. so onve everything done will credit you in shaa Allah :)

    ReplyDelete
  16. That's a great widget man! Great work!

    ReplyDelete
  17. Does this work on custom themes?

    ReplyDelete
  18. Thanks a lot and have a look at my blog tutorialsfist.com ..... I think blog links are not allowed in comments :p but I need your suggestions about it. dude.....

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism