Amazing Email Subscription Box with Hover Effect For Blogger


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>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='wtsubscribe'>
<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=WIKITECHNOL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='WIKITECHNOL' />
<input name='loc' type='hidden' value='en_US' />
<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...' />
<input alt='' class='wtsubmit' 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='http://www.facebook.com/WIKITECHNOL' target='_blank' title='Join us on Facebook'><img src='http://1.bp.blogspot.com/-7BFnvcwztPI/UDvPdyfwRdI/AAAAAAAALEI/JIvOf_6qVvs/s1600/facebook500.png' alt='facebook'/></a>
<a href='http://www.twitter.com/WIKITECHNOL' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='http://4.bp.blogspot.com/-whgSYuUXFK4/UDvPif88foI/AAAAAAAALEk/o1h9AQUEN48/s1600/twitter.png' alt='twitter'/></a>
<a href='http://plus.google.com/107244857879006042054' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='http://3.bp.blogspot.com/-CKC8VpnLV4E/UDvPe3F-JeI/AAAAAAAALEM/CfdjTmmDbHU/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='http://1.bp.blogspot.com/-W-z8yV2MJAo/UDvPgCvvFaI/AAAAAAAALEU/EM36zCqtyNE/s1600/pinterest.png' alt='pinterest'/></a>
<a href='http://feeds.feedburner.com/WIKITECHNOL' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='http://3.bp.blogspot.com/-0kc9eDAEfVY/UDvPhDm2DuI/AAAAAAAALEg/xTrMT70Lutw/s1600/rss.png' alt='rss'/></a>
</div>
</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.


{ 0 comments... read them below or add one }

Post a Comment