Posts
Add Do You Like This Story Widget Below Every Post
Welcome again to all Friends as i already provided Social Media Sharing widget and also Flipper Sharing widget for Blogger, For many requests today i am showing you how to add Do You Like This Story Widget for Blogger. This widget includes on your Feed burner, Twitter and Facebook social account buttons like flags which attracts your visitor and also increase your traffic and followers. A Facebook like button also added with this widget which through traffic from Facebook to your site and its a better plan to get traffic from Facebook. So lets see how to add this widget in blogger.
Live Demo
How To Add Do You Like This Story Widget In Blogger?
To install this widget in blogger you need to following these simple steps:-
Go to Blogger > Template > Edit HTML
Search for <data:post.body/> using CTRL+F
Now paste the following code below it
<b:if cond='data:blog.pageType == "item"'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbwtext{
background:url(http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2
HIw/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;
}
.mbwbutton{
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='#FBFBFB', endColorstr='#F4F4F4',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('http://feedburner.google.com/fb/a/mailverify?uri=ehimini', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='ehimini'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbwtext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input alt='' class='mbwbutton' 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/ehimini' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://4.bp.blogspot.com/-GMZCDc-rTEo/Ul1e3h5B_ZI/AAAAAAAAA7U/fUAGzf
FsbUE/s1600/flagrss.png
'/></a>
<a href='https://twitter.com/mybloggerwidget' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://4.bp.blogspot.com/-xuXeIIyW_7k/Ul1e3kYOYBI/AAAAAAAAA7Y/df8L7
ZihYTI/s1600/flagtwitter.png
'/></a>
<a href='https://www.facebook.com/mybloggerwidget' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://2.bp.blogspot.com/-yy7ZUovcX4w/Ul1e3lIvgoI/AAAAAAAAA7k/zdgg0RkaQ
sk/s1600/flagfb.png
'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>
Replace ehimini with your Feed title
Replace Blue color link with your Feedburner link
Replace Orange color link with your Twitter link
Replace Maroon color link with your Facebook link
Now save your template and you are done !
After saving the template preview your site and you can see the changes
Note:- This widget only shows below your posts not on homepage and give your feedback via comments Take Care !
- See more at: http://www.ehimini.com/2013/10/add-do-you-like-this-story-widget-below.html#sthash.c01OicRY.dpuf
Welcome again to all Friends as i already provided Social Media Sharing widget and also Flipper Sharing widget for Blogger, For many requests today i am showing you how to add Do You Like This Story Widget for Blogger. This widget includes on your Feed burner, Twitter and Facebook social account buttons like flags which attracts your visitor and also increase your traffic and followers. A Facebook like button also added with this widget which through traffic from Facebook to your site and its a better plan to get traffic from Facebook. So lets see how to add this widget in blogger.
Live Demo
How To Add Do You Like This Story Widget In Blogger?
To install this widget in blogger you need to following these simple steps:-
Go to Blogger > Template > Edit HTML
Search for <data:post.body/> using CTRL+F
Now paste the following code below it
<b:if cond='data:blog.pageType == "item"'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbwtext{
background:url(http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2
HIw/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;
}
.mbwbutton{
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='#FBFBFB', endColorstr='#F4F4F4',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('http://feedburner.google.com/fb/a/mailverify?uri=ehimini', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='ehimini'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbwtext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input alt='' class='mbwbutton' 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/ehimini' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://4.bp.blogspot.com/-GMZCDc-rTEo/Ul1e3h5B_ZI/AAAAAAAAA7U/fUAGzf
FsbUE/s1600/flagrss.png
'/></a>
<a href='https://twitter.com/mybloggerwidget' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://4.bp.blogspot.com/-xuXeIIyW_7k/Ul1e3kYOYBI/AAAAAAAAA7Y/df8L7
ZihYTI/s1600/flagtwitter.png
'/></a>
<a href='https://www.facebook.com/mybloggerwidget' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://2.bp.blogspot.com/-yy7ZUovcX4w/Ul1e3lIvgoI/AAAAAAAAA7k/zdgg0RkaQ
sk/s1600/flagfb.png
'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>
Replace ehimini with your Feed title
Replace Blue color link with your Feedburner link
Replace Orange color link with your Twitter link
Replace Maroon color link with your Facebook link
Now save your template and you are done !
After saving the template preview your site and you can see the changes
Note:- This widget only shows below your posts not on homepage and give your feedback via comments Take Care !
- See more at: http://www.ehimini.com/2013/10/add-do-you-like-this-story-widget-below.html#sthash.c01OicRY.dpuf
Jillur Rahman
I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.
No Comment to " Add Do You Like This Story Widget Below Every Post "