Social Media Sharing Widgets For Blogger Blogs ~ tools designer-Step By Step

All Story From Blog

Social Media Sharing Widgets For Blogger Blogs

Add Floating Facebook Like and Retweet Counters To Your We

After accepting explained the accent of amusing arrangement buttons for your blog cartage in adjustment of priority, its now time to add them beneath your blogger posts titles so that readers may acquisition it accessible to like, stumble, +1 acclaim and cheep your posts instantly. This is the aforementioned accoutrement that I am application on this blog. Check the amusing arrangement buttons actualization beneath this column appellation and see how they are arranged.

demo

Step 1.Go to layout > Edit HTML layout-edit-html

Step 2.Click Ctrl and F, and Search for<data:post.body/>and just above it paste the code given below

<b:if cond='data:blog.pageType == "item"'>

<table border='0'>

<tr> <td> <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-via='ecascad' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>

<td> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:20px; width:100px; height:20px;'/> </td>

<td><div style='margin-right:25px;'> <script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + data:post.url'/></div> </td>

<td><div style='margin-right:5px;'> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>

<td>  <div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>

<script type='text/javascript'> var addthis_config = { ui_cobrand: "ecascad", ui_header_color: "#ffffff", ui_header_background: "#0080FF" } </script> </td>

</tr> </table>

</b:if><br/>

Replace ecascad your twitter username.

5. Note: If you have previously added the +1 button then you may skip this step. Now search for </head> and just above it paste the following code,

Since it is weekend so I thought lets play with some CSS again. Facebook Like Button and retweet counter by tweetmeme are the two most widely used social media widgets without which you can’t call a blog a blog. Both these buttons along with Stumble Upon bookmarking button can let your readers circulate/share your tutorials and articles with their interested collegues and friends connected to them via these social networks. With a little HTML spiced with CSS we succeeded in creating a floating widget that will include these three buttons and will stay fixed at the middle lift side of your websites. The widget settings can surely be changed to align it to the right, bottom or left if you wish. You can also add more buttons to it if you wish like DIGG for instance. See a demo first,

demo

Go To Blogger > Design
Select HTML/JavaScript Widget from anywhere (Position doesn’t matter)
Inside it paste the code below,

<div style="display:scroll; position:fixed; top:40%; left:2%; border: 1px dotted #E8E8E8; padding:0px 0px 0px 5px; height:220px; width:53px ">
<table cellpadding="1px" cellspacing="0">
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/>
</td>
</tr>

<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</td>
</tr>

<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="ecatrack">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>

</table>
</div>

4. Simply replace ecatrack with your twitter username.

5. Save your widget and you are Done!

Social Share Widget With Counters For Blogger

The Social networking sites growing traffic is indirectly to webmasters themselves. the more they receive traffic the more visitors we receive when people share you content with friends and colleagues. The widget today consists of Facebook, Twitter, StumbleUpon box counters along with Addthis Counter which makes it a complete package of social media sharing buttons. To Add this widget to your blogspot blogs kindly follow the steps mentioned below.

demo

Go To Blogger > Design > Edit HTML
Backup your template
Check the "Expand Widgets Templates" Box
Search for <data:post.body>
Just above it paste the code below,

<b:if cond='data:blog.pageType == "item"'>

<div align='right'><table border='0' cellpadding='2' cellspacing='0' width='150'><tbody>
<tr>
<td valign='top'> <script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</td>

<td valign='top'> <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></td>
</tr>

<tr>
<td valign='top'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </td>

<td valign='top'>

<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de39fde7c998f6e' type='text/javascript'/>

</td>
</tr>
</tbody></table></div></b:if>

If you wish to align the widget to left then replace right with left
6. Hit Save and you are done! Let me know if you needed any help :>
You will also like these social share widgets,

Add Facebook Like Button, Retweet, Stumble and Digg Counter Buttons To Blogger

Ever expected to add the best social media buttons all at one go? Well today’s Widget is not just a smart one but it will surely increase your blog Traffic tremendously. The widget includes Facebook Like Button which is highly appreciated throughout the blogosphere and our favourite the retweet button, Stumble and Digg Counter Buttons. All these buttons are eye catching so the visitors would love clicking them and thus bringing you more and more traffic by sharing your tutorials with people in their social media networks. You can see these buttons in action just under my post titles. So how do we add them? Here we go –>

Demo Screenshot,

The method is as simply as throwing a peanut in air and swallowing it. =p Simply follow these steps,

Go To Blogger > Design > Edit HTML

Back up your template

Check the Expand Widget Templates box

Then click Ctrl + F and in the browser search box paste this,

data:post.body

5. Just above this code paste the giant code below,

<b:if cond='data:blog.pageType == "item"'>

