4 Stylish Email Subscription Widgets For Blogger
Updated on: August 27, 2016
Email subscription widget is a subscription shape for blogger sidebar provided past times feedburner, this widget attention your interested visitors to larn latest updates from your spider web log via e-mail. People merely larn inward their electronic mail address together with and then click on the "Subscribe" push together with then, they would larn all your blog's updates correct on their email's Inbox. These widgets non entirely increase your traffic but besides helps you lot to grow a loyal community of readers.
Benefits Of Email Subscription Widget
Email Subscription box is besides considered every bit the best ways to promote a website. Subscription widget attention you lot inward creating an active community of readers together with boost your spider web log traffic. More traffic = More AdSense earning. This widget attention you lot to deliver latest posts to your customers instantaneously via Email, together with the best portion of this widget is that you lot volition larn social media links complimentary inward it which are going to attention you lot to connect alongside your customers via social media channels.
How To Add Email Subscription Widget To Blogger
Even blogger furnish the Email subscription widget for blogger but that was non every bit much appealing every bit a custom fashionable electronic mail subscription box alongside social media integration. Custom email subscription widget furnish electronic mail subscription service every bit good every bit social media service. Here are approximately best subscription widgets for blogger, thence select according to the pattern of your spider web log together with follow the steps given below:
<style type="text/css"> .hbzsignup-form { background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_w5Lmw75XJg0n7du2som3ik7GXn1uBoDYfb4YIEDcnLx29eut6NRrfHQUQnoyaiBBfv_YyWXkPdCv1kTyJx5D1ix3HvgqCncXFQFVP-e_qcMFzrb8ws2ZRqPVaLHteUQ_owjrdcFNBox2/s1600/Email-bg.jpg") no-repeat scroll centre centre / 250px 150px; height: 150px; width: 250px; margin: 10px machine 60px auto; } .hbzform-inner p { text-align: center; color: #fff; padding: 10px; font: bold 18px "trebuchet MS","Tahoma"; } .hbzemailform { margin: 120px machine 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; box-sizing: content-box; height: 12px; vertical-align: top; display: inline-block; } #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; height: 27px; display: inline-block; } #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 machine !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::before, .hbzsocial-icons ul li::after { display: none !important; } .hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKx2-SMaHzw3YHb7mTdVjeH30-laGA8ifbp27yI-eVr6L2xbqwj_IC5kGRcaUUvb_abdVBMf8-6fMOssCxZqn0TSwNRY8r4DLAQyZLMY4jzO0R-_5uoxX0cteaI-Qo0phGqoRzI_jdamea/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'> <p>Sign Up for Email Updates</p> </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='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=4 Stylish Email Subscription Widgets For Blogger>Facebook</a></li> <li class="social-twitter"><a href="[Twitter url]" target="_blank" title=4 Stylish Email Subscription Widgets For Blogger>Twitter</a></li> <li class="social-gplus"><a href="[Google+ url]" target="_blank" title=4 Stylish Email Subscription Widgets For Blogger>Google+</a></li> <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title=4 Stylish Email Subscription Widgets For Blogger>Pinterest</a></li> <li class="social-rss"><a href="[RSS url]" target="_blank" title=4 Stylish Email Subscription Widgets For Blogger>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">Follow @[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> 
<style type="text/css"> .hbzsub { background-color: #1E293B; width: 100%; height: 100%; box-shadow: 0px 0px 10px rgb(30, 41, 59); } .hbzemailform { width: 239px; margin: 10px auto; } .hbzform-inner h4 { color: rgb(255, 255, 255); text-align: center; padding: 10px; font: bold 18px/40px "trebuchet MS","Tahoma"; } #hbzemailbox { background-color: #FFF; border: 1px venture #FFF; border-radius: 7px 0px 0px 7px; height: 20px; padding: 6px; box-sizing: content-box; } #hbzemailbutton { background-color: #F0553B; border: 1px venture #F0553B; color: #FFF; height: 34px; border-radius: 0px 7px 7px 0px; margin-left: -4px; font-weight: 600; cursor: pointer; } #hbzemailbutton:hover { background-color: #1E293B; border: 1px venture #FFF; box-shadow: 0 0 5px #ddd; } .hbzsocial-like { background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUKKrvR3_qEZ2houZ9gAIl3z3fcTTfgQLRRhRSWLQqVu_5_41voyMG5tpWdx6yOa392qqOqnWjFCwRUukCneQr-leyb2GNWp6l8v293la16dh9PUrz1pW9pgOIZyTKQ8K08s9-QfTHRqzK/s1600/Facebook-twitter-rectangle.png") no-repeat scroll centre centre / 250px 157px; width: 250px; height: 120px; margin: 10px auto; } .hbzfb-likes { margin-top: 90px; margin-left: 20px; position: absolute; display: block; box-shadow: 0px 0px 10px rgba(9, 42, 87, 0.73); } .hbztw-follow { display: block; margin-left: 152px; position: absolute; margin-top: 89px; box-shadow: 0 0 10px rgba(2, 81, 173, 0.59); height: 20px; } </style> <div class="hbzsub"> <div class='hbzsignup-form'> <div class='hbzform-inner'> <h4>Get Posts In Your Inbox</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='Enter Your Email Here...'/> <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/> </form> </div> </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="false" data-show-screen-name="false" data-dnt="true">Follow @[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> 
<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 venture #697780; padding: 15px; text-align: center; height: 18px; box-sizing: content-box; } #hbzemailbutton { background-color: rgb(243, 93, 92); border: 1px venture 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 venture #BF4A49; } .hbzsignup-form { margin-top: 15px; } .hbzsocial-icons { overflow: hidden; text-align: center; border-bottom: 1px venture rgb(133, 133, 133); width: 230px; display: block; margin: 20px auto; } .hbzsocial-icons ul { margin: 0px machine !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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKx2-SMaHzw3YHb7mTdVjeH30-laGA8ifbp27yI-eVr6L2xbqwj_IC5kGRcaUUvb_abdVBMf8-6fMOssCxZqn0TSwNRY8r4DLAQyZLMY4jzO0R-_5uoxX0cteaI-Qo0phGqoRzI_jdamea/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=4 Stylish Email Subscription Widgets For Blogger>Facebook</a></li> <li class="social-twitter"><a href="[Twitter url]" target="_blank" title=4 Stylish Email Subscription Widgets For Blogger>Twitter</a></li> <li class="social-gplus"><a href="[Google+ url]" target="_blank" title=4 Stylish Email Subscription Widgets For Blogger>Google+</a></li> <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title=4 Stylish Email Subscription Widgets For Blogger>Pinterest</a></li> <li class="social-rss"><a href="[RSS url]" target="_blank" title=4 Stylish Email Subscription Widgets For Blogger>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>
<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 venture #D8D8D8; padding: 7px; height: 18px; display: inline-block; vertical-align: top; box-shadow: inset 0px 0px 5px #c2c2c2; box-sizing: content-box; font-size: 13px; } #hbzemailbutton { background-color: rgb(243, 93, 92); border: 1px venture 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; height: 34px; } #hbzemailbutton:hover { background-color: #E64C4B; border: 1px venture #BF4A49; } .hbzsignup-form { margin-top: 15px; } .hbzsocial-icons { overflow: hidden; text-align: center; display: block; margin: 20px auto; } .hbzsocial-icons ul { margin: 0px machine !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::before, .hbzsocial-icons ul li::after { display: none !important; } .hbzsocial-icons ul li a { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKx2-SMaHzw3YHb7mTdVjeH30-laGA8ifbp27yI-eVr6L2xbqwj_IC5kGRcaUUvb_abdVBMf8-6fMOssCxZqn0TSwNRY8r4DLAQyZLMY4jzO0R-_5uoxX0cteaI-Qo0phGqoRzI_jdamea/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('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 address' /> <input id='hbzemailbutton' title='' type='submit' value='Join Us' /> </form> </div> <div class="hbzsube">Sociliaze alongside Us</div> <div class="hbzsocial-icons"> <ul> <li class="social-facebook"><a href="[Fb url]" target="_blank" title=4 Stylish Email Subscription Widgets For Blogger>Facebook</a></li> <li class="social-twitter"><a href="[Twitter url]" target="_blank" title=4 Stylish Email Subscription Widgets For Blogger>Twitter</a></li> <li class="social-gplus"><a href="[Google+ url]" target="_blank" title=4 Stylish Email Subscription Widgets For Blogger>Google+</a></li> <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title=4 Stylish Email Subscription Widgets For Blogger>Pinterest</a></li> <li class="social-rss"><a href="[RSS url]" target="_blank" title=4 Stylish Email Subscription Widgets For Blogger>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>Steps: How To Add a Stylish Subscription Widget To Blogger
Step 1. Log inward to your Blogger account, together with then larn to Layout > click on the 'Add a gadget' link on the left side.
Step 2. Choose HTML/JavaScript from the pop-up window > glue the code of the subscription widget within the empty box.
Step 3. Configuration of Subscription Box.
- Replace [Your Blog uri] alongside Your spider web log Uri which is basically your Feed title. You tin larn it past times visiting http://feedburner.google.com together with and then navigate to Publicize > Email Subscription together with uncovering your uri value inward given box. For eg: http://feedburner.google.com/fb/a/mailverify?uri= together with <input name='uri' type='hidden' value=''/>
- Replace [Fb url] alongside your Facebook page URL. For eg: https://www.facebook.com/howbloggerz
- Replace [Twitter url] alongside your twitter page URL. For eg: http://www.twitter.com/howbloggerz
- Replace [Google+ url] alongside your google+ page or concern human relationship URL. For eg: https://plus.google.com/101438893480071463583
- Replace [RSS url] alongside your RSS URL. For eg: http://feeds.feedburner.com/howbloggerz
- Replace [Pinterest url] alongside your pinterest URL.
- Replace [Twitter Username] alongside your twitter concern human relationship username. For eg : @
- Replace [Fb Page Name] alongside your Facebook Page Name. For eg :
Note: Minimum Sidebar width required - 230px.
Read: How to Change Email Subscription Delivery Time
Step 4. Press Save.
Enjoy !
Now visitors of your spider web log volition survive able to subscribe your blog slow past times using Subscription widget. For whatever issues related to higher upwards Subscription boxes Please Comment Below. More Subscription widgets volition survive added soon. Stay Updated, Browse ! :)
Belum ada Komentar untuk "4 Stylish Email Subscription Widgets For Blogger"
Posting Komentar