Amazing Email Subscription Box with Hover Effect For Blogger:Digital Tech Inspiration

If you have a blog/website, you should offer visitors a way to subscribe to new posts via e-mail. This means they can receive new posts via e-mail without having to visit your blog.
For that purpose you need an email subscription box in your blog/website.

This Amazing Email Subscription Box with Hover Effect let your blog/website loyal readers to get your latest post updates directly to their mailbox. Have a look at the live demo and if you find it amazing or just want to give it a try, then get on with the tutorial to add it on your blog/website.

LIVE DEMO

How to Add an Amazing Email Subscription Box with Hover Effect to Blogger Blog?

STEP #1: Log on to Blogger

STEP #2: Go to Dashboard>Layout

STEP #3: Click on Add a Gadget

STEP #4: Select HTML/JavaScript gadget.

STEP #5: Copy/Paste the following code inside that gadget.

<style>

.wtsubscribe {

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;

}

.wtsubscribe: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);

}

.wtmailbox {

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;

}

.wtmailbox: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;

}

.wtsubmit {

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;

}

.wtsubmit:active {

cursor: pointer;

position: relative;

top: 2px;

}

.wtsubmit::-moz-focus-inner {

border: 0;

padding: 0;

margin: 0;

}

</style>

Get Free Updates in your Inbox</div>

<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'

method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=WIKITECHNOL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'

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

<input class='wtmailbox' 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...' />

</form>

</div>

<a href='http://www.twitter.com/WIKITECHNOL' rel='nofollow' target='_blank'

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

<a href='http://plus.google.com/107244857879006042054' rel='nofollow' target='_blank'

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

<a href='http://www.pinterest.com/wikitechnol' rel='nofollow' target='_blank'

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

<a href='http://feeds.feedburner.com/WIKITECHNOL' rel='nofollow' target='_blank'

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

</div>

How to Customize?

Replace WIKITECHNOL with your Facebook username.
Replace WIKITECHNOL with your Twitter username.
Replace WIKITECHNOL with your feedburner username.
Replace 107244857879006042054 with your Google+ ID.
Replace wikitechnol with your Pinterest ID.

STEP #6: Now click on Save and it’s done.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.