Do You Like This Story Widget For Blogger

After sharing many widgets/gadgets today I am going to share an awesome widget/gadget which is nowadays very popular. Do you like this story is a beautiful widget for blogger. It is very helpful to increase your number of subscribers. You can put it at the end of every post. It contains subscription form with twitter and facebook links. It catches the attention of your visitors. Hope all of you like this.


How To Add Do You Like This Story Widget To Blogger?

1. Go to Blogger Dashboard > Template > Edit Html.
2. Check Expand Widgets Box.
3. Search/Find (Ctrl + F) For <data:post.body/> tag
4. Paste below code after/below <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style> 
form.emailform{ 
margin:20px 0 0; 
display:block; 
clear:both; 
} 
.b2wtext{ 
background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpcxBMlWN-ko024v_KkhTl7zSXwpkz-POwytPFmvCCRd9EC4rwich5CXJkikegahc6iv4M-qhasTaAEuRzbm8BvnjMG7Ehu4NyL7s2HdwkFUdnCKNi3qDqocS-uY05QhAtWuGFGIc-En7H/s28/w2b-mail.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; 
} 
.b2wbutton{ 
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%); 
}
#doulike-outer { 
-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; 
padding: 8px; 
-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; 
width:480px; 
} 
#doulike-outer: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; 
} 
#doulike-outer td{ 
padding:3px 0; 
} 
</style>
<div id='doulike-outer'> 
<div id='doulike'> 
<table width='100%'> 
<tbody> 
<span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana; color:#FF683F;'>Do you Like this Story..?</span> 
<tr> 
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>
</td>
</tr>
<tr>
<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p> 
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=beautifulbloggerwidgets&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='beautifulbloggerwidgets'/> 
<input name='loc' type='hidden' value='en_US'/> 
<input class='b2wtext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input alt='' class='b2wbutton' title='' type='submit' value='Submit'/> 
</form> 
</td>

<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Follow us!</p> 
<a href='http://feeds.feedburner.com/beautifulbloggerwidgets' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeZxW6R_XeDgVkpYqoXWHJSGdh9_aVNW8eTwHM0FAsjFTNR3CaXfz8OrWLSWubcc0X2_glsXCZXfgqEitGzVcEkZSHjWvpjmyt7mHyURWdNdIrtrZbF07LtaawzYUKawqP3VoDNNeuxdkz/s40/w2bRSS .png'/></a>
<a href='http://twitter.com/twtusername' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjagN1ogCPet-KBHu9t-gDRFp7qCDcF38Hbo0JFnYSQ8TDEGH6c2wOPm4mac0AggDJJcDozrxnfjYhbqh7TIBf3oUww-0r4lv912l98b-MhzJ_o0451YXZ9one3bc4HWAZ9ag-Ghb2wb1ts/s40/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/fbusername' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXaaerqUleHNBKb_YCJSnO0ydxdfSIEAvh7XSbSg2TIoqCpiaCrl1l_at9tD7b5451UTQE5TYc0j942ihWqf2kpxye_Jr2wblriAf3xNV6dZOmM2vjMcEi4bbbagO-4zmOZ9JvpTmxEGH-/s40/w2bFaceBook.png'/></a> 
</td>
</tr>
</tbody></table></div></div>
<p style="display:none;">Do you Like This Story Widget For Blogger by <a href="http://beautifulbloggerwidgets.blogspot.com/">Beautiful Blogger Widgets</a></p>
</b:if> 

Note:

• To change the colour of the "Do you like this story..?" text then simply change#FF683F with a color of your choice.
• Replace beautifulbloggerwidgets with your Feedburner username.
• Replace fbusername with your Facebook username.
• Replace twtusername with your Twitter username.

5. Save your template.

Visit any of your post to see it being displayed just perfectly. This gadget is compatible with all major browsers. I hope you find it helpful.

Happy Blogging =)

Blogger Tutorials, Blogger Widgets