BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
Inspired by Material Design

Awesome Social Sharing Widget for Blogger

9 comments

Awesome Social Sharing Widget for Blogger
Social Sharing Widgets are always been my favorite blogger widgets. Its too important that you have installed any social share widget on your blog as it really helps users to share your content on social network sites and though it helps as building social network backlinks and increases your blog SEO Score.

This widget can be added to your blog post footer and its really awesome widget with all features regarding a social share widget.
There is no question about it that it not only attracts visitors but also makes them to share your content.

I've posted some articles you should check them :
Do you like Awesome Widgets? Then you are at right place, mate ! Today I'm posting an Awesome Share Widget for Blogger, This widget is installed on our blog you can share this post via scrolling down this page. Also you can take a live demo by it.

Whats New in This Widget?

There are several unique functions I've embedded it this widget , they are as follows :
1. Easy Installation.
2. Most Popular Social Network Share Round Buttons [Facebook, Twitter, Digg, Stumble Upon, Reddit, Technorati]
3. Circular Buttons with Variable Size gives massive look to this widget which is important to attract blog readers or users.
4. Highly Customized, doesn't affect blog loading speed.
5. CSS Optimized.
So these are the unique features of this widget.
Do want to take a live demo? just scroll down this page and check this widget.

Awesome Social Sharing Widget for Blogger Demo
As I've said this widget doesn't content any script because it is highly customized and I would like to to tell you its Total Custom Widget, I've worked for some hours to customize this widget, this widget is originally developed by MyBlogger-Tricks.com Thanks to Mohammad.


How To Install This Social Sharing Widget ?

Now Would you like to Install this widget on your blog? Its too easy just follow these steps :
1. Go to Blogger > Dashboard > Template.
2. Click Edit HTML.
3. Then find this code ]]></b:skin> by pressing CTRL+F
4. After finding the code  ]]></b:skin> paste the following code just above it.

/*----Start Social Sharing CSS----*/ 
.fade img { 
filter:Charlieundefinedopacity=100); 
-moz-opacity: 1.0; 
opacity: 1.0; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
} 
.fade:hover img { 
filter:Charlieundefinedopacity=20); 
-moz-opacity: 0.20; 
opacity: 0.20; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
} 
/*----end SocialSharing CSS----*/
5. Now find the code <data:post.body/> by pressing CTRL+F
6. After Finding the code <data:post.body/> paste the following code just below it.
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<center><span style='color: #000000; font-size: 14px; font-family: Trebuchet MS;'><b>If You Enjoyed This Take 5 Second to Share it.</b></span><br/> 
<a class='fade' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Share this on Technorati'><img alt='Technorati' height='64px' src='http://4.bp.blogspot.com/-5c0OKSkj__A/UJ-RBiEJ4_I/AAAAAAAAADw/Kzo4MJEKWss/s1600/technorati1.png ' width='64px'/></a> 

<a class='fade' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Submit to Digg'><img alt='Digg This' height='80px' src='http://2.bp.blogspot.com/-KxZlE7ES3x0/UJ-Qvecm3KI/AAAAAAAAADI/bTroWea_L0g/s1600/Digg1.png ' width='80px'/></a>

<a class='fade' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook'><img alt='Facebook' height='100px' src='http://2.bp.blogspot.com/-lJiA75iOocU/UJ-QyIlNNoI/AAAAAAAAADQ/aXWvnWeHxmE/s1600/Facebook1.png ' width='100px'/></a> 

<a class='fade' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet This !'><img alt='Twitter' height='100px' src='http://3.bp.blogspot.com/-Q61zLdvhfVg/UJ-Q837JL7I/AAAAAAAAADo/RGEsShvCrCc/s1600/Twitter1.png' width='100px'/></a>

<a class='fade' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Reddit'><img alt='Stumble' height='80px' src='http://1.bp.blogspot.com/-z0lRHHzjSgo/UJ-Q1IjNL5I/AAAAAAAAADY/eLwZTw2YE9o/s1600/Reddit1.png' width='80px'/></a> 

<a class='fade' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble upon something good? Share it on StumbleUpon'><img alt='Stumble' height='64px' src='http://3.bp.blogspot.com/-FLbwRBN7BO8/UJ-Q4ML9PUI/AAAAAAAAADg/v9Wh6OX_0pY/s1600/Stumble1.png' width='64px'/></a> 
</center> 
</b:if>
<div style="text-align: right;">
<span style="font-family: Georgia, Times New Roman, serif; font-size: xx-small;"><a href="http://techethix.blogspot.com" target="_blank">Get This<span id="goog_1627905543"></span><span id="goog_1627905544"></span> Widget</a></span></div>
7. Now find this code </body> and paste the following code just above it.
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareEgg'/>
</div>
<a href="http://techethix.blogspot.com/">.</a>
8. Now Hit Save ! Go to Your Blog and check this Awesome Sharing Widget !
Don't forget to Like Us on Facebook and Subscribe Us via Email !
and the best thing you have to do is to SHARE THIS POST :D
If you have any problem just drop your comment below or simply say thanks in comment box.

If you wanna check our newest Social Share Widgets then just hit Social Share Label from the right sidebar ;-)

9 comments :

  1. Its my creation, took couple of hours to code :)

    ReplyDelete
  2. WoW Really Awesome Post Ever Thanks For Sharing I Am Going To Bookmark Your Site & Share With My Friends On Facebook And Twitter Thanks Ones Again
    FULL SOFTWARE FULL GAMES LATEST BEST CRACK KEYS
    computerexpertss.blogspot.com
    WoW Really Awesome Post Ever Thanks For Sharing I Am Going To Bookmark Your Site & Share With My Friends On Facebook And Twitter Thanks Ones Again

    ReplyDelete
    Replies
    1. Subscribe Us for Latest Updates Usman bhai :)

      Delete
  3. Thanks for this men. im gonna us it for my blog at www.itoptricks.blogspot.com

    ReplyDelete
    Replies
    1. You are welcome Christopher Balba Enriquez, stay connected to Us

      Delete
  4. hi rohit,i want to add the buttons like you have added below this post title;for google plus,facebook and tweets only in horizontal straight line.i am using blogspot.Can you help me?

    ReplyDelete
    Replies
    1. I'm going to add a tutorial about what you want, thanks for your responce.
      Stay subscribed ;)

      Delete
  5. WoW Really Awesome Post Ever Thanks For Sharing I Am Going To Bookmark Your Site & Share With My Friends On Facebook And Twitter Thanks Ones Again
    Software For Everyone
    http://top-softwarez.blogspot.com/
    WoW Really Awesome Post Ever Thanks For Sharing I Am Going To Bookmark Your Site & Share With My Friends On Facebook And Twitter Thanks Ones Again

    ReplyDelete
  6. WoW Really Awesome Post Ever Thanks For Sharing I Am Going To Bookmark Your Site & Share With My Friends On Facebook And Twitter Thanks Ones Again

    ReplyDelete

Powered by Blogger.