Email Subscription Box With Hover Effect for Blogger

Email Subscription Box With Hover Effect for Blogger Hover Style Email Subscription Box for Blogger Blog Learn how to add a super cool email subscription widget in your blogger blog, all the emails will be delivered by FeedBurner. Beautiful Email Subscription Box for Blogger Blog


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 Google's 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, let's 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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=TrickzBucket&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='TrickzBucket' />
<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='FACEBOOK URL' 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='TWITTER URL' 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='GOOGLE+ URL' 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='PINTEREST URL' 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='RSS URL' 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>

    Customization:

    • Change TrickzBucket with your feedburner ID.
    • Change colored values with your social media URLs.
    • Change RSS URL with your blog's 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.

      COMMENTS

      BLOGGER: 2
      Loading...
      Name

      Blogger Templates,5,Blogger Tips,31,Blogger Widgets,9,Computer Tricks,3,Downloads,30,WordPress Tricks,5,
      ltr
      item
      Trickz Bucket: Email Subscription Box With Hover Effect for Blogger
      Email Subscription Box With Hover Effect for Blogger
      Email Subscription Box With Hover Effect for Blogger Hover Style Email Subscription Box for Blogger Blog Learn how to add a super cool email subscription widget in your blogger blog, all the emails will be delivered by FeedBurner. Beautiful Email Subscription Box for Blogger Blog
      https://4.bp.blogspot.com/-DxCu6mVWbwI/VsOSD6P-NKI/AAAAAAAADrc/lKH9-iTHt0E/s640/Email%2BSubscription%2BBox%2Bfor%2BBlogger.png
      https://4.bp.blogspot.com/-DxCu6mVWbwI/VsOSD6P-NKI/AAAAAAAADrc/lKH9-iTHt0E/s72-c/Email%2BSubscription%2BBox%2Bfor%2BBlogger.png
      Trickz Bucket
      http://www.trickzbucket.com/2016/02/email-subscription-box-with-hover-effect-for-blogger.html
      http://www.trickzbucket.com/
      http://www.trickzbucket.com/
      http://www.trickzbucket.com/2016/02/email-subscription-box-with-hover-effect-for-blogger.html
      true
      6195765242120428356
      UTF-8
      Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy