October 15, 2011

"Do You Like This Story?" - Best Blogger Widget!


do you like this story? blogger 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!


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(http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/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=tntbystc&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='tntbystc'/>
<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/TntByStc' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaXDrh48I/AAAAAAAAAVM/zLmcNtCgi9Y/s40/w2bRSS+.png'/></a>

<a href='http://twitter.com/mybloggertricks' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaUf7v0CI/AAAAAAAAAU8/7vfe8Iw3ohc/s40/w2bTwitter.png'/></a>

<a href='http://www.facebook.com/pages/My-Blogger-Tricks/147104632016744' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://1.bp.blogspot.com/_nDNgmK8FIyI/TUJaWNBkZnI/AAAAAAAAAVE/nZ0byXaqur8/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=tntbystc 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=tntbystc
  • 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!

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. I am busy with exam preparation these days so pardon me for late replies. Peace brothers! :)





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

105 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Awesomeeeeeeeeeeee ........ Mind Blowing ........ The Best One Really .....

    ReplyDelete
  2. Woww Muhammad Bhai ;) WellDone ;)


    Thanks
    -yAHyA

    ReplyDelete
  3. I want this widget aligned centrally ?

    ReplyDelete
  4. Thanks For Sharing :)
    Like To Add This Box In My Template :)

    Latest Tips and Tricks | Blogger Tricks

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Awesome....... Thanks Mustafa Check it on my website http://www.accountancystudents.net/

    ReplyDelete
  7. WTF... I recently added the cool subscription box to my Computer tips and tricks blog that you've share.. yet there's another one, but its cooler.. Thumbs Up to you Mustafa!!

    ReplyDelete
  8. Not working for my blog www.mynameis.in

    ReplyDelete
  9. @Haider

    Gives me great pleasure that you liked it pal. :)

    @yahya
    My pleasure buddy. :>
    To align it in center please replace <div id='doulike-outer'>
    with this <center><div id='doulike-outer'>

    and Replace this </tbody></table></div></div> with this </tbody></table></div></div></center>

    Hope this helps.


    @osho
    Sure you must do it now! :p

    @rommel
    New is always better buddy. :) and please avoid those abbreviations.

    @salaria
    Did you seriously tried salaria?

    ReplyDelete
  10. MBT GReat Tutor for blogger,,, I Like...
    keep Post Mohammad,,,
    I m From Indonesia,,, and be a loyal Visitor 4 MBT :)

    ReplyDelete
  11. Thnx Mustafa bhai for remembering me and my name :)

    ReplyDelete
  12. Oh.. Sorry about the abbreviation mate! :)

    ReplyDelete
  13. What a great job ... Really i like it so much ..
    Social Media Expert
    Waiting for your next edition

    ReplyDelete
  14. Great Work Man ...I Like that So much.thanks for update

    ReplyDelete
  15. This is too beautiful for words. Thanks, Mohammad!

    Can you tell me how to increase the box width? Right now the facebook flag is put underneath the feedburner one because the box is slightly too small.

    Thanks!

    ReplyDelete
  16. Nevermind, I found it under #doulike-outer. I changed the width there, set the box to center and now it fits right in!

    Is there a way to create a few pixels of buffer space between the end of the post and the box? Right now the last word of the post ends right at the box border.

    Thanks!

    ReplyDelete
  17. Okay, nevermind x2. Sorry for all the comments!

    To add a space between the end of the posts and the box, I just edited the #doulike-outer by adding in the following line right underneath padding.:

    margin: 50px;

    Thanks again for the great info!

    ReplyDelete
  18. @john

    Thats perfect but margin: 50px; will set margins at all four corner since your need a gap just at the top therefore kindly use this,

    margin-top: 50px;

    Decrease 50px if it is too much. Always welcomed. :)

    ReplyDelete
  19. Hi thank you for sharing this. I tried this using your instruction and I cant find it on my blog (and yes I saved it).

    Can you help me? Thanks

    ReplyDelete
  20. Thanks Muhammad,
    I like this Widget.

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete
  22. thanks ! found it very informative for my blog for where i use facebook fan pages and buy likes for it . thanks a lot again .

    buy facebook likes

    ReplyDelete
  23. I followed all the steps but still, can't see it on my site.

    My site : http://freen8apps.blogspot.com/

    ReplyDelete
  24. how to increase the width of this box bro?????????

    ReplyDelete
  25. Hello Mohammad! Thank you for your work :). I really like this widget and I want to use it, but because I want to put it on my right sidebar I need to resize the widget...It's possible you tell me how can I do that? More precisely, what values ​​I need to change...

    ReplyDelete
  26. @Isabela
    I found it...I apologize for the unnecessary question. Thank you anyway :)

    ReplyDelete
  27. This is not showing up on my blog at all! Please help. Thanks!

    ReplyDelete
  28. Well I scoured through my template html and found finally. I entered the code here below it and made all the appropriate changes and it didn't work. Below the regular comment option on my post there seems to be a big chunk or space...is this for the widget I just did something wrong? Please help.

    ReplyDelete
  29. @karl kechner,I also have the same error..Admin pls do something..

    My site : freen8apps.blogspot.com

    ReplyDelete
  30. Didn't work on mine either I only checked the preview but it wasn't there.

    ReplyDelete
  31. You've copied it from way2blogging.org !!!!

    ReplyDelete
  32. Your Blogging tips are indeed amazing. I just tried one of them.
    Yes, i also require this kind of widget for my website that is on wordpress. So , please write it for wordpress olso..:)

    Regards
    Shaeeb
    http://www.hackinghome.com

    ReplyDelete
  33. This is very nice. Thanks for sharing it but one more thing.
    Please tell how to increase the width of this whole widget.
    Please reply.

    ReplyDelete
  34. great widget hopefully my weblog users will like this.
    You can see it live in my weblog DeluxePages

    ReplyDelete
  35. Its eror! not working in my blog.

    http;//mwcrew10.blogspot.com

    ReplyDelete
  36. This comment has been removed by the author.

    ReplyDelete
  37. Is there a way to make this a little bit lower below the post?

    Like adding a "BR" space tag?

    Because this widget appears too close to the content in my blog.

    Sorry, I love this widget, I don't mean to sound picky.

    Here's an example: http://www.the-social-feed.com/2012/01/qr-code-tattoo-most-random-tattoo-ever.html

    - Thank you for any replies.
    - Rasy

    ReplyDelete
  38. yaa mustafa ..
    It's not shown in my blog, it's not working ..
    please help me ..

    ReplyDelete
  39. Hey i am finding <data:post.body/> Three times see my blog www.techmodules.blogspot.com

    ReplyDelete
  40. This comment has been removed by the author.

    ReplyDelete
  41. iam getting that five times where i have to add

    ReplyDelete
  42. Nice Stuff! I have just added it and it worked perfectly on my blog. I even changed the FB, Twitter and RSS icons to the colour of my blog. See it live @ http://www.naijatechblog.com

    Note: If you wish to increase the width of the email form, simply add width:300px; under .mbttext{

    (choose width that will match your blog, mine was 620px)

    Thanks once again mohammad for this cool widget

    ReplyDelete
  43. Please correct my first comment. The 620px is the width of my blog post body while the 300px was the width I gave the email subscription form.

    Cheers!

    ReplyDelete
  44. not working please help me-
    http://tune2tech101.blogspot.com

    ReplyDelete
  45. Hi, when i search then i get 4 results in where do i paste that coad

    ReplyDelete
  46. This comment has been removed by the author.

    ReplyDelete
  47. It’s Nice pics post, This post is a excellent example of such kind of story.
    Delhi Escorts

    ReplyDelete
  48. Nice Work...work for me...
    http://www.softwaretricks.net/

    ReplyDelete
  49. Great This worked and its cool
    www.techdaybook.com

    ReplyDelete
  50. sir do you like this story does not appear in my blog i have correctly follow the steps but i cant...please help me

    ReplyDelete
  51. This Looks Cool On My Blog
    http://slimwares.blogspot.com
    I Even edited and change some things
    It Looks better

    ReplyDelete
  52. Mohammad it's not working on my blog...
    www.news9090.blogspot.com
    kindly help me...
    Regards...

    ReplyDelete
  53. Help me please ....I just don't know how to proceed .

    ReplyDelete
  54. Hi,
    I tried this one but it`s not working on my blog.None of the tricks that starts with [ ] and past the code after it is not working on my blog techtest11.blogspot.com

    AS you have written so many working post & I used themto my blog.Thanks to you.I appreciate your help

    ReplyDelete
  55. This comment has been removed by the author.

    ReplyDelete
  56. this is not working in my blog ..why ?
    www.tons4free.blogspot.in

    ReplyDelete
  57. hi, Bro It is all are amzing. actually i tried To Do same, but the actuall words in HTML Coiding not found, Please Helpd me i have not any knowledge of HTML yet

    ReplyDelete
  58. Thanks Bro for this widget! I have just added it and it worked perfectly on my News blog. Here's how it looks on my Blog.
    http://storiestrendingnow.blogspot.com

    Thanks again

    ReplyDelete
  59. how to change the width of this gadget my blog is po360.blogspot.com

    ReplyDelete
  60. hello bro, i really need your help. please.

    the following code is not adjusting with my template, its showing up little larger then my post template space. could you please give me a update code for my blog? its www.topone2u.com
    my email: linkers2u@gmail.com
    facebook: facebook.com/rubelahmed35

    It will be your kindness if you do this for me.. thank you so much in advance.

    ReplyDelete
  61. This comment has been removed by the author.

    ReplyDelete
  62. Thank your for your useful tutorial. :)

    ReplyDelete
  63. thank for all of you for commenting here. . . if someone need something different and special so come to my site http://www.blueheavenescorts.in

    ReplyDelete
  64. its not working in my blog :( :(

    ReplyDelete
  65. AOA thanks for the widget. can you make these codes responsive ?

    ReplyDelete
  66. its not working.
    plz check why it not working on my blog cshortcut.blogspot.com

    ReplyDelete
  67. its Not Working i did not see anything in may blog

    ReplyDelete
  68. please mihammad tell me
    i have applied this on my blog www.windowsreloded.blogspot.com, but how can i change the width of the box , i want to increase the width, please help

    ReplyDelete
  69. Thanks a lot. It works perfectly on my blog. :)

    ReplyDelete
  70. Its not appearing on my blog.. dont know y also sharing widget below every post.. even though i paste it after

    ReplyDelete
  71. Thanks !!! It works perfectly on my blog. :)

    ReplyDelete
  72. This comment has been removed by the author.

    ReplyDelete
  73. It is not working on my blog. I found data(..)... code 9 time in my theme so after which I should paste this code?

    ReplyDelete
  74. Brother thank you. I have also installed it on my web-site www.englishclubpro.com but I have some questions.

    When I submit an e-mail, I am being redircted to msn.com Is it normal? How to fix the problem?

    How can I know how many people are submitting their e-mail accounts?

    Thank you )))

    ReplyDelete
  75. This comment has been removed by the author.

    ReplyDelete
  76. I am Askok, I am from Lucknow now a day I am living in Delhi, I came here for visiting the historical places. During my visit I was feelings alone so I hired Independent Delhi Escorts from Delhiescortshub.in, Simone Elite Escort in Delhi was very attractive girl I ever meet. She fulfilled my wishes.

    ReplyDelete
  77. Awesome experience with Kolkata Escorts Girls, that agency provides me world class escort service in Kolkata. I really happy that time when I was with her.

    ReplyDelete

  78. I am Sonu from Bihar, for my higher education I came in Kolkata, always busy in study it make me unhappy and it grow my feelings for fun with beautiful girl. I search on internet about independent Kolkata Escorts Online and hot the reference of independentescortsinkolkata.co.in, independentescortsinkolkata.co.in is the hub where you can select more than 100 girl from all over the world.

    ReplyDelete
  79. Unable to get it right please help http://weird-jobs.blogspot.in/

    ReplyDelete
  80. Hello friends I am Jas Das from Gujarat in India. I was in Kolkata and need the Escorts service then I search on Google and found the Swachhata pal Website. Swachhata pal high profile independent escorts in Kolkata .she is the perfect Girl for person who wants a real open mind independent girl experience in Kolkata. She make my wishes complete. I really happy that time when I was with her.

    ReplyDelete
  81. Hottest girl erotic, beautiful and attractive girl for sex in this escort post
    Mumbai female escort

    ReplyDelete
  82. Nice post to find an erotic escort service thanks for really nice information about escort.
    Mumbai Independent Escorts

    ReplyDelete
  83. Interesting Post of Escort services, Great to comment on this post really cool and hot sexy escort in this post
    Mumbai vip escorts, escort mumbai

    ReplyDelete
  84. I saw you post it really cool and all escort pic and figure of escort are really nice
    Mumbai Female Escorts

    ReplyDelete
  85. Hot and sexy escort girl in this post. really awesome and erotic post
    Mumbai escorts in mumbai

    ReplyDelete
  86. i have read your blog story, its very tremendous writing skills saw in your blog, just keep writing for us...
    Mumbai female escorts, escorts in mumbai

    ReplyDelete
  87. Hi I Parul malik I am independent escort girl based in Delhi providing escorting service, I m 24 year of age and ready to go in and out calls check me out here Gurgaon Escort Service and Faridabad Escort Service

    ReplyDelete
  88. hi!! its not working on askmecareer.blogspot.com

    ReplyDelete
  89. Our adult Delhi Escort Agency service features Delhi escorts of North and Call in +91-9818990100 Independent Delhi Escorts. Our Female escorts of Delhi are the best genuine independent escorts in Delhi escort service agency.

    ReplyDelete
  90. Hi Friends, Myself Riya Sharma, I belongs to delhi and I am really a wonderful girl who complete dreams of lonly mens in Delhi's 5 start hotel, I am a awesome girl, I know very well to perform to make my clients happy, not in a day but also night too I always make my clients fully satisfied, I am a Real Delhi Call Girl, you can visit me on www.delhicallgirls.co for more information on me and my charges, I am a very popular Delhi Escort in Delhi, for your delhi escort service need just remember me.

    Thanks
    Riya Sharma

    ReplyDelete
  91. Hello Guys we are offering naughty call girls service for all of you, our selected model is under 19 to 24 year old, so you can take our Delhi call girls with full night fun, Our service is available in Delhi & NCR region, we are just a call away - 09999331982.

    Visit our website:
    Delhi Escort Girl - Delhi Escorts Service, Delhi Call Girls Agency - Escort in Delhi, Model Delhi Escort Service - Delhi Escort, Young Delhi Call Girls

    Thanks
    Soumya Gupta

    ReplyDelete
  92. Hello Guys we are offering naughty call girls service for all of you, our selected model is under 19 to 24 year old, so you can take our Delhi call girls with full night fun, Our service is available in Delhi & NCR region, we are just a call away - +919971946829.

    Our Services Includes:
    Delhi Call Girl Service, Call Girl in Delhi, Model Call Girl in Delhi, Russian Call Girls Delhi, Noida Call Girl, Call Girls in Delhi, Delhi Escort Girl

    Thanks
    Monika Rawat
    +919971946829

    ReplyDelete
  93. Delhi escort is the service of the excellent emotions, where everything is the best and the service leads its clients directly to the excellent possibilities.

    visit my website
    Escorts Service In Delhi

    ReplyDelete
  94. My name is Lavleen Kaur so pretty independent escort girl in Chandigarh, I am perfect thrilling Independent Chandigarh escort girl only for you when take my service i am waiting for you visit me on Independent Chandigarh Escorts Service.

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!