I am really surprised to see amazing results when i applied new email subscription widget to my blog's header. Today i will share the same email subscription widget with all of you to increase your blog subscription rate. The main advantage of getting email ids of your visitor is the most secure way for increasing your traffic in long term prospects because many of visitor comes on our blog when they looking for what they need then fly away. They would not even remember name of the blog.
So only one solution for this problem is to make sure that visitor subscribe your blog when they visit to your blog and are notified of the new post daily by email and they return again to visit our blog.
Live Demo On MY BLog
How to add Email subscription/signup widget to your blog
- Go to Blogger Dashboard > Layout > Add Gadget > HTML/Javascript.
- Add following code in box.
<center><div id="feature_box"> <div id="sleek-subscribe"> <div class="newsheadline"><span>Sign-up</span> for <cite>FREE</cite> Regular Newsletter.</div><div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feed Burner Feed Name', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 400px; font-size: 15px;" id="email" name="email" value="Your Custom Text Goes Here" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> <input type="hidden" value="Your Feed Burner Feed Name Here Too" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> </div> </div></center><style>/*---:[ feature box ]:---*/#feature_box { background: #eee; border-style: solid; border-color: #ddd; }/*---:[ home page teasers ]:---*/.teaser a.teaser_link:hover { text-decoration: underline; }.teaser .teaser_author { font-style: italic; } .teaser .teaser_author .author { font-style: normal; text-transform: uppercase; letter-spacing: 1px; }.teaser .edit_post { letter-spacing: 1px; } .teaser .teaser_author a, .teaser a.teaser_comments, .teaser a.teaser_category, .teaser .edit_post a { text-transform: uppercase; letter-spacing: 1px; color: #888; border-bottom: 1px solid #eee; } .teaser .teaser_author a { font-style: normal; } .teaser .format_teaser a { text-decoration: underline; } .teaser .format_teaser a:hover { text-decoration: none; }/*---:[ border package ]:---*/#header, .post_box, .teasers_box, #footer, .image_box, .custom_box, #feature_box, #archive_intro, .prev_next, #comment_nav_2 { border-width: 0; }/*Featured Box*/.custom #feature_box{background:#f0f4f4; border:1px solid #d9eaea; padding:10px 15px 5px;} /* Subscription Box */#sleek-subscribe{display: block; margin:0 auto; } .newsheadline {padding-left:20px;color:#222; font-size:20px; line-height:50px; float:left; font-weight:bold;} .newsheadline span{font-size:38px; color:#444; line-height:14px; font-family:"Trebuchet MS"; font-weight:normal;} .newsheadline cite{font-style:normal; color:#f00;}.signform{background:url('images/form-bg.jpg') no-repeat;padding:0 0 10px 100px; float:right; } .txt2, .txt2:focus{width:140px; font-size:15px; background:#fff; color:#92c3c3; border:1px solid #E36B0A; margin:0 5px; float:left; padding:10px; width:160px; border-radius: 10px;} .btn2, .btn2:focus {background:#E36B0A; margin:0 5px; padding:8px 10px 9px; border:1px solid #AD5513; color:#fff; font-size:15px; border-radius:10px;} .btn2:hover{background:#6689b0; }#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:34px;} #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:none; 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:57px; }</style><!--[if IE]> <style> #email-news-subscribe .email-box input.subscribe{ background: #FFCA00; } </style> <![endif]-->
Customizations -
NOTE : The widget is designed according to INFOZHELPER width. So you have to readjust according to your blog's width.
I have highlighted the width: 400px section in green color so that you can adjust it easily.
very nice ........ and very usefull
ReplyDelete