Tuesday, June 04, 2013

Social Sharing Widget for Blogger Post

This Post is about How to Add Social Sharing Widget in Blogger Post. In this tutorial I am gonna explain, how to add it to begin or end of blogger post. By using this widget, you can share your social networks with  one click. It means, you can get some visitors to your blog if someone do sharing.So you can easily share your content within the social sites and increase your traffic to your blog. I am using HTML and Some JavaScript.
This is also widget like you have see the other social widget in older post.


Demo


I try it for a long time but in every time I have the long editing in template but it is simple code which gives the Amazing Social Widget to Post.Widget as shown in picture.




Social Widget


STEPS:

  • Log in to your blogger account and goto to "Template" link which you will find on your site dashboard sidebar.
  • After that Click On "Edit HTML" Button.
  • Find this tag by using CTRL+F   <data:post.body/>
  • Paste Below code before <data:post.body/> tag.
  • <!-- Start of Social Widget by http://blogtrixz.blogspot.in/ -->
    
    <center>
    <b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <table border='0'> 
    <tr> 
    <td><a class='twitter-follow-button' data-show-count='false' href='https://twitter.com/dhavalkuku'>Follow @dhavalkuku</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script></td>
      <td><div style='padding-top:6px; padding-left:10px;'> 
    <script type='text/javascript'> 
    tweetmeme_style = &quot;compact&quot;; 
    </script> 
    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/> 
    </div></td>
    <td> 
    <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/> 
    </td>
    <td><div style='margin-left:35px;'> 
    <script type='text/javascript'> 
    (function() { 
    var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0]; 
    s.type = &#39;text/javascript&#39;; 
    s.async = true; 
    s.src = &#39;http://widgets.digg.com/buttons.js&#39;; 
    s1.parentNode.insertBefore(s, s1); 
    })(); 
    </script> 
    <a class='DiggThisButton DiggMedium'/> 
    </div></td>
      <td> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FBlogtrixz&amp;send=false&amp;layout=box_count&amp;width=50&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90&amp;appId=159872777520139' style='border:none; overflow:hidden; width:50px; height:90px; padding:40px 0 0 70px;'/>
    </td> 
    </tr> 
    </table> </b:if>
    </center>
    <!-- Ending of Social Widget by http://blogtrixz.blogspot.in -->


  • After creating the significant changes save the Template and You are done.

Now you can see that Social Widget is appear after the Every Post of your Blog..
You can also Add This widget After the Post by adding the same code after the tag.Any problem related to this post then please give the query.

2 comments:

Anonymous said...

Keep on writing, great job!

Stop by my blog :: 1voyante.org

Anonymous said...

I was curious if you ever considered changing the
page layout of your website? Its very well written; I love what youve
got to say. But maybe you could a little more in the way
of content so people could connect with it better.
Youve got an awful lot of text for only having one or two images.
Maybe you could space it out better?

Here is my web site - zoophilie chien

Post a Comment

 
;

Get Latest News realted to Technology Amazing Technology |