You Are Here: Home » Blogger » How To Add Email Subscription Box With Social Media To Blogger Post

How To Add Email Subscription Box With Social Media To Blogger Post

Today, I will quickly walk you through how to Add Email Subscription Box to blogger post. It comes with Social Media buttons which makes the “Email Subscription Box” very attractive

email

5 Easy Steps To Add Email Subscription Box With Social Media To Blogger Post

1. Go to your Blogger Dashboard
2. Locate Template > EDIT HTML
3. Use crtl F to find the code below

<data:post.body/> 

4. Paste the code below immediately after the code above.

<style><!-- form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.TKstyle{
background:url(https://lh3.googleusercontent.com/-X3Fm9Xe2GLE/UUkbPrTXowI/AAAAAAAAAPw/qZvrAvGthSw/h120/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;
}
.TKsubmit{
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%);
}
#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:520px;
}
#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>&nbsp;
<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 style="border: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;" align="left">
<p style="color: #666; font-weight: bold; font-size: 20px; margin: 0px 0px 5px 0px;">Get free daily email updates!</p>
<form style="margin: 0pt;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://FEED BURNER URL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="hidden" name="uri" value="Realcombiz" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" name="email" value="Enter your email…" onfocus="if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}" />
<input title="" type="submit" alt="" 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 title="Suscribe to RSS Feed" href="http://FEEDBURNER URL" target="_blank" rel="nofollow"><img alt="" src=" https://lh3.googleusercontent.com/-m962vRESmXQ/UUkbQXvIFAI/AAAAAAAAAP8/uf7iaVn0ZSg/h120/rss-30x43.png" /></a>
<a title="Follow us on Twitter" href="http://twitter.com/USERNAME" target="_blank" rel="nofollow"><img alt="" src=" https://lh5.googleusercontent.com/-BJW-wB6zpCA/UUkbQbrCUWI/AAAAAAAAAQA/pZgk0pYQW4E/h120/twitter-30x43.png " /></a>
<a title="Follow us on Facebook" href="http://INSERT FACEBOOK PAGE URL HERE" target="_blank" rel="nofollow"><img alt="" src=" https://lh4.googleusercontent.com/-j6hQ2_MPVlk/UUkbPtYkbHI/AAAAAAAAAPo/Z4Pu-nKc9c8/h120/facebook-30x43.png " /></a>
<a title="Follow us on Google+" href="https://plus.google.com/GOOGLE PLUS ID" target="_blank" rel="nofollow"><img alt="" src=" https://lh3.googleusercontent.com/-ZKpXe2imvZY/UUkbPtQfejI/AAAAAAAAAPs/pm82IQo9gKE/h120/googleplus-30x43.png " /></a></td>
</tr>
</tbody>
</table>
<div align="right"><span style="font-style: italic; font-size: 8px; color: solid #3333ff;"><a style="text-decoration: none;" href="http://thatnaijablog.com" target="_blank"><span style="color: #3333ff;">[Get this widget]</span></a></span></div>
</div>
</div>
&nbsp;
<iframe style="border: none; overflow: hidden; width: 292px; height: 258px;" src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Thatnaijablog/263576020319999&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;" height="240" width="320"></iframe>

5. Change all social media links in line  72, 79, 80, 81, 82 with your url and Save Template.

That’s it. You should now see Email Subscription Box With Social Media under your blog posts. Hope it worked for you?






About The Author

Editor-in-Chief

Nosa is the Editor-in-Chief of TechRez. Got a NEWS TIP related to this story -- or to anything else in the world of big tech? Please e-mail him: nosa at techrez.com. You can also connect with him via the connections below the box.


Get our weekly email update (It's Free)


So, what do you think?

  • http://www.doncyber.com doncyber

    am happy reading this bro… i almost thought its for wordpress…. the one am using on http://www.doncyber.com is not as simple as this… any help???

    • http://www.thatnaijablog.com Nosa E Nosa

      Yours is fantastic, I don’t know why you want it off..

Most Underrated Games
DMCA.com

©ThatNaijaBlog | Hosting By Arvixe

Scroll to top