How to add All in one Social Sharing Widget for Blogger Blogs below blog posts


For a blog, Social networking sites are extremely important. It can drive a lot of traffic to your blog. Now you can add this widget to your blog, below every post and increase your traffic a lot. It includes Facebook, Twitter, Technorati, Delicious, Digg and LinkedIn  Sharing buttons with a title "If you enjoyed this article then kindly take 5 seconds to share it" See the example above.  



Steps to add this to your Blog :-


1. Login to Blogger Dashboard
2. Go Design > Edit HTML
3. Click "Expand widget templates"
4. Take a Backup of your template (IMPORTANT)
5. Search for the following code in it 
<data:post.body/>
6. Add the following code below it. If you find more than one occurrences of above code, try the last one or just above it
Widget on <!-- www.bloggingbytes.blogspot.in -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #E0E0E0;width:100%;position:relative;margin-top:13px;'> </div>
<div style='margin-left:auto;margin-right:auto; width:600px;position:relative;'><div style='color:#FF3030;position:relative;top:12px;'><center>If you enjoyed this article then kindly take 5 seconds to share it!!</center></div>

 <table align='center' cellpadding='8' cellspacing='1' id='myshare'>

 <tr>

 <td>

 <a target="_blank" class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2kSfxQkBFcBCOEoJ7iCtznk-gYYXWsQzbADrntj9ST68h049CeYfdlujRnftzqFD7rK1gU3u5b59Y5mmT3JX7V8tS4Y3ST9In264LsW3vbz_8DV59I7wM4r6-xGR-03xx5Hvzznu37Ac/h120/1.PNG'/></a></td>

 <td>

 <a target="_blank" class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLlppdbqKU6TC0qK85JwvvutNU2yu9HUn0tV4Z_FrFPG9-S0ta_m6jbn5jEyzBcM0jlteHmcNTENTjF9znrTP-RRW_pgzEzZGhZyhtgu-hf7NbWY4o4rCPX7Hnmbo3cI9Jg2FV4R0vj6w/h120/6.PNG'/></a></td>

 <td>

 <a target="_blank" class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV2woYE8jgWBVP5ioqz-x_-i5a0L_wycrlwGlmj18fhaBpFyWbC8-VEqGkSBJS2qTfZhSkR5aj2RbKRgtP_BCFriv8u4EL1byVVlCLr7ByOzq4kW1DLx6pnsfCI7s75jpCy7mPuV-wzQ0/h120/5.PNG'/></a></td>

 <td>

 <a target="_blank" class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEEzlpuZjFTWbukALzzG_dk0hupXbdy0Iv5avwBCY9v17UiEWeNZUlsMnWQnnvUqbdxpfB_hEtcSkt8sEZ8p1zKyd2hgNckA3HZOacvOMHxgX3RdJg27-fS9PIKU9Pb7MajASTB7u7JSc/h120/3.PNG'/></a></td>

 <td>

 <a target="_blank" class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg068XKcO-NJQ27Ty_PStj7ugQac7fpWgLjDlOY3rLSjjEL87pQVN4WT9y-WDSUe3g7hFPziytdWuZ1X1XwunWYs2pDdEXw8iFdxXQpaDH6VtWr9wyr9BH2Ag9hnQcSK49oWOqhF-QjXyA/h120/2.PNG'/></a></td>

 <td>

 <a target="_blank" class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3COanvqMdK0DNSycMS4BvRO54hF40ZoDpT4zQ8eow8q-iNofzoLKdR-IpDtyB9SJ07vTny_5PVdBbiASMD4psuIXgR9l8ija3Do-9gm6c71Njgc2bN9RoE9sX6z00oiNvIGfkm-iGjO4/h120/4.PNG'/></a></td>

 <td><a target="_blank" class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2RxKZIq4CSLT3ia3iMqgNVrUUcHptEPokcqaVbmRbA1KOGCwi3gEVSGo28sLs0Hk5C3NN1Lt8PtA0GgRnxDFT1TqZiFSvxp4uij4iCpCuyPg16W2wqvAHtNcb4jnPR7itfVt8D46AHBU/h120/7.PNG'/></a></td>

 </tr>

 </table>

 </div></b:if>
See the Text marked in RED in the above code. It is the text which appear on the blog. You can change it to anything you like. Change @NAME to your twitter username also. DON'T change any other codes or sometimes it may not work.

7. Now search for the following code in the template
]]></b:skin>
8. Here is the style sheet of the widget. Add it to just above the code
#myshare

  {width:100%px;

  height:50px;

  border:0px solid red;

  position:relative;

  }

 #myshare tr td img

  {width:50px;

  height:50px;

  position:relative;

  }

9. And now, save the template and see the result.

If you had any problems on applying these widget to your blog or have any doubts, feel free to share as comments
SHARE

Jayadeep K M

Hi. I'm a hacker, web developer and programmer, Inspired to find loopholes, fix broken things and make things work better.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment