How to Add a Subscription Box

Hello, today, I'll be sharing with you on how to add a subscription box to your website or blog. To add one follow the steps outlined below:

• Click on the Add a Gadget link in your Blogger layout.
• Select HTML & JavaScript Code from the pop-up window
• Copy the code below:

<style>

.tbisubscribe {

border: 1px solid #D3D3D3;

padding: 8px;

width: 300px;

-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;

}

.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: 160px;

-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;

}

.tbimailbox:hover {

-webkit-box-shadow: none;

box-shadow: none;

-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;

font-style: normal;

color: #ffffff;

background: #ff5714;

border: 0px solid #ffffff;

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;

-moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 10px 10px;

padding: 8px 15px;

cursor: pointer;

margin: 0 auto;

}

.tbisubmit:active {

cursor: pointer;

position: relative;

top: 2px;

}

.tbisubmit::-moz-focus-inner {

border: 0;

padding: 0;

margin: 0;

}

</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('http://feedburner.google.com/fb/a/mailverify?uri=labstrike', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'

style='margin: 0pt;' target='popupwindow'>

<input name='uri' type='hidden' value='labstrike' />

<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 == "Enter your email...") {this.value = ""}'

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='FACEBOOK URL' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxebQd-JwSpti8wlnxFIOnB_f9kesZ5wD7i8zhe67b1i_YcpBH4TlLVb9nC2yWi3eEP00kbpckp55A7UksaILvg5S80S8YAmzJmm6QWpaO5I8gYg4FqcGAPIVu0Wd-4lQdUWwPdUIhr8/s1600/facebook500.png' alt='facebook'/></a>

<a href='TWITTER URL' rel='nofollow' target='_blank'

title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5DB4tY3155PXb-hn2CmHrmbG1xdnAqAZDV3C8xsWKYqhzJxbZoRNsExQoA8sURgm1Cw8DuSjjZCdGPaum6UA34QJtYzxFUHUfzqvoTdfduyRWovuZYrq9Hqet2T07i83Ja1y5jXxjxcE/s1600/twitter.png' alt='twitter'/></a>

<a href='GOOGLE+ URL' rel='nofollow' target='_blank'

title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLNbP8LQfX-ypM4NR4rddYzpVDhILEHdCSYcIM63dBBC9ELj5XtyceI-wTjQrpMe1UHKZNzP1brf1RLBBkOcLbrUHdP5EEgGCrTR76kft9e6-KIPbtdGf2ssoiSWxSZTGfQgIP1jchp54/s1600/googleplus-revised.png' alt='gplus'/></a>

<a href='PINTEREST URL' rel='nofollow' target='_blank'

title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvgDu7gr0d6oyK3kxY6MpTnihF-crU-kHZxJEzJMB2pa18b_Z37CRROU_FNzyMHsWAfSSA6Ir-x0fq1J0ua9cIBv9NjZlIGXJlKMfjg0wTah9Fol16Fq7mKyRyefWHuxDA7bNN5HF4g0E/s1600/pinterest.png' alt='pinterest'/></a>

<a href='RSS URL' rel='nofollow' target='_blank'

title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_FsvpxCpynj0yODllevzSz69gIraRlp2LiKe_cTLVTcCaDQYwc0kYfniG-Mi9TmrXKnjZrpD4ngTMjVPUDvT65bI1sdZZglFCphRdhuQVT7NQNiecElaa22IN1I-a1OBHkL9oOsnBZ0/s1600/rss.png' alt='rss'/></a>

</div>

</div>

• Paste it into a text editor such as Notepad

• Edit the Facebook, Twitter, Google+, Pinterest, and RSS url respectively to your desired url.

• Copy the code from the text editor and paste it into the HTM & JavaScript column 

• Save the changes

• Open your blog and view the results