<tr>

tweetmeme_style = "compact";

</script>

</div></td>

<td>

</td>

(function() {

var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];

s.type = 'text/javascript';

s.async = true;

s.src = 'http://widgets.digg.com/buttons.js';

s1.parentNode.insertBefore(s, s1);

})();

</script>

</div></td>

<td>

</td>

</tr>

</table> </b:if><br/>

6. Save your template and see your blog decorated with some best social media buttons

Social Bookmarking Widget For Blogger – Bookmark and Share homepages!

also released some useful blogger widgets which includes a Bookmarking Widget For your blog’s homepage. This is how this widget looks like.

To add this widget to your blogs, follow these steps,

Go To Blogger > Layout

Click Add a Gadget or Add a Page element

Choose HTML/JavaScript

Inside HTML/JavaScript paste the code below,

<center><tr>
<td valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="222">
<tbody>
<tr>
<td width="28" height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbFsc2z57UBAx5t6gjIF56lxswhz4OjSdVIKBCMSHPYR2jgLfo4plUfXLWfk-oIfdwTFCHeieCEpv69L_aGAZVm_oBTawXuLEpYfRVuZBE8zb1EwncFpVGV1u66hLVsYEuSqiZkOgw-E4/s400/FACEBOOK.png" height="25"/></td>
<td height="30"><a href="http://www.facebook.com/sharer.php?u=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on Facebook</a></td>
</tr>
<tr>
<td height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxkCPlwdwLI-UhyphenhyphenNTrN4EMsON31OgSQIspHQ1KLkkBy5v5bhw2CNAl71rwrkuY8WGmaQwAbf76EA3_zGSh1G0L2t9Bfh_W60yupnrrz4l6r3Lb_3miHupHKcf72AkE3czDWv3U9rHv-Kk/s400/TWITTER.png" height="25"/></td>
<td height="24">
<a href="http://twitthis.com/twit?url=http://YOUR-BLOG-NAME.blogspot.com">Share on Twitter</a></td>

</tr>

<tr>
<td height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcvIzbu6Z6dEKaGS6BZnWRcUx7qorlinx1mBne9X7nSC1I95vYC7aaXbhhL5pQRnHMbTGbLrFWC5Bu5Ci65BJjoqcuviTV45yNabPhZrR5bqZoDuW-SAzTDsJShxb54oWOcKDJRalPXoc/s400/STUMBLE-UPON.png" height="25"/></td>
<td height="30"><a href="http://www.stumbleupon.com/submit?url=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on StumbleUpon</a></td>
</tr>
<tr>
<td height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimg8XdxJLQNqYtTxLnPosuWpcqGBBDokkKcUPMRNzehUjfJLWc1Kgfb1G_BE7Fva9JQrUppXdSOLik66h-pat4BgU9SIjtU4-kgURNW5Cn3-Y8CH3kdhLqSn03RSlMb_UPlnS8T895q_E/s400/DELICIOUS.png" height="25"/></td>
<td height="30"><a href="http://del.icio.us/post?url=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on Delicious </a></td>
</tr>

</tbody>

</table>
</td>
<td valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="222">
<tbody>
<tr>
<td width="28" height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMrnDZFGtDGeQ57j7kLJtSqjCSW4sb8mKb5xPagFY1TELnVrz5pWCjPFZM3DKr3tKnowFJ9WCV9VLbRwrUq4_8-kDfVjoQwxaZ7J38aeiRce4Ov-cHDKyruogxFuyI0uCpjfxWLj_1UuU/s400/DIGG.png" height="25"/></td>
<td height="30"><a href="http://digg.com/submit?phase=2&url=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on Digg </a></td>
</tr>

<tr>
<td height="30"><img border="0" width="22" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEignGNFuygg04FsXYkoC2yoTuRYVBP-A0gol4YMrSW6c_73jA7RvxCj0VjhfaIXDYHDWEg1-hNMGMuvpAwQdZT4U-p-FTniUTrHEXWOsdsz6xeJLn16PzBrtKxRPW2kMCjBhznndd4QNY0/s400/Google-icon.jpg" height="22"/></td>
<td height="30"><a href="http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow" title="Bookmark this blog on Google">Bookmark on Google</a></td>
</tr>
<tr>
<td height="30"><img border="0" alt="Email" width="21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFAfGdz61ke3G7a1j0DeWJo0Vi3MoyIn77UgNiiBimqq6hk1D0ceek9jgSl353TSU1yj9vDJPzXSH4WAmUKF8Fw86t13f8Z3L8O-5qegi88NtILdUE1hR4GwT1AqH2UwkR8UxkCTewxhyphenhyphenW/s400/Email+Orange_128.png" height="22"/></td>
<td height="30"><a href="http://feedburner.google.com/fb/a/mailverifyuri=tntbystc&loc=en_US" target="_blank" rel="nofollow">Receive Email Updates</a>
</td>
</tr>
</tbody>
</table></td></tr></center>

