Email Subscription Widget For Blogger

Its time to make your Blog More stylish with this email Subscription Widget. Look at the screenshot given at the left side of t his post to better understand how the widget actually looks.This widget is developed in css3. This widget is made to boost the number of your email subscribers. For adding this code, just follow the simple steps given below. Before adding this widget to your blog, have a look at its features. I promise that this widget will never let you down and it will boost your email subscribers. This widget also provides Facebook, Twitter and Google plus and feed buttons along with email subscription widget.

Features of Email Subscriptione Widget

1. Made with css3
2. no java script no j query
3. plain html and style sheet code
4. no need to edit your template

How To Add Email Subscription Widget

Its very simple to add email subscription widget in you blog, just follow the simple steps given below.

1. Go to your blog dashboard
2. go to layout
3. click on add a gadget
4. Select html/java script
5. paste the code given below inside.

<style>
.tbisubscribe {
border: 1px solid #56DB23;
padding-right: 8px;
padding-left: 6px;
padding-top: 8px;
padding-bottom: 8px;
width: 284px;
background: #EDFFFD;
}
.tbisubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 140px !important;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif !important;
font-style: normal;
color: #ffffff !important;
background: #ff5714 !important;
border: 0px solid #ffffff !important;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px !important;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px !important;
cursor: pointer !important;
margin: 0 auto !important;
height: 45px !important;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbisubscribe'>
<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div>
<div style='margin: 10px 0 0 6px;'>
<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=brainOFComputer&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='brainofcomputer' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' 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='tbisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='https://www.facebook.com/brainofcomputer' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3a7JLoVAt_Ywmm10vcWJtSmq4g3cRxF5_uRiP_reXES5e0DDrcVSVyCDRnoNlK-nqNbQvlipDQUoWMZGllXJmBXyseYNV7g8P5cE-W2xsejBhO80-uy3pKcAkcHh-hIJrFqWQXz9xP2s/s32/facebook500.png' alt='facebook'/></a>
<a href='https://www.twitter.com/brainofcomputer' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvPqPjJJ82fBQRqPzEskei9Xt1xeF4QfWXv5IS7qrZZUvoBww2VNBVRBNHbuuAONrxRLblRJWnwkO-u_SodQGHu8fCB_GKfRPwfjKh81k-9de9uS7KKcBgiM6ijeQXol1MHfxMpJgGAVM/s32/twitter.png' alt='twitter'/></a>
<a href='https://plus.google.com/102309133279826094256' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwjDhVqcaQam8GKu2B0F9jnJm8qRoCem6kN2qB1gAlRDHMs0eFaGk7AMDVDQ5dlfONhRJ9DH0TfyWQED5W0d3Dxn3HQ4oYK8SOI0IsB7g-6qpPPB4llqAjLcjHpl7c9QsPbbdZZ5J5LWE/s32/googleplus-revised.png' alt='gplus'/></a>
<a href='http://feeds.feedburner.com/BrainOfComputer' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwjBOWVsm2sAjm4RsryGYqfkLOxgXkarBubdsGCeDT6n0R5ruKSsbirelLSUJaNfEJbg3MQXJrtpkvUMGn6Zu5wS9jmlni_1yPrSqgRY3oIX7q0Fb2kPo3mCP198z5ky9rDbPStPxPJgo/s32/rss.png' alt='rss'/></a>
</div></div>

Make sure to change highlighted codes. Now save the widget and you are done. Leave your comments below.