Add Mashable Style Email Subscription Widget in your Blogger to attract your Blog visitors and convert into Blog readers
Go To Blogger > Design Choose "Add a gadget" Select HTML/JavaScript Widget Paste the following code inside it,
The demo of the Email Subscription Widget can be seen at the end of this post.
This Email Subscription Widget will help you to convert your Blog Visitors into Blog readers.
You have to change the Highlighted part of Username with yours
If you are unable to add the code in your Blogger you can hire me for Smaller costs Starting from 5$. I can help you in changing your blogger theme, Adding Special gadgets, Your Blog content writing etc. If you are interested in my Services Click Here
[<style> /* Social Widget */ #MBT-mashable-bar { border: 0; margin-bottom: 10px; margin: 0 auto; width:300px; } .fb-likebox { background: #fff; padding: 10px 13px 0 10px; border-right: 1px solid #D8E6EB; border-left: 1px solid #D8E6EB; border-bottom: 1px solid #D8E6EB; margin-top:15px; height:45px; } .googleplus { background: #F5FCFE; border-top: 1px solid #FFF; border-bottom: 1px solid #ebebeb; border-right: 1px solid #D8E6EB; border-left: 1px solid #D8E6EB; border-image: initial; font-size: .90em; font-family: "Arial","Helvetica",sans-serif; color: #000; padding: 9px 11px; line-height: 1px;} .googleplus span { color: #000; font-size: 11px; position: absolute; display:inline-block; margin: 9px 70px;} .g-plusone { float: left;} .gplus { background: #fff; padding: 0px; border: 0px solid #C7DBE2; margin-bottom:-13px;} .twitter { background: #EEF9FD; padding: 10px; border: 1px solid #C7DBE2; border-top: 0;} #mashable { background: #EBEBEB; border: 1px solid #CCC; border-top: 1px solid white; padding: 2px 8px 2px 3px; text-align: right; border-image: initial;} #mashable .author-credit {} #mashable .author-credit a { font-size: 10px; font-weight: bold; text-shadow: 1px 1px white; color: #1E598E; text-decoration:none;} #email-news-subscribe .email-box{ padding: 5px 10px; font-family: "Arial","Helvetica",sans-serif; border-top: 0; border-right: 1px solid #C7DBE2; border-left: 1px solid #C7DBE2; border-image: initial; height:35px;} #email-news-subscribe .email-box input.email{ background:#FFFFFF; border: 1px solid #dedede; color: #999; padding: 7px 10px 8px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border-image: initial; font-family: "Arial","Helvetica",sans-serif;} #email-news-subscribe .email-box input.email:focus{color:#333} #email-news-subscribe .email-box input.subscribe{ background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); font-family: "Arial","Helvetica",sans-serif; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:white; text-shadow:#d08d00 1px 1px 0; padding:7px 14px; margin-left:3px; font-weight:bold; font-size:12px; cursor:pointer; border-image: initial;} #email-news-subscribe .email-box input.subscribe:hover{ background: #ff9b00; background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00); background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00)); filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); outline:0;-moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00)); background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%); -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:#FFFFFF; text-shadow:#d08d00 1px 1px 0} #other-social-bar { background-color: #D8E6EB; box-shadow: 0 1px 1px #FFFFFF inset; padding: 0px; font-family: "Arial","Helvetica",sans-serif; font-weight:bold; overflow: hidden; border: 1px solid #B6D0DA; height:37px; } #other-social-bar ul {list-style: none outside none; padding-left: 4px;} #other-social-bar .other-follow { float: left; color:#1E598E; overflow: hidden; height:20px; padding:5px; width: 270px;} #other-social-bar .other-follow ul { list-style: none outside none; padding-left: 4px;} #other-social-bar .other-follow ul li { font-size: 12px; font-weight: bold; display:inline; border:0; text-shadow: 1px 1px white;} #other-social-bar .other-follow ul li a { font-size: 12px; color:#1E598E; font-weight: bold; display:inline; text-shadow: 1px 1px white;} #other-social-bar .other-follow li { font-size: 12px; font-weight: bold; display:inline; border:0; text-shadow: 1px 1px white;} #other-social-bar .other-follow li a { font-size: 12px; color:#1E598E; font-weight: bold; display:inline; text-shadow: 1px 1px white;} #other-social-bar .other-follow li.my-rss { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR5M2ugSQhi90tMRmxFBAT5xWIRWKXSJ0bAJmownVB5HVPwLtjKtahLu5BRyOZS4al9GCLtPgP1kzUYZruSUZ9PskCJ_LDWW0SseiSacy4rq13UcQmUIjU6ZOY5oS7jbxvtm6g4kgrcgA/s400/rss-16x16.png') no-repeat transparent; line-height: 1; padding: 0px 3px 1px 20px; width: 60px; margin-bottom:0px; margin-left:5px;} #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{ text-decoration:none; } #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{ text-decoration:underline; } #other-social-bar .other-follow li.my-twitter { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNzR78m7MqE2I-rPE7tDTV1ShoyyXcHzmwNHkBfwY9lxxJYfXd5DcGUQGkVPwpwLneH9CBKFgZ1hx_dTPpScTvYNIiSpx3kokcZ-_VBcmKIzpqrObIjv2c24c2eOGyvWA_LR1NCI3GkkY/s400/twitter%2527.png') no-repeat transparent; line-height: 1; padding: 0px 3px 1px 20px; width: 60px; margin-bottom:0px;} #other-social-bar .other-follow li.my-gplus { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZOC_XJXyRmv6dOqsNrfnTqPxMB0x1CLV0sEHXHKwI1_3nI8ILlPWjNDv9P21lKixCTzZ9XbMi1eAcTo4sEyFUU3bO7E2vVbUc0-12wOQZuYg5yj1flh6W1cP15bAVjahXys7DZot30rY/s400/gplus-16x16.png) no-repeat transparent; line-height: 1; width: 60px; padding: 0px 3px 1px 20px; margin-bottom:0px;} </style> <!--[if IE]> <style> #email-news-subscribe .email-box input.subscribe{ background: #FFCA00; } </style> <![endif]--> <!--begin of social widget--> <br /> <div style="margin-bottom: 10px;"> <div id="MBT-mashable-bar"> <!-- Begin Widget --> <br /> <div class="gplus"> <link href="https://plus.google.com/111121903130358474387" rel="publisher"></link> <script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script> <!-- Place this tag where you want the badge to render --> <g:plus height="131" href="https://plus.google.com/111121903130358474387" margin="0px" theme="light" width="300"></g:plus> </div> <div class="fb-likebox"> <!-- Facebook --> <iframe frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=http://facebook.com/bloggertricks&send=false&layout=standard& width=200px&show_faces=false&action=like&colorscheme=light& font&height=100px&" style="border: currentColor; overflow: hidden;"></iframe> </div> <div class="googleplus"> <!-- Google --> Recommend us on Google!<br /> <div class="g-plusone" data-size="medium"> </div> <script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script> </div> <div class="twitter"> <!-- Twitter --> <iframe class="twitter-follow-button" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter_tweet_button_0& lang=en&link_color=&screen_name=mybloggertricks&show_count=& show_screen_name=&text_color=" style="height: 20px; width: 300px;" title=""></iframe> </div> <div id="email-news-subscribe"> <!-- Email Subscribe --> <br /> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" style="font-size: 12px; width: 150px;" type="text" value="Enter Your Email here.." /> <input name="uri" type="hidden" value="tntbystc" /> <input name="loc" type="hidden" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <br /> <ul class="other-follow"> <li class="my-rss"> <a href="http://feeds.feedburner.com/Username" rel="nofollow" target="_blank" title="RSS">RSS Feed</a> </li> <li class="my-twitter"> <a href="http://twitter.com/Username" rel="author" target="_blank" title="twitter">Twitter</a> </li> <li class="my-gplus"> <a href="https://plus.google.com/111121903130358474387" rel="author" target="_blank" title="Google Plus">Google Plus</a> </li> </ul> </div> <div arial="" helvetica="" id="mashable" sans-serif="" style="background: rgb(235, 235, 235); border-image: initial; border: 1px solid rgb(204, 204, 204); font-size: 10px; padding: 1px 8px 1px 3px; text-align: right;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.mybloggertricks.com/" target="_blank">Blogger Widgets »</a> <a href="http://www.videoadept.blogspot.com/" target="_blank">Video Adept »</a></span></div> </div> <!-- End Widget --> </div> <!--end of social widget--> </div>]
Recommend us on Google!
Excellent article, thanks for sharing Arun
ReplyDeleteHappy to know that you like it :)
Delete