Remember to replace YOUR-BLOG-NAME with your Blog’s good name and the Subscription Link i.e http://feedburner.google.com/fb/a/mailverifyuri=tntbystc&loc=en_US with your own Feedburner subscription link. You can find your subscription link by going to the following location in your feedburner account, Publicize > Email Subscription . Just below Email Subscription page you will find a code as shown below,

http://feedburner.google.com/fb/a/mailverifyuri=tntbystc&loc=en_US
Finally save your widget and preview your blog to see the new change!

Add Social Networking Buttons Below Blogger Posts

So Far we added social networking buttons below posts in different forms and today we have yet another cool design
The social buttons go fade on mouse hover and stick to the bottom of all your posts thus increasing the traffic to your blog. The steps of installing it are really simple.

To add these icons below posts kindly follow these steps,

Go To Blogger > Design > Edit HTML
Backup your template
Click the "Expand Widgets Template" box
Search for this,

]]></b:skin>

and just above it paste the Opacity code below,

/*------------ eca Image Opacity--------------*/

.Fadein img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

border:0;

}

.Fadein:hover img {

filter:alpha(opacity=30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

5. Next search for this code,

<data:post.body/>

and just below it paste the following code,

<b:if cond='data:blog.pageType == "item"'>
<center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;'><b>Thanks For Making This Possible! Kindly Bookmark and Share it.</b></span><br/><br/>
<a class='Fadein' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Pw-khRBGGn6E7dX6taqCYMYkJBso9eRdwIRCiWBfCzApht8gCGX9n08RXPcVG2aIzTo7GbK8w3_OuZL9kZr9x0WRxX3im9lWEYLqCuw6tbGHpg09EojYgW46kho1kpeTEu1G7g9naiQ/s400/TECHNORATI1.png ' width='64px'/></a>

<a class='Fadein' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkjox0GBbuvDhxYRZVvB5pTZLb49CPwxzwqWi4gLOhx4UYlV5e__b4LMYGWc_fjmoHi5jmcTRqKR8PhibvJ1eHR7YyE5bbO2-aPmP_W-bdh3jClu6RmYZAo9VfONnIN1OBPnRfDAHVeqE/s400/DIGG1.png ' width='80px'/></a>

<a class='Fadein' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiKtzKenG0s8fAOsoWO-W0sBW3BS3nXTV9afwc_nMKqU1RGFHqSOLyktiTVPNUZK2WX667vuSoPO4wlj3IkzasB1OSQ14efxZBVr3S1s8Ax88ZpPlTXpWLjp16bhpNgTXfEU9JZBSYGS8/s400/stumble1.png' width='100px'/></a>

<a class='Fadein' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTPMVv9AXY4A-bbjqH8Ht4qL0SbcyJj4CdZ8rf1wwas3Vpmav38R9WsEoB_bGMB8mPEHJ8L939rpgf9YG4jh4ZHZFKjyFuj5VHSzPAVymbK9nD7v_h4qytVkESmAoyF9iNy4KqvonBq2I/s400/REDDIT1.png' width='100px'/></a>

<a class='Fadein' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFngD2xExNNIEzNgWBDnlFAfHLCiNbc7yU_wGPPBHyGlTwpsJeEQ-iBo7aDMAuLL3s-D0HnQN6Koqxq-u2gXkw2-SQioDTY1F0S7h7srv2WO50fuIETQbYAsnNe7CtU5Ig6K_YdE1-aQw/s400/FACEBOOK1.png ' width='80px'/></a>

<a class='Fadein' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDEMAha_hSwA5qHQ15UMFw0t8qPWAzjOELgB6anUW_yPXj7UQu_5U7jFgHoZUU5s1dULg8doLUPzg6k_kZHslQFPK8tZzenD1C19P1MjpRUnQTt62ACrIpO2AzyLQhOQlnbCizEm4GjcU/s400/TWITTER1.png' width='64px'/></a></center>

</b:if>

6. Save your template and you are done!

Visit your blogs to see a beautiful change. :) You may also like these social networking buttons and widgets,

Facebook Social Bookmarking Widget

Go To Blogger > Design > Edit HTML
Back up your template
Check the Expand Widget Templates box
Then click Ctrl + F and in the browser search box paste this,

data:post.body

<b:if cond='data:blog.pageType == "item"'>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</a>

</td>

<td>

</td>

</tr>

</table></b:if>

Simply Replace the blue bolded text with button links shared
save your template and you are done

==============================

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

All Story From Blog