• Tutorials
  • Blogger Themes
  • Blogger SEO
  • Blogger Widgets
  • Internet
  • Mobile Phones
  • Gadgets
BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
  • Home
  • Blogger
  • SEO
  • Themes
  • Internet
  • Widgets
  • Gadgets
  • About
  • search
    close

Add Simple CSS Email Subscription Widget for Blogger

 Rohitkumar  03:20  Leave a Comment
Tweet
CSS Email Subscription Widget for Blogger

Today we are gonna see how to add simple CSS Email Subscription Widget for Blogger. We have many posts on CSS HTML Codings. This widget is very easy to install, there is no need of HTML Editing

In last post we have discusessed about adding a "Add CSS FeedBurner Subscription Box v3 to Blogger" Its really a nice CSS3 Feedburner Subscription Box. But now here I'm gonna post a Simple Wide Classic but Full Premium and Professional Posts SignUp widget [Subscription Widget]

Now If you want something more professional, Pro Quality widget, then you are at right place on TechEthix.
Just check our live demo for this CSS Subscription Box.

Live Demo [please Subscribe us]




Want to add this widget to your blog ? [Absolutely Free]

Just follow these simple steps :

1. Go to Blogger > Layout > Click Add Gadget > Select HTML/Java Script
2. Copy the following code, Paste in the box, Hit Save.
<style> .email { clear: both; width: 100%; margin: 10px 0; } .emailbutton { background: #f7f8f9; background: -webkit-linear-gradientundefinedtop, #f7f8f9 0%, #e9e9e9 100%); background: -moz-linear-gradientundefinedtop, #f7f8f9 0%, #e9e9e9 100%); background: -o-linear-gradientundefinedtop, #f7f8f9 0%, #e9e9e9 100%); background: -ms-linear-gradientundefinedtop, #f7f8f9 0%, #e9e9e9 100%); background: linear-gradientundefinedtop, #f7f8f9 0%, #e9e9e9 100%); filter: progid:DXImageTransform.Microsoft.gradientundefined startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 ); border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 6px 12px; margin:0; -webkit-box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgbaundefined223,223,223,0.4); -moz-box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgbaundefined223,223,223,0.4); box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgbaundefined223,223,223,0.4); color: #888 !important; text-shadow: 0 1px 0 #fff; line-height: 1.2; cursor: pointer; font-size: 13px; font-weight: bold; text-decoration: none !important; } .emailbutton:hover { background: #f1f1f1; background: -webkit-linear-gradientundefinedtop, #f1f1f1 0%, #e0e0e0 100%); background: -moz-linear-gradientundefinedtop, #f1f1f1 0%, #e0e0e0 100%); background: -o-linear-gradientundefinedtop, #f1f1f1 0%, #e0e0e0 100%); background: -ms-linear-gradientundefinedtop, #f1f1f1 0%, #e0e0e0 100%); background: linear-gradientundefinedtop, #f1f1f1 0%, #e0e0e0 100%); filter: progid:DXImageTransform.Microsoft.gradientundefined startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 ); text-decoration:none !important; } .emailform { position: relative; width: 270px; background: #fff; margin: 0 auto; -webkit-box-shadow: 1px 1px 2px #dfdfdf; -moz-box-shadow: 1px 1px 2px #dfdfdf; box-shadow: 1px 1px 2px #dfdfdf; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 1px solid #ddd; } .emailinput { width: 200px; height:18px; margin: 0 auto; padding: 8px 40px 8px 10px; border:none; background: none; font-family: georgia; font-style: italic; font-size: 14px; color: #666; } .emailbutton { -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; -webkit-border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; padding: 9px; position: absolute; right: -2px; top: -1px; bottom: -1px; display:block; line-height:16px; } .emailbutton{ padding: 8px !important; } .emailinput { padding-right: 70px !important; width: 170px !important; } </style> <br /> <div class="email"> <form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=techethix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="uri" type="hidden" value="techethix" /> <input name="loc" type="hidden" value="en_US" /> <input class="emailinput" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if undefinedthis.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." /> <input class="emailbutton" title="" type="submit" value="SignUp" /> </form> </div> <div style="text-align: right;"> <span style="font-family: Georgia, serif;"><span style="font-size: xx-small; line-height: 20px;"><a href="http://techethix.blogspot.com/2013/07/css-email-subscription-widget-blogger.html" target="_blank">get this widget</a></span></span></div>
Before saving you have to change the techethix to your blog's Feed name.
After clicking save you can move your widget to any desired position you want.
Its done , go to your blog and check our simple css professional subscription box / signup widget.

Please Don't remove our attribution link from this widget [Be Honest Blogger]

 Recommendation   Our News Subscription Boxes [CSS and Professional Styles]


Don't Forget to add our Badge to your blog and subscribe to our News letter for Unique and latest blogger tricks directly into your inbox !
Keep sharing our tricks with your friends ! 

    Sharing is Caring!

  • Facebook
  • Twitter
  • Google+
  • StumbleUpon
  • linkedIn
  • StumbleUpon

Rohitkumar A

Posted In css, subscription box, widget
Subscribe Now

Get Latest Posts Directly Into You Inbox

0 comments:

Post a Comment

Newer Post Older Post Home
Do you like my work?

Buy Me a Coffee!
Blogger Hero

Popular Posts

  • 3 Easy Ways to Make Money Online Without Investment
  • How to Add Google Fonts to Blogger Template
  • How to Disable Adblock for Blogger
  • High PR Forums That Can Bring You High Traffic
  • Materiality - Material Design Blogger Template
  • How to add Custom Fonts in Blogger or Any Website
Email Newsletter

Get Latest Posts Directly Into You Inbox

Labels

Android blogger browser Buy computer css drop down menu Gadgets Google how to internet Laptops Mobile Phone phone responsive reviews SEO smartphone Social Media Social Share Widgets subscription box Template tool trick widget Wireless youtube
Powered by Blogger.

Popular Posts

  • High PR Forums That Can Bring You High Traffic
  • Sensational v2.0 Responsive Blogger Template
  • BloggerHero Free Premium Blogger Template
  • [Fixed] Facebook Share Thumbnail Is not Showing on Blogger
  • Materiality - Material Design Blogger Template
  • How to Add Facebook Open Graph for Blogger

Contact Form

Name

Email *

Message *

  • Home
  • About
  • Contact
  • Sitemap
  • Services
  • Request
  • Privacy Polciy

© 2013 BloggerHero.com. All Rights Reserved. Designed with Love for Everyone!