'Do You Like This Story?' - Beautiful Blogger Widget to Increase Your Traffic!

'Do You Like This Story?' - The best and beautiful widget for blogger. After making huge errors and several trials finally we managed to sketch a fully equipped blogger widget that contains Facebook Page Like, Feed subscription box, Twitter and Pinterest follow button and other social media icons. This type widget catches great attention of the visitor's and forces them to like and share your articles with there friends. This will increase your Traffic and also Increase your Email subscribers, facebook fans, twitter and Pinterest followers.

'Do You Like This Story?' - Beautiful Blogger Widget


How to Add This To Blogger - 6 Easy Steps to Follow
  1. Go to Blogger and Template
  2. Backup your template and Save it into your machine
  3. Click Edit HTML
  4. Check the Expand Widget Templates Check box
  5. Search for the code: <data:post.body/>
  6. Just below, Paste the following code: 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
form.feedburner {
margin: 20px 0 0;
display: block;
clear: both;
}
.Techsemostyle {
background: url(http://3.bp.blogspot.com/-lyUVA60SkUc/UFhmKT7B3PI/AAAAAAAADoI/vVJKFSTz6D0/s1600/Techsemo-email-icon.png) no-repeat scroll 4px center transparent;
padding: 7px 15px 7px 35px;
color: #666;
font-weight: bold;
text-decoration: none;
border: 1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.Techsemosubmit {
color: #666;
font-weight: bold;
text-decoration: none;
padding: 6px 15px;
border: 1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;
#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#Techsemo-widget {
width: 545px;
padding: 10px 20px 5px 0px;
margin:15px 10px -15px 3px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);
-moz-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);
box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);
-webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D;
}
#Techsemo-widget:hover {
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#Techsemo-widget td {
padding: 3px 0;
}
</style>
<center><br/><div id='Techsemo-widget' style='width: 545px;padding: 10px 20px 5px 0px;margin:15px 10px -15px 3px;-webkit-border-radius: 10px 10px 10px 10px;border-radius: 10px;border: 1px solid #D3D3D3;-webkit-transition: all 0.3s ease-out;'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>
<center><span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana; color:#FF6894;'>Do you Like this story...?</span></center>
<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px;font-family:salsa;'>
Get free email updates daily!
</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=techsemo&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='techsemo'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='Techsemostyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...;;}' onfocus='if (this.value == &quot;Enter your email...;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input alt='' class='Techsemosubmit' title='' type='submit' value='Submit'/>
</form>
</td>
<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px;font-family: salsa; '>
Follow us!
</p>
<a href='http://www.facebook.com/techsemo' rel='nofollow' target='_blank' title='Follow us on Facebook'><img alt='Facebook widget' src='http://4.bp.blogspot.com/-gTst-jORixk/UEJSAvM-DSI/AAAAAAAADUg/5KPCCMbnplk/s1600/Techsemo_Facebook.png'/></a>
<a href='http://twitter.com/Techsemo' rel='nofollow' target='_blank' title='Follow us on Twitter'><img alt='Twitter widget' src='http://3.bp.blogspot.com/-jiVqvkdIPzU/UEJSFaewQKI/AAAAAAAADVA/q5UbvpyA4JM/s1600/Techsemo_Twitter.png'/></a>
<a href='https://plus.google.com/101743064150238728712/' rel='nofollow' target='_blank' title='Follow us on Google+'><img alt='Google+ widget' src='http://2.bp.blogspot.com/-Y2e_JnBPrHY/UEJSBlbko3I/AAAAAAAADUo/gkPC5kMf7gY/s1600/Techsemo_Google+.png'/></a>
<a href='http://www.linkedin.com/groups/TechSemo-4536523' rel='nofollow' target='_blank' title='Follow us on Linkedin'><img alt='Linkedin widget' src='http://1.bp.blogspot.com/-u4CKDNEUHXs/UEJSC2VQI6I/AAAAAAAADUw/mjeJruxvuFg/s1600/Techsemo_Linkedin.png'/></a>
<a href='http://www.pinterest.com/techsemo' rel='nofollow' target='_blank' title='Follow us on Pinterest'><img alt='Pinterest widget' src='http://2.bp.blogspot.com/-bGPLYQBRHNg/UEJR-ZnRzcI/AAAAAAAADUQ/TunyEGq_qmc/s1600/Techsemo-Pinterest.png'/></a>
<a href='http://techsemo.stumbleupon.com/' rel='nofollow' target='_blank' title='Follow us on Stumbleupon'><img alt='Stumbleupon widget' src='http://2.bp.blogspot.com/-effreJfOG8E/UEJR_ekF9SI/AAAAAAAADUY/TShvs4LB4zk/s1600/Techsemo-Stumbleupon.png'/></a>
</td>
</tr>
</tbody>
</table>
<div align='right'>
<span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.techsemo.com/search/label/Widget' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[widgets]</font></a></span>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechsemo&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=65' style='border:none; overflow:hidden; width:450px; height:65px;'>
</iframe>
<div><tr>
<a class='twitter-follow-button' href='http://twitter.com/techsemo' rel='nofollow'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></tr>
<tr><a href='http://www.pinterest.com/techsemo/'><img alt='Follow us on Pinterest' height='28' src='http://2.bp.blogspot.com/-xv_w2p0teck/UFyrcc-M4LI/AAAAAAAADsM/VT5C0Rt0StQ/s1600/follow-us-on-pinterest-button.png' width='169'/></a></tr>
</div>
</div>
</div>
</center>
</b:if>
Now Change All Blue Colored Text With the Help of Instructions Below:
  • To change the color of the "Do you like this story...?" text then simply search for color code #FF6894 and replace with a hexadecimal color of your choice.
  • Now replace http://feedburner.google.com/fb/a/mailverify?uri=techsemo with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
  • Replace the http://www.facebook.com/techsemo with your Facebook Like Page link
  • Replace the http://twitter.com/Techsemo with your twitter link on both social icon and follow button
  • Replace the https://plus.google.com/101743064150238728712/ with your Google Plus link
  • Replace the http://www.linkedin.com/groups/TechSemo-4536523 with your Linkedin Group link
  • Replace the http://www.pinterest.com/techsemo with your Pinterest link on both social icon and follow button
  • Replace the http://techsemo.stumbleupon.com/ with your Stumbleupon link
After you have made all the necessary changes simply save your template and Click Preview button to check and you are all done!

Important: Please take a backup before every changes of your template. Because the backup could recover your template from any error while editing or adding widgets.

This Widget for Blogger would display on post pages only and it wont display on homepage. You can surely ask for our help which would be no less than a pleasure. Please ask us any query you may have in the comment section below.
TechSemo recommended for you...
 
 
Copyright © 2011 - 2017. TechSemo - All Rights Reserved.
Techsemo Facebook Techsemo Google Plus Techsemo Twitter Techsemo Stumbleupon Techsemo Linkedin Techsemo Pinterest Techsemo RSS