Email Subscription Box With Hover Effect for Blogger
Building an email list always plays a vital role, specially if you are a pro blogger, because it ensures that people will never miss out your post if they have signed up or subscribed to your RSS feeds. Just like social media following, having an email list is must for any blogger. And Googles Blogger.com platform does not have catchy widgets for this purpose. By default, it comes up with email subscription that is not professional at all. It looks like search box instead of email subscription box. So in this post, I will show you how you can add a beautiful email subscription box widget, which is way more professional than default one. This widget have some decent features as well, it has all popular social media follow buttons including Facebook, Twitter, Google+ and Pinterest. It also have RSS feeds link as well. You can always change the text, by default it says Get Free Updates in your Inbox. It also has one cool feature which is hover effect. As you can see in screenshot above, its super cool and all the emails are delivered by FeedBurner which is totally free. I will not waste your time anymore, lets learn how to add a beautiful email subscription widget with social follow buttons and hover effect in your blogger blog!
How to Add Email Subscription Box in Blogger?
1. Go to Blogger Dashboard >> Layout >> Add a Gadget
2. Select HTML/JavaScript gadget
3. Copy the below code and paste it in code area.
<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=TrickzBucket', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true
style=margin: 0pt; target=popupwindow>
<input name=uri type=hidden value=TrickzBucket />
<input name=loc type=hidden value=en_US />
<input class=tbimailbox 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=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/AVvXsEjYpcVdOxyd3yaMNwc2fCVTwSXDSjSnK7kTqheZhid_Cr_ZBP3HEZF71gHOnUfj80WUrmNuLDE6-ic58-o4Sndvo-2roq4Xo7YN9eTkDB7XCdjOZjOK3PeZnXzXUNF5LmC7RGmGt8t3YbE/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/AVvXsEhgeAxzm07IM5tXXPGcj_a8T8NoQRJpZfWGLwnZMo2ex6j10UkvqczNHqD6goGIEBPlFYDaA69aMyG6s6M6KxNrS49vqzETaAvgOcJTi54sdpNqtttLlIBFm95iL9ogXhVknUaT9RCJT4c/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/AVvXsEh6KuDt2o7SR8sRs7WsR652ACi5cX4aYc7mHduahyphenhyphenMUbTh2DJl4h_aEsbyKC8XF91IfEoBYWh6u9vTDlFImUsihNOuXjt1AkFedx5gwb_koOOl2COZZuqT2Sf1Og_SuzrMvAQp2vgSpoFM/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/AVvXsEjxfjQu_eORhzJ6rkEjD5hTGK_jFmibHP6DUu0CivYbCXWVBnsV56pinyPa8VdRcT-6ACQWagLSDvF_vF4McZhz22JCoey6_fJ4UuY0AHpq4at7_u_cEzellDpADV34P7khBAbaENoOXZs/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/AVvXsEjlBTrG3q5rRpy9hNBJmPc1fvTRUTto7woFwzPUM_5mao5g8J9014nC5qSEAIppllmtu_unViBqDqXLejvleZYwEsLIxpd5VLt_2eosz7wVJVl0ShftL0GQSbjjFb8ECNo6yu5DuRLqx7E/s1600/rss.png alt=rss/></a>
</div>
</div>Customization:
- Change TrickzBucket with your feedburner ID.
- Change colored values with your social media URLs.
- Change RSS URL with your blogs RSS link.
Final Words:
This is one hack of the good widget for your blogger blog to start building an email list. This widget was created and shared by a blog called LabStricke. And I loved this widget because of the hover effect. So try this widget and leave your comments below.