An interesting Email Subscription Form widget for Blogger
If you do not have a reader on your blog, then it does not make any sense. The eligibility of your blog will be completed only when there are plenty of readers and subscribers in your blog. But to get Subscriber you will have to give your readers the choice of options. Otherwise your readers can leave the blog but they will not be able to subscribe. And this email subscription is a simple way of getting a subscribe home.
Most top-level bloggers or developers use Email Subscription Form on their site using FeedBurner. Because FeedBurner is a Feed Reader site from Google. For this, developers have given it a higher priority. What we share today is a very interesting email subscription form. It includes Email Subscription options as well as reader count and social media. Which will help your social media sub-cyclist to take home.
How to add to the blog:
- First log in to your blogger account
- Click Layout from the blogger dashboard
- Now click on Add Gadget from right side layout. See the below image -
- Then click on HTML / JavaScript.
- Now copy the code below and paste it into the HTML / JavaScript box
[code start]
<center>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=kawsar360', 'popupwindow', 'scrollbars=yes,width=70%,height=520');return true" class="login">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij7wLgderMSINsA22kaGgijK_fKRgWdTP8EYVUiIqRq2mH0wEs2CU-JAY1iqXaLRUXg2leC-Ku81iAeLa0N73p1vlYxXey-QaRNsjkUJhxgI3PobvY7gQBLt1bVUqnag0F4ilNPH06vGE/s1600/Mail.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="2" color="white"><span style="line-height:10px"> Sign up and receive our free Newsletter </span></font></center><br/>
<input type="hidden" value="kawsar360" name="uri" />
<input type="email" name="email" class="login-input" placeholder="Email Address" autofocus />
<input type="hidden" name="loc" value="en_US" />
<input type="submit" value="Subscribe" class="login-submit" />
<div class="login-submit2"><p><a href="https://feeds.feedburner.com/kawsar360"><img src="https://feeds.feedburner.com/~fc/kawsar360?bg=96B8ED&fg=000000&anim=0&label=listeners" height="26" width="88" style="border:0" alt="" /></a></p></div>
<div class="social-media-icons" id="social-icons">
<ul>
<li class="media_icon"><a href="#" target="_blank" title="Facebook"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLz2bVMkY737UQA1OD8d1I7HIt1jgm-9HKBeq2GlI6nMA_J3_TU4-HjnhjqsFmKX708rvZ1uROadnhFOIZ012_AljesDMb70yiS-GQ8KTCXkRjAWWsSmmfeRTRabCsZv4IEvGmPGE1c6nn/s1600/Facebook.png" /></a></li>
<li class="media_icon"><a href="#" target="_blank" title="Twitter"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKTNNKulTp5btovsJHtS3M8zEdOkzbWyAgd86vm3YIA28GcAVvtG_YcVOKfQwi0DtbHBtYENemPJS2xIpyjXB4cKa7nk4tfkvlDJQrrBgVlbbuT64EA_cxiSR2r6S9_KI86MJ707K61S8/s1600/Twitter.png" /></a></li>
<li class="media_icon"><a href="#" target="_blank" title="Google+"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqy6cydFk9_-ecjcXmWBAIkSLwsutV3G8heB6SAo1IwK8s7_f2hwz5JVdRezJVj-2O1umuuKQzqlVsLYT-XWvFgge85TIW2Oc5psQJzYt_sMLLLR1Moh2CwInHctoE-ZLBVH8aG2h5CP6/s1600/Google.png" /></a></li>
<li class="media_icon"><a href="#" target="_blank" title="Youtube"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdOy9RybC6OCXl10gT8Er2rAwQwrTnXB-KpLQ1rqI-4JdnIlZ3C9yJ5gm4DqZaanJvV-qMyoVNkwNH92uYOPxNPJRlQa0QamRqbAKSSQ7qp4lLnA2C2AlzhQdRnKqH1L8bMsy10ryuzJt1/s1600/Youtube.png" /></a></li>
<li class="media_icon"><a href="#" target="_blank" title="Rss"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWCzvXKRTtNSlFe1QpJAnAfzMaQ_jYrwmdDfQPTnhl440axDdgmTsIhj3mMLtz7U47ERzAgTf6CNmQxWNJCPuHAeec6MBBgrnk52KIhyphenhyphen_SShlPg3FxnP9xWUX29WD-qzgZVRYoSDZw0juD/s1600/Rss.png" /></a></li>
</ul>
</div>
</form>
</center>
<style>
a.tt{position:relative;z-index:24;color:#3CA3FF;font-weight:bold;text-decoration:none}
a.tt span{display:none}
a.tt:hover{z-index:25;color:#aaaaff;background:}
a.tt:hover span.tooltip{display:block;position:absolute;top:0;left:0;padding:15px 0 0 0;width:200px;color:#993300;text-align:center;filter:alpha(opacity:90);KHTMLOpacity:0.90;MozOpacity:0.90;opacity:0.90}
a.tt:hover span.top{display:block;padding:30px 8px 0;background:url(bubble.gif) no-repeat}
a.tt:hover span.middle{/* different middle bg for stretch */
display:block;padding:0 8px}
a.tt:hover span.bottom{display:block;padding:3px 8px 10px;color:#548912}
::-moz-focus-inner{padding:0;border:0}
:-moz-placeholder{color:#bcc0c8!important}
::-webkit-input-placeholder{color:#bcc0c8}
:-ms-input-placeholder{color:#bcc0c8!important}
.input{font:12px/20px "Lucida Grande",Verdana,sans-serif;color:#404040;background:#ebc9a2}
.input{font-family:inherit;font-size:12px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.login{padding:18px 20px;width:87%;background:#3f65b7;background-clip:padding-box;border:1px solid #172b4e;border-bottom-color:#142647;border-radius:5px;background-image:-webkit-radial-gradient(cover,#437dd6,#74868c);background-image:-moz-radial-gradient(cover,#437dd6,#74868c);background-image:-o-radial-gradient(cover,#437dd6,#74868c);background-image:radial-gradient(cover,#437dd6,#74868c);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 1px 1px rgba(255,255,255,0.1),0 2px 10px rgba(0,0,0,0.5);box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 1px 1px rgba(255,255,255,0.1),0 2px 10px rgba(0,0,0,0.5)}
.login-input{display:block;width:90%;height:37px;margin-bottom:20px;padding:0 9px;color:white;text-shadow:0 1px black;background:#2b3e5d;border:1px solid #15243b;border-top-color:#0d1827;border-radius:4px;background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 1px rgba(255,255,255,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 1px rgba(255,255,255,0.2)}
.login-input:focus{outline:0;background-color:#32486d;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 0 4px 1px rgba(255,255,255,0.6);box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 0 4px 1px rgba(255,255,255,0.6)}
.lt-ie9 .login-input{line-height:35px}
.login-submit{display:block;width:40%;height:27px;margin-bottom:15px;font-size:13px;line-height:10px;font-weight:bold;color:#294779;text-align:center;text-shadow:0 1px rgba(255,255,255,0.3);background:#adcbfa;background-clip:padding-box;border:1px solid #284473;border-bottom-color:#223b66;border-radius:4px;cursor:pointer;background-image:-webkit-linear-gradient(top,#d0e1fe,#96b8ed);background-image:-moz-linear-gradient(top,#d0e1fe,#96b8ed);background-image:-o-linear-gradient(top,#d0e1fe,#96b8ed);background-image:linear-gradient(to bottom,#d0e1fe,#96b8ed);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.5),inset 0 0 7px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.15);box-shadow:inset 0 1px rgba(255,255,255,0.5),inset 0 0 7px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.15);float:left}
.login-submit2{margin-top:-7px;float:right}
.login-submit:active{background:#a4c2f3;-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,0.4),0 1px rgba(255,255,255,0.1);box-shadow:inset 0 1px 5px rgba(0,0,0,0.4),0 1px rgba(255,255,255,0.1)}
.login-help{text-align:center}
.login-help > a{font-size:11px;color:#d4deef;text-decoration:none;text-shadow:0 -1px rgba(0,0,0,0.4)}
.login-help > a:hover{text-decoration:underline}
#social-icons{margin-bottom:-20px;margin-left:0;height:50px;width:100%;clear:both;z-index:2;position:relative}
.social-media-icons{display:table}
.social-media-icons ul{text-align:center;padding:5px 5px 0 0
list-style-image:none;list-style-position:outside;list-style-type:none}
.social-media-icons ul{margin-bottom:0;padding:0}
.social-media-icons li.media_icon{margin-left:6px;padding-left:0!important;background:none!important;display:inline;align:center}
.social-media-icons li:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(-360deg);-moz-transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}</style>
[code end]
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij7wLgderMSINsA22kaGgijK_fKRgWdTP8EYVUiIqRq2mH0wEs2CU-JAY1iqXaLRUXg2leC-Ku81iAeLa0N73p1vlYxXey-QaRNsjkUJhxgI3PobvY7gQBLt1bVUqnag0F4ilNPH06vGE/s1600/Mail.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="2" color="white"><span style="line-height:10px"> Sign up and receive our free Newsletter </span></font></center><br/>
<input type="hidden" value="kawsar360" name="uri" />
<input type="email" name="email" class="login-input" placeholder="Email Address" autofocus />
<input type="hidden" name="loc" value="en_US" />
<input type="submit" value="Subscribe" class="login-submit" />
<div class="login-submit2"><p><a href="https://feeds.feedburner.com/kawsar360"><img src="https://feeds.feedburner.com/~fc/kawsar360?bg=96B8ED&fg=000000&anim=0&label=listeners" height="26" width="88" style="border:0" alt="" /></a></p></div>
<div class="social-media-icons" id="social-icons">
<ul>
<li class="media_icon"><a href="#" target="_blank" title="Facebook"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLz2bVMkY737UQA1OD8d1I7HIt1jgm-9HKBeq2GlI6nMA_J3_TU4-HjnhjqsFmKX708rvZ1uROadnhFOIZ012_AljesDMb70yiS-GQ8KTCXkRjAWWsSmmfeRTRabCsZv4IEvGmPGE1c6nn/s1600/Facebook.png" /></a></li>
<li class="media_icon"><a href="#" target="_blank" title="Twitter"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKTNNKulTp5btovsJHtS3M8zEdOkzbWyAgd86vm3YIA28GcAVvtG_YcVOKfQwi0DtbHBtYENemPJS2xIpyjXB4cKa7nk4tfkvlDJQrrBgVlbbuT64EA_cxiSR2r6S9_KI86MJ707K61S8/s1600/Twitter.png" /></a></li>
<li class="media_icon"><a href="#" target="_blank" title="Google+"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqy6cydFk9_-ecjcXmWBAIkSLwsutV3G8heB6SAo1IwK8s7_f2hwz5JVdRezJVj-2O1umuuKQzqlVsLYT-XWvFgge85TIW2Oc5psQJzYt_sMLLLR1Moh2CwInHctoE-ZLBVH8aG2h5CP6/s1600/Google.png" /></a></li>
<li class="media_icon"><a href="#" target="_blank" title="Youtube"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdOy9RybC6OCXl10gT8Er2rAwQwrTnXB-KpLQ1rqI-4JdnIlZ3C9yJ5gm4DqZaanJvV-qMyoVNkwNH92uYOPxNPJRlQa0QamRqbAKSSQ7qp4lLnA2C2AlzhQdRnKqH1L8bMsy10ryuzJt1/s1600/Youtube.png" /></a></li>
<li class="media_icon"><a href="#" target="_blank" title="Rss"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWCzvXKRTtNSlFe1QpJAnAfzMaQ_jYrwmdDfQPTnhl440axDdgmTsIhj3mMLtz7U47ERzAgTf6CNmQxWNJCPuHAeec6MBBgrnk52KIhyphenhyphen_SShlPg3FxnP9xWUX29WD-qzgZVRYoSDZw0juD/s1600/Rss.png" /></a></li>
</ul>
</div>
</form>
</center>
<style>
a.tt{position:relative;z-index:24;color:#3CA3FF;font-weight:bold;text-decoration:none}
a.tt span{display:none}
a.tt:hover{z-index:25;color:#aaaaff;background:}
a.tt:hover span.tooltip{display:block;position:absolute;top:0;left:0;padding:15px 0 0 0;width:200px;color:#993300;text-align:center;filter:alpha(opacity:90);KHTMLOpacity:0.90;MozOpacity:0.90;opacity:0.90}
a.tt:hover span.top{display:block;padding:30px 8px 0;background:url(bubble.gif) no-repeat}
a.tt:hover span.middle{/* different middle bg for stretch */
display:block;padding:0 8px}
a.tt:hover span.bottom{display:block;padding:3px 8px 10px;color:#548912}
::-moz-focus-inner{padding:0;border:0}
:-moz-placeholder{color:#bcc0c8!important}
::-webkit-input-placeholder{color:#bcc0c8}
:-ms-input-placeholder{color:#bcc0c8!important}
.input{font:12px/20px "Lucida Grande",Verdana,sans-serif;color:#404040;background:#ebc9a2}
.input{font-family:inherit;font-size:12px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.login{padding:18px 20px;width:87%;background:#3f65b7;background-clip:padding-box;border:1px solid #172b4e;border-bottom-color:#142647;border-radius:5px;background-image:-webkit-radial-gradient(cover,#437dd6,#74868c);background-image:-moz-radial-gradient(cover,#437dd6,#74868c);background-image:-o-radial-gradient(cover,#437dd6,#74868c);background-image:radial-gradient(cover,#437dd6,#74868c);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 1px 1px rgba(255,255,255,0.1),0 2px 10px rgba(0,0,0,0.5);box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 1px 1px rgba(255,255,255,0.1),0 2px 10px rgba(0,0,0,0.5)}
.login-input{display:block;width:90%;height:37px;margin-bottom:20px;padding:0 9px;color:white;text-shadow:0 1px black;background:#2b3e5d;border:1px solid #15243b;border-top-color:#0d1827;border-radius:4px;background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 1px rgba(255,255,255,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 1px rgba(255,255,255,0.2)}
.login-input:focus{outline:0;background-color:#32486d;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 0 4px 1px rgba(255,255,255,0.6);box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 0 4px 1px rgba(255,255,255,0.6)}
.lt-ie9 .login-input{line-height:35px}
.login-submit{display:block;width:40%;height:27px;margin-bottom:15px;font-size:13px;line-height:10px;font-weight:bold;color:#294779;text-align:center;text-shadow:0 1px rgba(255,255,255,0.3);background:#adcbfa;background-clip:padding-box;border:1px solid #284473;border-bottom-color:#223b66;border-radius:4px;cursor:pointer;background-image:-webkit-linear-gradient(top,#d0e1fe,#96b8ed);background-image:-moz-linear-gradient(top,#d0e1fe,#96b8ed);background-image:-o-linear-gradient(top,#d0e1fe,#96b8ed);background-image:linear-gradient(to bottom,#d0e1fe,#96b8ed);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.5),inset 0 0 7px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.15);box-shadow:inset 0 1px rgba(255,255,255,0.5),inset 0 0 7px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.15);float:left}
.login-submit2{margin-top:-7px;float:right}
.login-submit:active{background:#a4c2f3;-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,0.4),0 1px rgba(255,255,255,0.1);box-shadow:inset 0 1px 5px rgba(0,0,0,0.4),0 1px rgba(255,255,255,0.1)}
.login-help{text-align:center}
.login-help > a{font-size:11px;color:#d4deef;text-decoration:none;text-shadow:0 -1px rgba(0,0,0,0.4)}
.login-help > a:hover{text-decoration:underline}
#social-icons{margin-bottom:-20px;margin-left:0;height:50px;width:100%;clear:both;z-index:2;position:relative}
.social-media-icons{display:table}
.social-media-icons ul{text-align:center;padding:5px 5px 0 0
list-style-image:none;list-style-position:outside;list-style-type:none}
.social-media-icons ul{margin-bottom:0;padding:0}
.social-media-icons li.media_icon{margin-left:6px;padding-left:0!important;background:none!important;display:inline;align:center}
.social-media-icons li:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(-360deg);-moz-transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}</style>
[code end]
- Finally Save the Gadget.
Customization:
- Place the name of your Feedburner account in place of red marking kawsar360 (place 04) in the box above.
- Give the address of social media in # Pink Colors
No comments
If any problem, please comment us below the comment box.