Like us on facebook to get more free pro tricks daily...!

Liked us?

Saturday 7 April 2012

Pin It

"Do You Like This Story? Widget


After several trials and errors finally we managed to design a fully equipped blogger widget that contains Facebook Like & Send button,  Email Form (Subscription box) and social media icons. This widget can be found on many wordpress blogs added at the bottom of posts. It catches great attention of the visitor and forces him to like and share your article. That's why we named this gadget as "Do you like this story?" It is a more advance version of the widget I shared few days back which only offered visitors with a subscription option but this one offers a lot more. It will increase your Traffic through Facebook, Increase your subscribers, facebook fans and twitter followers. Indeed a magic box! 
 
Free Recgarge !

do you like this story? blogger widget



Live Demo

Add This Widget to BlogSpot Blogs

I have kept the installation process extremely easy so feel comfortable to try it.
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Check the "Expand Widget Templates" box
  4. Search for,
<data:post.body/>
    5.   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/AVvXsEiVhGkNezVuusrh5fU_hajh96e1BPfCi6iPrz7Av1VAKRhdRoNyD8msw-CTYPv7L8D6Wjo0KPSRrIwLwq0H-3gbRfRtqqNLhZSFPU39Zi3uPrD4YZjPScuwfTggLc3rrbFOF-HT_0FyBtP9/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;
}
.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=7terabyte&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='7terabyte'/>
<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/7terabyte' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_h0irypwoPxjldxyWPzLgbR0ggqGxosJFI4WBsOvMPC3xWSUVoVfAsoa5sw9Ml_FEPYgfwlgXGFnAP7jbL4FAqZQ70QMJuOtenYQoQMENCSSjgQOcsHA9K4XCMQY-ZxhLrbpkcV_LTSM7/s40/w2bRSS+.png'/></a>
<a href='http://twitter.com/7terabyte' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMs27MK6icTNoaN96esfYkXFCyb7Gz58-UeysZNaTEKxCezYTb5bfG-n1dEqO6mQdeGfa-LjdF8jbRdPLVYtmNQer20wRYzg-00exRhWthnGqDgcgV6l4Mo1e768l_QkYnM_iOoSZ3yM0_/s40/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/7terabyte' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8TnyPnUcQlIoMIDls8OMVUYN49F_-l-M76C787UZSPdhnpxYG_ZOA3cZniIsYrFzYT123nXdR2RSZHHg19neeGv0g950QQBpwtOza8cK-hMOcxW1zhMZ6rowlcSuNXR4nb9Ml7OEIcRVQ/s40/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>
Now make these changes,
  • 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=7terabyte 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 7terabyte 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=7terabyte
  • 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
After you have made all the necessary changes simply save your template and you are all done!

Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Reddit Facebook Twitter
Do you Like this Article..?

Get Subscribe to Free Email Updates!!

*Your email address will not be shared with anyone.



Link To This Page:


Link To Home Page:

0 Responses to "Do You Like This Story? Widget

Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder.
2. If you are including a link, Please include it using html tags. However irrelevant links are not tolerated.
3. Please do not spam, Spam comments will be deleted immediately after our review.

Regards,
Rupesh.

 

Total Pageviews

Translate

7TeraByte © 2012. All Rights Reserved | DMCA Protected | Back To Top