Blogger Blog Ke Liye Top 5 Email Subscribe Widget Ki HTML CSS Coding

8

 Ek blog ke liye email subscribe widget kitna important hota hai yeh toh aap sab ko pata hi hai. Lakin blogger ke default subscription box attractive nahi hote. Ek stylish email subscribe widget na sirf aapke blog ko attractive look deta hai balki sath me readers ko bhi attract karta hai. Aaj is post me mein aapko kuch stylish subscribe widget ki coding bta raha hu. Agar aapko pasand aye toh apne blog me add kar sakte hai. Jo bhi apko pasand aye apne blog ke color matching ke hisab se aap choose karke apne blog me laga sakte hai.

email subscribe widget

Me aapko jo subscribe widget list ki coding bata raha hu. Yeh fast loading hai jise aapke blog ke page loading time par koi farak nahi padhega.

Blogger Blog Ke Liye Top 10 Email Subscribe Widget

1: Light Blue Style Email Subscribe Widget

black red subscribe widget

<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; } #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 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> <br /> <div class=”hbzsub”> <div class=”hbzsocial-icons”> <ul> <li class=”social-facebook”><a href=”https://draft.blogger.com/[Fb%20url]” target=”_blank” title=”Facebook”>Facebook</a></li> <li class=”social-twitter”><a href=”https://draft.blogger.com/[Twitter%20url]” target=”_blank” title=”Twitter”>Twitter</a></li> <li class=”social-gplus”><a href=”https://draft.blogger.com/[Google+%20url]” target=”_blank” title=”Google+”>Google+</a></li> <li class=”social-pinterest”><a href=”https://draft.blogger.com/[Pinterest%20url]” target=”_blank” title=”Pinterest”>Pinterest</a></li> <li class=”social-rss”><a href=”https://draft.blogger.com/[RSS%20url]” 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=ijankari’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true” target=”popupwindow”> <input name=”uri” type=”hidden” value=”ijankari” /> <input name=”loc” type=”hidden” value=”en_US” /> <input id=”hbzemailbox” name=”email” placeholder=”Your Email” required=”” type=”text” /> <input id=”hbzemailbutton” title=”” type=”submit” value=”Subscribe” /> </form> </div> </div> </div> </div>

2: Newsletter Subscribe Widget

blue style email subscribe box

<style type=”text/css”> #LS-Newsletter1-Box { background: url(http://4.bp.blogspot.com/-YL316LAsD9U/UEEicRMg7tI/AAAAAAAALSo/huvi3XqnnIo/s1600/Newsletter-1.png)no-repeat scroll center center transparent; height: 143px; width: 264px; } form#LS-Newsletter1-Form { display: block; margin: 0; padding-left: 71px; padding-top: 63px; } form#LS-Newsletter1-Form #s { background: transparent; border: none; color: #444242; font-family: georgia; font-size: 15px; font-style: italic; height: 21px; margin-top: -2px; padding-left: 2px; vertical-align: top; width: 160px; outline:0px; } form#LS-Newsletter1-Form #sbutton { background: transparent; border: none; cursor: pointer; height: 21px; padding-right: 45px; position: relative; left: 92px; top: 28px; width: 35px; } </style> <br /> <div id=”LS-Newsletter1-Box”> <form action=”ijankari” id=”LS-Newsletter1-Form” method=”post”> <input id=”s” name=”email” onblur=”if (this.value == &quot;&quot;) {this.value = &quot;Enter Your E-Mail&quot;;}” onfocus=”if (this.value == &quot;Enter Your E-Mail&quot;) {this.value = &quot;&quot;}” type=”email” value=”Enter Your E-Mail” /> <input id=”sbutton” src=”http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif” type=”image” /> </form> </div> </div>

3: Red Stylish Email Subscription Box

red subscribe box

