How to Add Email Subscription Widget to Blogger (Elegant & Clean)

Probably, Email Subscription Widget is a must have widget for any blog. By giving an option to subscribe via email, your readers can get daily updates in their mail box. You can add a email subscription widget to your blogger’s sidebar (recommended) or footer area & easily increase your readers and mailing list.

Add Email Subscription Widget to Blogger

Add Email Subscription Widget to Blogger

Why a Email Subscription Widget?
If you want to convert your first time visitors to your regular readers than this widget works it perfectly. Visitors have to put their email and click on Subscribe. After that they’ll get the fresh content directly in their mailbox. Ofcourse, you’ll get your targeted audience and traffic, views, comments and share without much promotion.

Add Email Subscription Widget to Blogger

In this post, i am sharing a one click html code to add email subscription widget for your blogger blog. This widget is all made of html and don’t require any additional css and therefore it is fast to load. Also, it’s clean in design. So, lets add it to your blogger blog.

How to Add Email Subscription Widget to Blogger?

  • Go to Blogger Dashboard & Click on Your Blog.
  • Now Head Over to Layout & Tap on Add a Widget
  • Select Html & javascript From the List
  • Give Your Favourite Title (or leave it blank) & Copy-Paste the Below Html Code There.
    <style type='text/css'>#sidebar-subscribe-box{background:url( repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url( repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url( no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url( repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}</style>
    <div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Subscribe to our email newsletter & receive updates right in your inbox.</p><div class="sidebar-subscribe-box-form"><form action="" class="sidebar-subscribe-box-form" method="post" onsubmit="'', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="zgamerx" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div></div></div>
  • Now, Save it & Thats All. Say Thanks to Me

Its highly recommended to add a email subscription widget to your blogger blogto boost up the engagement. Its a damn awesome way to promote your content without a long walk.

ALSO READ:How to Add Hover Effect to Blogger Images

                        Disable or Stop Copy Function on Blogger

Be Sociable, Share!
(Visited 25 times, 1 visits today)
Thank you for visiting must share the article with others. If you want to suggest other tips and tricks , then feel free to share it with us by leaving a comment below. share your experience after reading the article and Share if you care and daily check our website for best updates...

Be the first to comment

Leave a Reply

Your email address will not be published.