Awesome Social sharing widget for blog posts

Unknown | 01:29 |

Pin It Now!

We have alredy given social sharing widget for blog post in one of our previous posts and it helped you to increase your blogg traffic   but here we are giving you a new social sharing widget with more buttons this widget includes Twitter , Facebook , Stumbleupon , Digg ,  Reddit , Google , Delicious , Mixx , Technorati , Yahoo!Buzz , Myspace and sahre this buttons,You can also customize it's positon,you can put it below your post title or at the end of your post,
it's up to you where you want to place this widget
STEP 1
1.Go to your blogger dashboard
2.Now go to Templet>Edit HTML
3.Backup your Templet before making any changes to CSS code
4.Click on the box at Top left corner that says "Expand Widget Templets"
5.Now press Ctrl+F and find <data:post.body/>(if it appears more then once you will go with the first one in CSS code)
6.Copy the code below and paste it above <data:post.body/> if you want this widget below post title OR If you want this widget at the end of your post paste below given code below <data:post.body/>



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='share-w2bz'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='reddit' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
<li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='mixx' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
<li><a class='technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
<li><a class='yahoobuzz' expr:href='&quot;http://buzz.yahoo.com/submit/?url=&quot;+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li>
<li><a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if>


You are half done now....................(Don't close the CSS templet)


STEP 2
1.Now again press Ctrl+F and find ]]></b:skin>
2.Now paste the below given code befor ]]></b:skin>&save your templet
#share-w2bz ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#share-w2bz ul li {display: inline;background:none;margin:0;padding:0;}
#share-w2bz ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3INzSVxb03WfZRb_LuNDwITVy6e7ok57UpyAWvMFlq_lGMjmQ0jvN2JbAeHZbD_cuVspdSwl-ml9oNOzHzAZ6Kqh0XOzFPwPQ879WgL3g35HsxdJlBIm6leh5xhYyq4mHFCbllLskcSW0/s1600/way2blogging-share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#share-w2bz ul li a.twitter    {background-position: -0px -0px;   }
#share-w2bz ul li a.twitter:hover {background-position: -0px -33px;  }
#share-w2bz ul li a.facebook   {background-position: -32px -0px;  }
#share-w2bz ul li a.facebook:hover {background-position: -32px -33px; }
#share-w2bz ul li a.stumbleupon  {background-position: -64px -0px;  }
#share-w2bz ul li a.stumbleupon:hover{background-position: -64px -33px; }
#share-w2bz ul li a.digg    {background-position: -192px -0px; }
#share-w2bz ul li a.digg:hover  {background-position: -192px -33px;}
#share-w2bz ul li a.reddit   {background-position: -160px -0px; }
#share-w2bz ul li a.reddit:hover  {background-position: -160px -33px;}
#share-w2bz ul li a.google   {background-position: -128px -0px; }
#share-w2bz ul li a.google:hover  {background-position: -128px -33px;}
#share-w2bz ul li a.del-icio-us  {background-position: -480px -0px; }
#share-w2bz ul li a.del-icio-us:hover{background-position: -480px -33px;}
#share-w2bz ul li a.mixx    {background-position: -96px -0px;  }
#share-w2bz ul li a.mixx:hover  {background-position: -96px -33px; }
#share-w2bz ul li a.technorati  {background-position: -416px -0px; }
#share-w2bz ul li a.technorati:hover {background-position: -416px -33px;}
#share-w2bz ul li a.linkin   {background-position: -256px -0px; }
#share-w2bz ul li a.linkin:hover  {background-position: -256px -33px;}
#share-w2bz ul li a.yahoobuzz  {background-position: -448px -0px; }
#share-w2bz ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#share-w2bz ul li a.myspace   {background-position: -512px -0px; }
#share-w2bz ul li a.myspace:hover {background-position: -512px -33px;}
#share-w2bz ul li a.more    {background-position: -576px -0px; }
#share-w2bz ul li a.more:hover  {background-position: -576px -33px;}


Enjoy..................................

For getting the latest blogging action subscribe to our rss feed


Pin It Now!

No comments:

Blogger Tricks And TipsComment here