Thursday, 14 June 2012

"Do You Like This Story?" Widget For Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

Attract your viewers with "Do You Like This Story..?" widget ......this widget is used by  so many famous website and blogs and i found this widget on MBT and all credit of this post/code goes to them.....

  • Go To Blogger > Template > Edit HTML
  • Backup your template
  • Check the "Expand Widget Templates" box
  • Search for, <data:post.body/>
  • Just below it paste the following code,
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTBvPzfyqkwVBhh1oyzVe8GHHLR1B6rdy5d1xBlcB0ys9jLTCqFJAkCye1h8jfVYaksWwujcIn54MLVKZkY1uo5vfAOiBp3zfQPnY3mjHuUEcHNNxlA0050787rYoK7xBjAEQx8j8AO0/s1600/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;
}
.mbtbutton{
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=WWEFAnsNation&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='WWEFansNation'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' 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='mbtbutton' 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/WWEFansNation' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNyopHqj3HMOowxBUJWuE8V4NPDbBPpPAaRl63OybCKOvcboPFtgEt0xFfo6J7EGgRvOchyqOsSyXCY4IubHGddtwochhxOMu_EwbzRVL1wYNQDGGJgj2B1fEt_PK9V5kK1phJOreLv_g/s1600/w2bRSS+.png'/></a>
<a href='http://twitter.com/hardeepasrani' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Jxg89L3_dGDEUHo4VgJgnaxganw6Nt_LJoNBJJljh0-VbODiV9cUt0ZTmVQPFmtr9V2ZgAjb6ec4ka9zvyhGRv-cIg4aKTCOeb9cSNeGJNNx-PXxPIgF8L8m-UQtoVyQVVQaug4YaKY/s1600/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/WWEFansNationPage' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWEUpWdrup6ZcnkfgAsyKOXgL7GSZnNEZ5b3VrVo_mMS1oHjkop1kp5LiKVSmFm1nqOUbyTlJCtQ6h_kmCi2bJ_kZ9rHqnZrWnbt2x_vaceAxiEwntImPKIadI9XtJpoM0u8Nh_peoJ8s/s1600/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if> 
  • To change the colour of the "Do you like this story..?" text then simply change #FF683F  with a hexadecimal color of your choice.
  • Now replace http://feedburner.google.com/fb/a/mailverify?uri=WWEFansNation 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 tntbystc with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=WWEFansNation
  • Replace orange link with your Feedburner link
  • Replace the blue link with your twitter link
  • Replace the purple link with your Facebook Like Page link
Credits : MTB

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
 
Powered by Blogger.