Hi Guys Today i will tell You how to add a nice Email Form Under Your Blog Posts, One of the most strategic positions that’s been proven to be effective, This Email Form Including a styled feeedburner email subscription form along with social media buttons can go a long way in increasing the number of your feed subscribers. Apart from this, this widget can increase your facebook fans and twitter followers and Google+.
after adding it below your posts the widget should look like This :
To add this widget to your blogger blog you should follow these steps :
- Go to Templete » Edit HTML » Click on Proced
- Check The “Expand Widget Templates” Box
- And search for <data:post.body/>
- Right Below the Above Code Paste This Code :
<b:if cond='data:blog.pageType == "item"'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.dcstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp4bLogSoGNQAdzMv_M51AqqcAJHn15djwqGopyxgCuIB8EfbeuYE93a1WRP4nEdOGiDX7mR8b6paXLgLDSe6QNkGvOj-TAX_fu_5s5hNYsVFBudqhRrglGKKYcUbmGJHnBoWEj6OUsuf9/s400/email_icon.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;
}
.dcsubmit{
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%);
}#emailwidget-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;
}
#emailwidget-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;
}
#emailwidget-outer td{
padding:3px 0;
}
</style><center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody><tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=tutosforblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='tutosforblogger'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='dcstyle' 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='dcsubmit' title='' type='submit' value='Submit'/>
</form>
</td><td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feeds.feedburner.com/tutosforblogger' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggD2JTsFnCC7J5epExhTJ-DhLX1LPSN0AUXSgfqZGHGejeCUBj5TkKiweZwVfTRAggOlAk3OVGAmybFpHW284AJ4cJ9l-U4bLTBNuddvA-Fm6-IkpskRF9v5c4nH9w9cbJWnGg9S3JFKA/s1600/rss-30×43.png'/></a><a href='Twitter' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixQRm3KrUWWfWSp8djQSef7NVWlM7s6TSZFKbeADTClHC5PvhUSiZ_vTDWvFUsemN-FcmNfb7LqdWiY4N957xK94b32E_LE2NOWs-yndpQcWGy3IXWizNaPzklJ2QPJ7eVzFPmtcpC2jU/s1600/twitter-30×43.png'/></a>
<a href='Facebook' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHBtxE7VOcm9W5r6s4Sq0jhhsgnn95uHsalwD5nqpwdRh84zy9TKVi6E6yM625V0iUza6FFaj8J3dAKyH9wSCgCy8DudvDPWR6kE1AVwX4AwEwrVb8J3p_XadGcxdCQSKfxeIns7yzUcA/s1600/facebook-30×43.png'/></a>
<a href='Google+' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-HVoX_IwSygvuwdwEecD0d-HkGlVvLiGQBPT-IxF4dtEXD-8s9a56_b1WbThOSxzzbyz9oiLUv9KA2ZvELe9xjo6p6-6Df_vabzzKNDLSOaEv7dK2RPThJenRxaXYN-BDk_aMEzXJw7s/s1600/googleplus-30×43.png'/></a>
</td>
</tr>
</tbody></table>
</div></div>
</center>
</b:if>
- tutosforblogger : Replace this with your feed title.
- Twitter : Replace with Your Twitter Profile Url.
- Facebook : Replace with Your Facebook Fans Page or Your Profile link.
- Google+ : Replace with Your Google+ Profile Link.
Things to change in the code :
Save Your Template And View your blog To see the new Email Form.
1 comments:
Thank you so much :)
Post a Comment