How To Add This Widget To Your Blog
- Go to your blogger dashboard
- Click on "Design" > "Edit HTML" > Back up your template
- Mark/Tick "Expand Widget Templates"
- Use ctrl F to find the code below
<data:post.body/>
- Paste the following code below the code above
<b:if cond='data:blog.pageType == "item"'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.rbtext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju5ec7_SZpJPhNqJ-7hLXpoXlTRJ1KtTRNJdhs5XGLet94Bx2OZNb37wNMh_4F79BbGkDs2T6MMQmUXrn0XQX-G_hq5Ubb0eohvhQsZbZV0wA83aCME1vWkzA1X2X5kpGJMgqJuawVhLel/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;
}
.rbbutton{
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;'>Hope You Enjoy This Article..?</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; '>Subscribe To Get Free Email Updates!</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=bloggerheroe', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='bloggerheroe'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='rbtext' 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='rbbutton' 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/bloggerheroe' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJdivk9snhvmQG7oXtyJKeUFFYHV29-MoNi8YQjn8i7ZlDAqumY_AyLhNB9-4WyJwxsvPEpcLPJuVcvrg32vAadrlJkd9igzuHk_RcPdXk5MYC2L95eyNBjLXhTAnwVnHw0VfDA2EJmbLJ/s40/w2bRSS+.png'/></a>
<a href='http://twitter.com/jaa_09' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DY5-Xc2ivqQqqdeoss6F-HN55ObsCW3SIcbmzhkReLRkBVZKSGKGTBFRL6_RUp9zRzSEAfoVlYDLt0sGvWZdLLAO3LUklRKcuWRT5xfATn2K4j802cL3hF8ZeLTrK9c6mN6piZNQNwHX/s40/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/blogger-hero' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzF8tH55ANQkckt2njbpPAeH2XJFBI3Sxi9pTf2ES6QQDJX0OuZ3zwqk9qNJ1qFhvPxNraf7rBuB09rh1JjRC3d0ywMCG80ishd_fzD2PrHeJ3HSpiPNXvSvUNsCR_03lxKhGxFN4YONbn/s40/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>
- You can edit Hope You Enjoy This Article..?, Subscribe To Get Free Email Updates!, and Follow us! to your desired text.
- To change the colour of "Hope You Enjoy This Article..?" edit #FF683F, with your own desired hex colour. check here for 100's of hex colour.
- Replace http://feedburner.google.com/fb/a/mailverify?uri=bloggerheroe with your feedburner link or bloggerheroe with your feed title.
- Replace bloggerheroe with your feed title, and the one at the back of http://feeds.feedburner.com/bloggerheroe.
- Replace http://twitter.com/jaa_09 with your twitter profile url.
- Replace http://facebook.com/blogger-hero with your facebook profile url.
- Click "SAVE TEMPLATE" when your are done with your editing.
Hope you find this article useful? if so, take few seconds to share it,
Hello There!Happy for reading the article and don't forget share this article on your social network.Thanks You ^_^
Posted by 12:37 AM and have
1 comments
My friend was reading the article onHow To Build Subscription Box With Facebook Like And Send Button To Blogger Blog. Admin, buddy permitted copying and pasting or disseminate this article, but do not forget to put the source link below.
, Published at Writed by : Admin ID-Netblog

ARTIKEL TERKAIT:
Blogger Plugins
- Cool Recent Cooment Widgets For Blogger/Blog
- Blogger's New Template HTML Editor
- How To Add Lovely Featured Slider With Navigator For Blogger/Blog
- Tooltips Recent Post Widget For Blogger With Thumbnail
- Automatic Hide Facebook Like Button And Twitter Follower On Blogger/Blog
- How To Add Floating Social Bookmark with Easing Effect
- Adding Automatic And Simple Slider To Your Blogger/Blog
- How To Add Cool Hover Subscription Box Every Post For Blogger
- How to Add Wordpress Style Floating Social Sharing Bar Widget For Blogger
- Recommended Post Slide Out Widget With Social Share Buttons For Blogger
- How To Add Flashing Christmas Lights for blogger/blog
- How To Add Google+ Followers Widget For Blogger/wordpress/website
- How To Add Sliding In-Out Social Sharing For Blogger V2
- Adding Ads Box with cool CSS effect as used in Spice Up Your Blog
- How To Add Sliding In-Out Social Sharing For Blogger
- How To Add Cool Blockquote Style In Blogger!
- How To Add A Unique Message Box For Blogger
- How To Add Horizontal Tab menu with Search Form
- How To Add Notification Box For Blogger/Blog
- How To Add Multi-Colored Popular Posts Widget For Blogger
- How To Remove Titles / Header On Label Page For Blogger Blog
- How To Add Mashable WordPress Style Social Subscription Form To Blogger
- Add a Stylish Subscription Box With Social Media Buttons Below Every Posts
- How To Add Heading Tag With Drop Shadow And Mouse Hover Effect
Blogger Widgets
- Cool Recent Cooment Widgets For Blogger/Blog
- Automatic Hide Links From Comments In Blogger
- How To Add Lovely Featured Slider With Navigator For Blogger/Blog
- Tooltips Recent Post Widget For Blogger With Thumbnail
- Automatic Hide Facebook Like Button And Twitter Follower On Blogger/Blog
- How To Add Floating Social Bookmark with Easing Effect
- Adding Automatic And Simple Slider To Your Blogger/Blog
- How to Add Wordpress Style Floating Social Sharing Bar Widget For Blogger
- How To Add Pro Facebook Like Box Widget Beside Beautiful Social Sharing Box in Blogger Post Footer
- How To Add Google+ Followers Widget For Blogger/wordpress/website
- Author Bio Box Widget Generator For Blogger/Blog
- How To Add Static Google Plus Pop Out Box With Smooth Hover Effect
- How To Add Sliding In-Out Social Sharing For Blogger V2
- How To Add Sliding In-Out Social Sharing For Blogger
- How To Add Cool Blockquote Style In Blogger!
- How To Add A Unique Message Box For Blogger
- Hover Link Color Rainbow - Rainbow Color Effect with CSS3 Animation For Blogger
- How To Add Horizontal Tab menu with Search Form
- How To Add Spice Up Your Blog Comment System
- How To Add Cool Hover Blogger Widget
- How To Add Stylish Animated Blogger Recent Posts Widget
- How To Add Multi-Colored Popular Posts Widget For Blogger
- How To Add Mashable WordPress Style Social Subscription Form To Blogger
- Add a Stylish Subscription Box With Social Media Buttons Below Every Posts
Blogging
- Which is better, Blogger or WordPress?
- Automatic Hide Links From Comments In Blogger
- 5 Important Things to Do Before Publishing Your Article
- 6 Things to Do Immediately After You Get a New Email Subscriber
- Best Tips to Make Your Blogging Career Successful
- How to Choose a Good Blog Name
- Do You Think Guest Blogging Waste Of Time?
- 10 Attributes that Every Thriving Blogger Should Hold (Tips For Blogger)
- How To Depute Your Blog For Getting Impressive Traffic
would like to say thank you for spending more time and effort to share this very nice and wonderful topic with us. I am sure your idea is more helpful for me.
ReplyDeletewebsite design