<style type=”text/css”> .hbzsignup-form { background: transparent url(“https://1.bp.blogspot.com/-Y_e_B9KzB-c/Vr6fNXna_BI/AAAAAAAAALo/dk3TFDW2-4I/s1600/Email-bg.jpg”) no-repeat scroll center center / 250px 150px; height: 150px; width: 250px; margin: 10px auto 60px auto; } .hbzform-inner h4 { text-align: center; font-weight: 900; font-size: 15px; color: rgb(255, 255, 255); padding: 10px; } .hbzemailform { margin: 120px auto 5px; width: 215px; } #hbzemailbox { background: #FEFEFE none repeat scroll 0% 0%; border: medium none; font: 12px/12px “HelveticaNeue”,Helvetica,Arial,sans-serif; margin-right: 5px; box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186); padding: 7px; } #hbzemailbutton { background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%; box-shadow: 0px 0px 2px rgb(182, 37, 32) inset; border: medium none; color: #FFF; cursor: pointer; font: 13px/13px “HelveticaNeue”,Helvetica,Arial,sans-serif; padding: 6px; border-radius: 5px; } #hbzemailbutton:hover { background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%; } .hbzsocial-icons { margin: 20px 0 0; overflow: hidden; display: block; text-align: center; } .hbzsocial-icons ul { display: inline-block; margin: 0 auto !important; text-align: center; padding: 0px } .hbzsocial-icons ul li { background: transparent !important; border: none !important; float: left; list-style-type: none !important; margin: 0 4px 10px !important; padding: 0 !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: 38px; overflow: hidden; text-indent: -999px; transition: all 0.25s linear 0s; width: 38px; } .hbzsocial-icons ul li.social-facebook a { background-color: #3b5998; background-position: -60px 3px; } .hbzsocial-icons ul li.social-twitter a { background-color: #00aced; background-position: -253px 3px; } .hbzsocial-icons ul li.social-gplus a { background-color: #dd4b39; background-position: -93px 3px; } .hbzsocial-icons ul li.social-pinterest a { background-color: #cb2027; background-position: -157px 3px; } .hbzsocial-icons ul li.social-rss a { background-color: #F87E12; background-position: -189px 3px; } .hbzsocial-icons ul li a:hover { background-color: #333; } .hbzsocial-like { display: block; text-align: center; } .hbzsocial-like tbody, .hbzsocial-like tbody tr { display: block; } .hbzfb-likes { display: inline-block; padding-bottom: 15px; margin-right: 5px; } .hbztw-follow { display: inline } </style> <div> <div class=’hbzsignup-form’> <div class=’hbzform-inner’> <h4>Sign Up for Email Updates</h4> </div> <div class=’hbzemailform’> <form action=’http://feedburner.google.com/fb/a/mailverify’ id=’subscribe’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ijankari&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ target=’popupwindow’> <input name=’uri’ type=’hidden’ value=’ijankari’/> <input name=’loc’ type=’hidden’ value=’en_US’/> <input id=’hbzemailbox’ name=’email’ required=” type=’text’ placeholder=’Enter your email…’/> <input id=’hbzemailbutton’ title=” type=’submit’ value=’Sign up’/> </form> </div> </div> <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> <table class=’hbzsocial-like’> <tbody> <tr> <td class=’hbzfb-likes’> <div id=”fb-root”> </div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4″; fjs.parentNode.insertBefore(js, fjs); }(document, ‘script’, ‘facebook-jssdk’)); </script> <div class=”fb-like” data-href=”[Fb url]” data-layout=”button_count” data-action=”like” data-show-faces=”false” data-share=”false”> </div> </td> <td class=’hbztw-follow’> <a href=”[Twitter url]” class=”twitter-follow-button” data-show-count=”true” data-show-screen-name=”false” data-dnt=”true”>@[Twitter Username]</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’); </script> </td> </tr> <tbody> </table> </div>

4:  Blue Style Email Subscribe Widget

blue style subscription widget

 

<style type=”text/css”> .hbzsub { background-color: rgb(255, 255, 255); width: 100%; height: 100%; border: 1px dashed #ddd; } .hbzsube { color: rgb(255, 255, 255); background-color: rgb(11, 172, 227); padding: 10px 0; text-align: center; font: bold 15px “trebuchet MS”, “Tahoma”; width: 100%; } .hbzemailform { width: 235px; margin: 10px auto; } #hbzemailbox { background-color: #FFF; color: #747474; width: 130px; border: 1px solid #D8D8D8; padding: 7px; height: 18px; display: inline-block; vertical-align: top; box-shadow: inset 0px 0px 5px #c2c2c2; } #hbzemailbutton { background-color: rgb(243, 93, 92); border: 1px solid rgb(215, 84, 83); color: rgb(255, 255, 255); width: 85px; font: bold 13px “trebuchet MS”, “Tahoma”; padding: 7px; text-align: center; cursor: pointer; display: inline-block; } #hbzemailbutton:hover { background-color: #E64C4B; border: 1px solid #BF4A49; } .hbzsignup-form { margin-top: 15px; } .hbzsocial-icons { overflow: hidden; text-align: center; 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 5px !important; } .hbzsocial-icons ul li a { 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%; display: block; height: 34px; overflow: hidden; text-indent: -999px; transition: all 0.25s linear 0s; width: 34px; } .hbzsocial-icons ul li a:hover { background-color: #aeaeae !important; } .hbzsocial-icons ul li.social-facebook a { background-position: -62px 1px; background-color: #3b5998; } .hbzsocial-icons ul li.social-twitter a { background-position: -254px 1px; background-color: #00aced; } .hbzsocial-icons ul li.social-gplus a { background-position: -95px 0px; background-color: #dd4b39; } .hbzsocial-icons ul li.social-pinterest a { background-position: -159px 1px; background-color: #cb2027; } .hbzsocial-icons ul li.social-rss a { background-position: -190px 0px; background-color: #F87E12; } </style> <div class=”hbzsub”> <div class=”hbzsube”>Join Our Free Newsletter</div> <div class=’hbzsignup-form’> <div class=’hbzemailform’> <form action=’http://feedburner.google.com/fb/a/mailverify’ id=’subscribe’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ijankari&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ target=’popupwindow’> <input name=’uri’ type=’hidden’ value=’ijankari’ /> <input name=’loc’ type=’hidden’ value=’en_US’ /> <input id=’hbzemailbox’ name=’email’ required=” type=’text’ placeholder=’Your Email address’ /> <input id=’hbzemailbutton’ title=” type=’submit’ value=’Join Us’ /> </form> </div> <div class=”hbzsube”>Sociliaze with Us</div> <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 style=”width: 230px; margin: 0px auto;”> <div id=”fb-root”></div> <script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = “//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.6″; fjs.parentNode.insertBefore(js, fjs); }(document, ‘script’, ‘facebook-jssdk’)); </script> <div class=”fb-page” data-href=”[Fb url]” data-width=”230″ data-small-header=”true” data-adapt-container-width=”true” data-hide-cover=”false” data-hide-cover=”true” data-show-facepile=”true”> <div class=”fb-xfbml-parse-ignore”> <blockquote cite=”[Fb url]”><a href=”[Fb url]”>[Fb Page Name]</a></blockquote> </div> </div> </div> </div> </div>

5: Light Simple Subscribe Widget

light-simple-widget

<style type=”text/css”> #LS-Newsletter1-Box { background: url(http://4.bp.blogspot.com/-YL316LAsD9U/UEEicRMg7tI/AAAAAAAALSo/huvi3XqnnIo/s1600/Newsletter-1.png)no-repeat scroll center center transparent; height: 143px; width: 264px; } form#LS-Newsletter1-Form { display: block; margin: 0; padding-left: 71px; padding-top: 63px; } form#LS-Newsletter1-Form #s { background: transparent; border: none; color: #444242; font-family: georgia; font-size: 15px; font-style: italic; height: 21px; margin-top: -2px; padding-left: 2px; vertical-align: top; width: 160px; outline:0px; } form#LS-Newsletter1-Form #sbutton { background: transparent; border: none; cursor: pointer; height: 21px; padding-right: 45px; position: relative; left: 92px; top: 28px; width: 35px; } </style> <br /> <div id=”LS-Newsletter1-Box”> <form action=”ijankari” id=”LS-Newsletter1-Form” method=”post”> <input id=”s” name=”email” onblur=”if (this.value == &quot;&quot;) {this.value = &quot;Enter Your E-Mail&quot;;}” onfocus=”if (this.value == &quot;Enter Your E-Mail&quot;) {this.value = &quot;&quot;}” type=”email” value=”Enter Your E-Mail” /> <input id=”sbutton” src=”http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif” type=”image” /> </form> </div> </div>

Mujhe ummeed hai best subscription box ke yeh list aapko pasand ayegi. Agar apko apne blog me email subscribe widget lagane me koi problem aati hai toh mujhe comment karke puch sakte hai.

8 COMMENTS

LEAVE A REPLY