Email subscription widgets for Blogger will turn your readers into subscribers fast and easily. Have you added a blogger email subscription widget yet? You need to automate your readers to change them to your content marketing strategy through email marketing. Presently, thousands of bloggers are using the Feed Burner email subscription service, But as for me, I prefer MailChimp’s one-click subscription. This is an excellent way to increase traffic to your website by embedding a subscribe to newsletter widget that tells the visitor you have more to offer. When you let your readers subscribe to your blog, they will get updates directly to their email inbox. That’s when returning visitors generate a good SEO rank for your website.
Today I’m going to share with you a Blogger subscribe box widget/gadget with a Name and Email filling box style. From this people can subscribe to your blog to get your latest updates on their email account.
Without much time, let me take you one-on-one to the top good-looking responsive blogger newsletter email subscription widgets. I have labeled them with letters hence making it easy for you to apply them easily to your preferred blogger blogs. Choose a color and design of the subscription widget that corresponds to your blog design.
The Number one Simple and Responsive newsletter widget is as below. It’s a sidebar blogger subscription widget. It’s well-optimized to avoid a loading time increase. The page insights will read the same even after employing the below widget.
A. Stylish Gradual Email Subscribe Widget For Blogger
The Number one Simple and Responsive newsletter widget is as below. It’s a sidebar blogger subscription widget. It’s well-optimized to avoid a loading time increase. The page insights will read the same even after employing the below widget.
Widget Code.
<style>/* Email Subscription Widget Semdeals.com *///@media(max-width:400px) {.sbox{width:109%!important;}}//@media(max-width:1024px) and (min-width:400px) {.sbox{width:106.5%!important;}}.sbox {background:#009abe;text-align:center;width:100%;}.sbox span {color:#fff;font-family:roboto;font-size:27px;}.sbox .small {font-size:18px;}input.boxinput::placeholder {color:#fff;}.sbox .hatespam {font-size:15px;}.sbox .boxinput::placeholder {color:#fff;}.sbox .boxinput {background:rgba(0,0,0,0.4);color:#fff;border:none;padding-top:13px;padding-bottom:13px;font-family:roboto;margin-bottom:10px;outline:none;transition:.3s;width:86%;text-align:center;border-radius:4px;}.sbox .boxsubmit {box-shadow:0px 0px 31px 0px rgba(0,0,0,0.2);width:86%;text-align:center;padding-top:13px;padding-bottom:13px;background:#fff;outline:none;border:none;color:#009abe;font-family:roboto;cursor:pointer;border-radius:4px;}.sbox .boxsubmit:active {background:rgba(0,0,0,0.6);color:#fff;}.sbox {border-radius:8px!important;padding:0!important;border:none!important;}.sbox .widget-content {margin:0!important;}#sidebar-wrap .widget {overflow-x:hidden;}.sbox {background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)!important;width:100%;}.sbox .boxsubmit {box-shadow:none!important;border-radius:2px!important;color:#764ba2!important;}.sbox .boxinput {border-radius:2px!important;}</style><div class='sbox wow rubberBand'><center><br /><span class='icon'><img height='auto' src='https://1.bp.blogspot.com/-9-fJaPMneBk/WlMlqltvtOI/AAAAAAAACEM/qEy8USIBQJwky4GJixaeBxlk2WDor-JPgCLcBGAs/s1600/email.png' width='150px'/></span><br/></center><span>Newsletter</span><br /><br /><span class='small'>Get SEO secret tips newsletter directly in your inbox!</span><br /><br /><center><form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=Semdeals', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true' target='popupwindow'><input class='boxinput' name='EMAIL' placeholder='Your Email Address' type='email' required/><input class='boxsubmit' type='submit' value='Submit'/><input name='uri' type='hidden' value='shoutersplanet'/><input name='loc' type='hidden' value='en_US'/></form><br /><span class='hatespam'>Get Ranked Today</span><br /><br /></center></div> Adding To Blogger
- Go to Design > Page Elements.
- Click Add A Gadget.
- In Add A Gadget window, select HTML/Javascript.
- Copy the code below and paste it inside the content box.
- Save the gadget.
- Drag the gadget and reposition it under the r Blog Posts gadget.
- Click Save button (toright-handnd corner).
B. Email Subscription Widget With Social Buttons
Even the Blogger platform provides tanEmail subscription widgets for bloggers but that’s not as appealing as Onsidered in a custom stylish email subscription box with social media integration.
This is one of the best subscription widgets for bloggers.
Widget Code.
<style type="text/css"> .hbzsub { background-color: rgb(87, 98, 105); width: 100%; height: 100%; padding: 5px; box-shadow: 0px 0px 5px rgb(87, 98, 105); } .hbzform-inner { text-align: center; color: rgb(255, 255, 255); font: bold 16px "trebuchet MS","Tahoma"; } .hbzemailform { width: 240px; margin: 10px auto; } #hbzemailbox { background-color: #798187; color: #FFF; width: 208px; border: 1px solid #697780; padding: 15px; text-align: center; height: 18px; box-sizing: content-box; } #hbzemailbutton { background-color: rgb(243, 93, 92); border: 1px solid rgb(215, 84, 83); color: rgb(255, 255, 255); width: 240px; font: bold 16px "trebuchet MS","Tahoma"; padding: 15px; text-align: center; height: 50px; margin: 10px auto; cursor: pointer; } #hbzemailbutton:hover { background-color: #E64C4B; border: 1px solid #BF4A49; } .hbzsignup-form { margin-top: 15px; } .hbzsocial-icons { overflow: hidden; text-align: center; border-bottom: 1px solid rgb(133, 133, 133); width: 230px; display: block; margin: 20px auto; } .hbzsocial-icons ul { margin: 0px auto !important; text-align: center; padding: 0px !important; display: inline-block; } .hbzsocial-icons ul li { background: transparent none repeat scroll 0% 0% !important; border: medium none !important; float: left; list-style-type: none !important; padding: 0px !important; margin: 0px 2px !important; } .hbzsocial-icons ul li::before, .hbzsocial-icons ul li::after { display: none !important; } .hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover { background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; height: 34px; overflow: hidden; text-indent: -999px; transition: all 0.25s linear 0s; width: 34px; } .hbzsocial-icons ul li.social-facebook a { background-position: -62px 1px; } .hbzsocial-icons ul li.social-facebook a:hover { background-color: #3b5998; } .hbzsocial-icons ul li.social-twitter a { background-position: -254px 1px; } .hbzsocial-icons ul li.social-twitter a:hover { background-color: #00aced; } .hbzsocial-icons ul li.social-gplus a { background-position: -95px 0px; } .hbzsocial-icons ul li.social-gplus a:hover { background-color: #dd4b39; } .hbzsocial-icons ul li.social-pinterest a { background-position: -159px 1px; } .hbzsocial-icons ul li.social-pinterest a:hover { background-color: #cb2027; } .hbzsocial-icons ul li.social-rss a { background-position: -190px 0px; } .hbzsocial-icons ul li.social-rss a:hover { background-color: #F87E12; } </style> <div class="hbzsub"> <div class="hbzsocial-icons"> <ul> <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li> <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li> <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li> <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li> <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li> </ul> </div> <div class='hbzsignup-form'> <div class='hbzform-inner'> <h4>Subscribe to my Newsletter</h4> </div> <div class='hbzemailform'> <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Blog uri]'/> <input name='loc' type='hidden' value='en_US'/> <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email'/> <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/> </form> </div> </div> </div>Configuration The Subscription Box In Blogger.
- Replace [Your Blog uri] with Your blog Uri which is your Feed title. You can get it by visiting http://feedburner.google.com and then navigating to Publicize > Email Subscription and finding uri value in the given box. For eg: http://feedburner.google.com/fb/a/mailverify?uri=Semdeals and <input name=’uri’ type=’hidden’ value=’Seomdeals‘/>
- Replace [Fb url] with your Facebook page URL. For eg: https://www.facebook.com/seodeals
- Replace [Twitter url] with your Twitter page URL. For eg: http://www.twitter.com/seodeals
- Replace [Google+ url] with your Google+ page or account URL. For eg: https://plus.google.com/#
- Replace [RSS url] with your RSS URL. For eg: http://feeds.feedburner.com/Semdeals
- Replace [Pinterest url] with your Pinterest URL.
- Replace [Twitter Username] with your Twitter account username. For eg: @Seomdeals
- Replace [FB Page Name] with your Facebook Page Name. For eg: semdeals
Note: Minimum Sidebar width required – 230px
C: Best Email Responsive
<style type='text/css'>#sidebar-subscribe-box { background: url(<a class="vglnk" href="http://1.bp.blogspot.com/-IyEBRR8yOQQ/UBhYdBd23PI/AAAAAAAAFTU/aeW3JdAlrCs/s1600/colored-strip.png" rel="nofollow"><span>http</span><span>://</span><span>1</span><span>.</span><span>bp</span><span>.</span><span>blogspot</span><span>.</span><span>com</span><span>/-</span><span>IyEBRR8yOQQ</span><span>/</span><span>UBhYdBd23PI</span><span>/</span><span>AAAAAAAAFTU</span><span>/</span><span>aeW3JdAlrCs</span><span>/</span><span>s1600</span><span>/</span><span>colored</span><span>-</span><span>strip</span><span>.</span><span>png</span></a>) repeat scroll 0 0 transparent; border: 1px solid #aaa; border-radius: 3px; padding: 3px 0;}.sidebar-subscribe-box-wrapper { background: url(<a class="vglnk" href="http://2.bp.blogspot.com/-tUlo5p5gP8o/UBhYciGNgwI/AAAAAAAAFTM/x22pIuNLVPw/s1600/bg-pattern.png" rel="nofollow"><span>http</span><span>://</span><span>2</span><span>.</span><span>bp</span><span>.</span><span>blogspot</span><span>.</span><span>com</span><span>/-</span><span>tUlo5p5gP8o</span><span>/</span><span>UBhYciGNgwI</span><span>/</span><span>AAAAAAAAFTM</span><span>/</span><span>x22pIuNLVPw</span><span>/</span><span>s1600</span><span>/</span><span>bg</span><span>-</span><span>pattern</span><span>.</span><span>png</span></a>) 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(<a class="vglnk" href="http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png" rel="nofollow"><span>http</span><span>://</span><span>1</span><span>.</span><span>bp</span><span>.</span><span>blogspot</span><span>.</span><span>com</span><span>/-</span><span>JMYdQsIa9WQ</span><span>/</span><span>UDZqxqqrTEI</span><span>/</span><span>AAAAAAAAFho</span><span>/</span><span>AocEv70U8K8</span><span>/</span><span>s1600</span><span>/</span><span>sprites</span><span>.</span><span>png</span></a>) 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(<a class="vglnk" href="http://1.bp.blogspot.com/-n5s9Bu0JCgg/UA_AfQ5qLkI/AAAAAAAAFMU/G9FOuh4SP7k/s0/bg-pattern.png" rel="nofollow"><span>http</span><span>://</span><span>1</span><span>.</span><span>bp</span><span>.</span><span>blogspot</span><span>.</span><span>com</span><span>/-</span><span>n5s9Bu0JCgg</span><span>/</span><span>UA</span><span>_</span><span>AfQ5qLkI</span><span>/</span><span>AAAAAAAAFMU</span><span>/</span><span>G9FOuh4SP7k</span><span>/</span><span>s0</span><span>/</span><span>bg</span><span>-</span><span>pattern</span><span>.</span><span>png</span></a>) 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="<a class="vglnk" href="http://feedburner.google.com/fb/a/mailverify?uri=Joecalih" rel="nofollow"><span>http</span><span>://</span><span>feedburner</span><span>.</span><span>google</span><span>.</span><span>com</span><span>/</span><span>fb</span><span>/</span><span>a</span><span>/</span><span>mailverify</span><span>?</span><span>uri</span><span>=</span><span>labstrike</span></a>"class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('<a class="vglnk" href="http://feedburner.google.com/fb/a/mailverify?uri=Joecalih" rel="nofollow"><span>http</span><span>://</span><span>feedburner</span><span>.</span><span>google</span><span>.</span><span>com</span><span>/</span><span>fb</span><span>/</span><span>a</span><span>/</span><span>mailverify</span><span>?</span><span>uri</span><span>=</span><span>labstrike</span></a>','popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="labstrike" /><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>D: Email Subscription box widget | Letter Style
<style type=”text/css”>#LS-Newsletter4-Box {background: url(http://1.bp.blogspot.com/-65PvPzNlUCo/UEEijEFGUdI/AAAAAAAALTI/5UGflvDEMJ8/s1600/Newsletter-5.png)no-repeat scroll center centertransparent;height: 299px;width: 408px;}form#LS-Newsletter4-Form {display: block;margin: 0;padding-left: 71px;padding-top: 63px;}form#LS-Newsletter4-Form #s {background: transparent;border: none;color: #444242;font-family: georgia;font-size: 15px;font-style: italic;height: 28px;margin-top: 37px;vertical-align: top;width: 275px;outline:0px;position: relative;left: -25px;}form#LS-Newsletter4-Form #d {background: transparent;border: none;color: #444242;font-family: georgia;font-size: 15px;font-style: italic;height: 28px;margin-top: 38px;vertical-align: top;width: 275px;outline:0px;position: relative;left: -25px;}form#LS-Newsletter4-Form #sbutton {background: transparent;border: none;cursor: pointer;height: 43px;position: relative;left: -36px;top: 25px;width: 144px;border-radius: 5px;}</style><div id=”LS-Newsletter4-Box”><form id=”LS-Newsletter4-Form” action=”#” method=”post”><input id=”d” name=”name” value=”Enter Your Name”onfocus=’if (this.value == “Enter Your Name”) {this.value = “”}’onblur=’if (this.value == “”) {this.value = “Enter Your Name”;}’/><input type=”email” id=”s” name=”email” value=”Enter Your E-Mail”onfocus=’if (this.value == “Enter Your E-Mail”) {this.value = “”}’onblur=’if (this.value == “”) {this.value = “Enter Your E-Mail”;}’/><input type=”image” src=”http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif” id=”sbutton”/></form></div>E. Blogger Newsletter Email Subscription Widgets
Email subscribers are a good traffic source, and ultimately more traffic helps in more revenue. But ever you have wondered how you can increase the number of subscribers of your blog? Yes, you read the right thing, you can increase the number of subscribers of your blog by 2 times to 5 times by changing the location of the email subscription box.
<style>#responsiveness {padding: 15px 25px 20px;line-height: 35px;text-align: center;background: none repeat scroll 0% 0% #1E1E1E;margin: -15px;border-radius: 3px;}#responsiveness h5 {font-size: 17px;font-weight: 700;font-family: ‘PT Sans’,sans-serif;color: #FFF;padding: 0px;text-transform: uppercase;line-height: 1.2;margin: 10px 0px 15px;letter-spacing: 0.01em;text-align: left;}input.placer {color: #333;padding: 15px;font-size: 14px;font-family: PT Sans,sans-serif;border: 1px solid #EEE;transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;margin: 10px auto 0px;border-radius: 3px;width: 89%;}input.button {background-color: #BA1A00;color: #FFF;font-weight: 400;cursor: pointer;border-radius: 4px;text-transform: uppercase;font-family: PT Sans,serif;padding: 10px 15px;border: medium none;font-size: 16px;width: 100%;margin: 15px auto 0px;}input.button:hover{background: #FFF;color: #333;}</style><link href=’http://fonts.googleapis.com/css?family=PT+Sans:400,700′ rel=’stylesheet’ type=’text/css’/><div id=’responsiveness’><p style=” line-height:0px; font-size:7px; font-weight:bold; text-align:right”><a style=”color:#D3D3D3;” href=”http://www.seorunk.com”>widgets</a></p><h5>Hume Email Par Subscribe Kare</h5><form action=’http://feedburner.google.com/fb/a/mailverify’ method=’post’target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=Joecalih‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=550′);return true”><input class=”placer” type=’text’ name=’email’ placeholder=’enter your name’ /><input class=”placer” type=’text’ name=’email’ placeholder=’enter your email id’ /><input type=”hidden” value=”supportmeindia” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/><input value=”Subscribe Now” class=”button” type=”submit” /></form></div>F. Blogger Subscription Box Below Posts
Add it to Blogger
- Go to Blogger > Design > Edit HTML
- Backup your template
- Check the “Expand Widget Template” box
- Search for this,
<data:post.body/>
Paste Below the code
5. Just below it paste this code,
<style> #mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}</style><b:if cond='data:blog.pageType == "item"'><div id='mbt-sub-box'><h1>Subscribe To Get FREE Tutorials!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=seoblur', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='tntbystc'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div></b:if>- Now replace http://feedburner.google.com/fb/a/mailverify?uri=joecalih with your Feedburner Email Feed link. Get it by visiting your FeedBurner account then navigate to Publicize and then to Email Subscriptions.
- Replace Seorunk with your feed title. It appears at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=seorunk
6. Save your template and you are all set!
A subscription box widget helps blog owners to grow their mailing lists. That is probably the reason why, Most pro-bloggers are using unique and attractive email subscription boxes and have lots of Subscribers. Believe me, the more subscribers, the more views. The more views, the more backlinks you get. As you get more backlinks, the SEO ranks in search engines. I know you know the impact of Email Newsletter Widgets in a blogger template.
Thank You for being part of this good article. I hope that I have provided some good SEO information that can help you Design your Blogger Blog Best for ranking. In case you face any difficulty while implementing the following fields please reach me by Commenting below Or Contact Me.
