Chira Sathi

Facebook Social Bookmarking Widget

I hope most of you have downloaded the free Social Media Buttons which are designed just how Facebook Buttons are designed. In today's tutorial we will learn how you can add those buttons to your blogger blogs. The steps are similar to the earlier Social Bookmarking widget that we shared.
Live Demo

Steps To Be Followed

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. Now Just above this code paste the code below,

<b:if cond='data:blog.pageType == "item"'>
<table border='0'>
<tr>
<td>

<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='StumbleUpon Button Link'/></a>
</td>
<td>

<a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' src='Twitter Button Link '/></a>
</td>
<td>

<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' src='DIGG Button Link '/></a>
</td>
<td>

<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' src='EMAIL Button Link'/>
</a>
</td>
<td>

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

6. Simply Replace the blue bolded text with button links I shared in last post on Facebook Buttons. Finally save your template and you are done! :>

Add Social Media Share Widget To Blogger - Mouse Hover Effect

Presenting yet another beautiful social media connect widget that lets your visitors to search your blog, subscribe to your RSS Feeds, follow you on twitter, follow you on Facebook and share your blog with over 351+ Social Media Networks! This widget is an extracted code from a wordpress template provided by Pbloggertemplates. I have further edited the widget to make it a perfect social share tool. Please see the demo below,
Live Demo

Adding The Social Connect Widget To BlogSpot

Go To Blogger > Design > Edit HTML
Backup your template
Search for ]]></b:skin> and paste the following code just above it,

/* -------------MBT SOCIAL SHARE WIDGET-------------------- */
#search{width:350px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOpXFduGWMO-OeZF4RIicWl4xZoOxgyiPxlCkQeBqImdbMBzGBtWxivdKLkNEMKTS93rdZO-8PbIr1fr54eLtEg8jhxFOavC1tZa7beERa742KMIH9r6Nv_tn7SUCYue8hjA9qOhMLEUs/s1600/search-bg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden}
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:10px}

.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#F5F4EF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}

To Change width of search box edit width:350px
To change width of search input area edit width:80%

4. Then Search for,

<div id='sidebar-wrapper'>

PS: In this part most of you will face problems as the coding for each template differ. If you could not find this code then do not panic and simply post your Blog URL in the comments.
5. Now Paste the following code just below it,

<div class='topsearch'>
<div class='clerfix' id='search'>
    <form action='/search' id='searchform' method='get'>
        <input id='s' name='q' onblur='if (this.value == "") {this.value = "Search here...";}' onfocus='if (this.value == "Search here...") {this.value = ""}' type='text' value='Search here...'/>
        <input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJrt6Y6yrZiZkn-07KehNuUw7njhmkCo8GnyYMKvkMAillU_weELFzffddrD6zEuKwqjm0UcSlzjWq-H8_QHU5xE2CtvCwzaqrToCaIgYRqivEyHQZQsPMSZCNZvaLOLnLaEshsjf99HI/s1600/search.png' title='Search' type='image'/>
    </form>
</div>
</div>
<div style='clear:both;'/>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNO-D2xbUieMgcFqc1ekYzOu8XD8uyerAxGd12SDcgxr-CHcZfCezscF983UnTIYx4U6oFLhgICJXM2s0Au6u1hmgCwTdpXCMuJI6hMrGvjbui4KCXvM_RQZZaaT2g7gvP3Clkz1-n1iHA/s1600/social-connect-rss.png' title='RSS Feed'/></a><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Subscribe to our RSS Feeds!</a>
</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeHzn1_sWZXsJrJBkGuVPBqaY3odiTIboYDiHHJ-YVqSea8TUpVBU3LTBDC3pWCnt5WYqYmcwuffsfPJqZMJPF79KQIDMEXV9ddppkgzXwmZ_iVx3dznYMjY0AirBhFOi5XtVDHfWv8TfR/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP7TyaK5ndN7GLYtwFnhAv1esG-dfRTBEAZv5X1n1coBRaYowN3AcT2eXWucJRxL7DunNTQnNMfuoZemvoeOfwZVvtEziVeKVTmd0YPPL7B0RPMzCBO24gG0QybZjPcJHYWmoO6FqeW2ZB/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
</div>
<div style='clear:both;'/>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Tb7HE5P08ekRW44sQfe4RvOyvjTuDhw9WCydVuaMlRXSQT7btO_8UKwofFRFyEWN5t12harql_35AhIhOv-w3o9Eyx6RUGICzzwNhvNHlHdv7lQaRj2ne8FSjlKX7tQUEl2Fw01EfwU/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvnP9HAtWvKC2y-MbgxEMv8BN1j6qtGcmu9BGU-NpOujaSW06LQlokJvXsQ5C0l10f9EKAT6m8eY9CYNOz0zR1fOl8JW8GywNWLVHnKCqzc3aUM84ndboM4ML_bUhSjDOOyyg3gJg7LI/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MkeETVHvgDXPjMd4SFHCU9E92s7FxY4lrycyMMyXiO4-1oQnrt_vmxGRKFFwBn6HjbiWJUTrnd3j1o497xC6WlphSsDBYEq_XaZqVtUiE30u_jg3H89TY0OIjyi2A7zX6r_B6JKApOo/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ARKCZadDQBSPVMzcAa5JaPWg4YsTA0gfGHqIANFeO_VvYqTM3rGopLwWQPdMGt2ZaFgtzfSARWnnYsBeS8G2MqgsrsV28SltglO2wkwZuLL9Xlmtvs3E19xzcGkNK_K6wODmiLzkYew/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf28P8VOu8-v8CC-f5Fh1xr9UG-U3bt6o3AavVg6Wmq0_9xprEGSMtl5NQjZS2co6tHTr3GzikZP3uqjac4dgneXrouYZbBw9kWtxLeuWMCWvCgijP0sEvGUSZeJtXNKmpmK3K9iR2xSo/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmpSVfSRw75KKhp6TcQnOThplcfXNK2LpWxd7DqKN0lP_cChROQ4GRH5cXwI2wO2HuYZi6xa8xeKKZGDveevI4AOXyyz79Ofojx4zzcKGf1H6_an-52xw1MczEEt9JdE3E6c-a0hdn5s/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc1HIASz2phY3dfLzYSacZWWZuDqOpUjVdjSQitZjar57xehljWZu3q3LBhfrF0DUJ0etCuiLjcNzfAucYMMEvlRYYFIrgeIMaZp-wZ1hF7btoxw4IeVRmDGHluFdi9ogzmeWHL6FEyQQ/s1600/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
<div style='clear:both;'/>

Make these changes:

Replace http://twitter.com/USERNAME with your twitter profile link
Replace http://facebook.com/USERNAME with your Facebook Profile link

6. Save your template and Bingo you are done! :>
Visit your blogs to see a beautiful new change. Hope you liked it. Questions are always welcomed.

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.
Live Demo

Add Social Share Widget To Blogger

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 :>

Wednesday, September 28, 2011