3 Stylish Email Subscription Widgets For Blogger

 An email subscription widget is most important to build a community with visitors. You can be marketing your website or blog by using an email subscription box. Today I will share and writing for a stylish email subscription box. I will include three stylish mailboxes that will improve your blog mail subscription and follows. 

3 Stylish Email Subscription Widgets For Blogger

 

Why use a stylish email subscription box?

Every blogger templates already had an email submit box. But, if you want to impress and attract more to your visitors. Subscription widgets help to boost your blog traffic and promote. It helps in creating good communication with readers. You can use these 3 mailboxes and impress your visitors to submit their email. So let's take yours and set it in your blog.

If you want to see these 3 email widgets. Click:

 

DEMO


The benefits of using the Email Subscription widget on blogger:

If you set up a stylish email box, it will impress your blog visitors to submit an email. There many more benefits besides these. 

  • Short method of blog subscription
  • Email marketing
  • Retain blog traffic
  • Visitors Impression

So, I think an email subscription is a better option for increasing blog traffic. the three stylish email subscription box demo or CSS and HTML code are shown one by one below:

Email Subscription Widget 1

3 Stylish Email Subscription Widgets For Blogger

The first email subscription widgets code is shown below:


.thsub { background-color: black; width: 100%; height: 100%; padding: 5px; box-shadow: 0px 0px 5px rgb(87, 98, 105); } .thform-inner { text-align: center; color: rgb(255, 255, 255); font: bold 16px "trebuchet MS","Tahoma"; } .themailform { width: 240px; margin: 10px auto; } #themailbox { background-color: #333; color: #FFF; width: 208px; border: 1px solid #000; padding: 15px; text-align: center; height: 18px; box-sizing: content-box; } #themailbutton { background-color: green; border: 1px solid green; 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; } #themailbutton:hover { background-color: #E64C4B; border: 1px solid #BF4A49; } .thsignup-form { margin-top: 15px; } .thsocial-icons { overflow: hidden; text-align: center; border-bottom: 1px solid rgb(133, 133, 133); width: 230px; display: block; margin: 20px auto; } .thsocial-icons ul { margin: 0px auto !important; text-align: center; padding: 0px !important; display: inline-block; } .thsocial-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; } .thsocial-icons ul li::before, .thsocial-icons ul li::after { display: none !important; } .thsocial-icons ul li a, .thsocial-icons ul li a:hover { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Lz9scJt71vGRQRLdJJpusgzXGZ8PqdiFzG7Swlysh7PZJnWmV7clfmp6vNS0loKCBHSYLtyKxZnvocHKgzzxOjluTI31bUeqJ0X-GjO-hSN27Yiw36-aUph-XnjrODxIMo2rIff-0Fqy/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; } .thsocial-icons ul li.social-facebook a { background-position: -62px 1px; } .thsocial-icons ul li.social-facebook a:hover { background-color: #3b5998; } .thsocial-icons ul li.social-twitter a { background-position: -254px 1px; } .thsocial-icons ul li.social-twitter a:hover { background-color: #00aced; } .thsocial-icons ul li.social-gplus a { background-position: -95px 0px; } .thsocial-icons ul li.social-gplus a:hover { background-color: #dd4b39; } .thsocial-icons ul li.social-pinterest a { background-position: -159px 1px; } .thsocial-icons ul li.social-pinterest a:hover { background-color: #cb2027; } .thsocial-icons ul li.social-rss a { background-position: -190px 0px; } .thsocial-icons ul li.social-rss a:hover { background-color: #F87E12; } .h6{ text-align: center; color: rgb(255, 255, 255); font: bold 16px "trebuchet MS","Tahoma";} </style> <div class="thsub"> <div class="thsocial-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 class='thsignup-form'> <div class='thform-inner'> <h4>Subscribe to my Newsletter</h4><div class='h6'> <h6>Don't worry, We don't spam</h6></div> </div> <div class='themailform'> <form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/UJBwCk", 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input name='uri' type='hidden' value='blogspot/UJBwCk'/> <input name='loc' type='hidden' value='en_US'/> <input id='themailbox' name='email' required='' type='text' placeholder='Your Email'/> <input id='themailbutton' title='' type='submit' value='Subscribe'/> </form> </div> </div> </div>


Some Changes:
  • The Yellow marked text on the code above that will be given your blog social media link or URL.
  • In Green Marked text on the code above that will give your FeedBurner username. Such as http://feeds.feedburner.com/your_username. copy your FeedBurner username and paste on the green text in the code. 
If you don't have a FeedBurner account, you must create an account from feedburner.com.

Email Subscription widget 2

3 Stylish Email Subscription Widgets For Blogger

The second email subscription box widget code is shown below:


.th_signup-form { background: transparent url("https://i0.wp.com/paulipu.com/wp-content/uploads/2018/10/email-newsletters-for-marketers.png?w=796&ssl=1") no-repeat scroll center center / 250px 150px; height: 150px; width: 250px; margin: 10px auto 60px auto; } .th_form p { text-align: center; color: #243; padding: 10px; font: bold 18px "Domine","Serif"; } .th_mail { margin: 120px auto 5px; width: auto; } #th_mailbox { 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; } #th_mailbutton { 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; } #th_mailbutton:hover { background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%; } .th_social_icons { margin: 20px 0 0; overflow: hidden; display: block; text-align: center; } .th_social_icons ul { display: inline-block; margin: 0 auto !important; text-align: center; padding: 0px } .th_social_icons ul li { background: transparent !important; border: none !important; float: left; list-style-type: none !important; margin: 0 4px 10px !important; padding: 0 !important; } .th_social_icons ul li::before, .th_social_icons ul li::after { display: none !important; } .th_social_icons ul li a, .th_social_icons ul li a:hover { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Lz9scJt71vGRQRLdJJpusgzXGZ8PqdiFzG7Swlysh7PZJnWmV7clfmp6vNS0loKCBHSYLtyKxZnvocHKgzzxOjluTI31bUeqJ0X-GjO-hSN27Yiw36-aUph-XnjrODxIMo2rIff-0Fqy/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; } .th_social_icons ul li.social-facebook a { background-color: #3b5998; background-position: -60px 3px; } .th_social_icons ul li.social-twitter a { background-color: #00aced; background-position: -253px 3px; } .th_social_icons ul li.social-gplus a { background-color: #dd4b39; background-position: -93px 3px; } .th_social_icons ul li.social-pinterest a { background-color: #cb2027; background-position: -157px 3px; } .th_social_icons ul li.social-rss a { background-color: #F87E12; background-position: -189px 3px; } .th_social_icons ul li a:hover { background-color: #333; } .th_social_like { display: block; text-align: center; } .th_social_like tbody, .th_social_like tbody tr { display: block; } .th_fb_likes { display: inline-block; padding-bottom: 15px; margin-right: 5px; } .pb_th { display: inline } </style> <div> <div class='th_signup-form'> <div class='th_form'> <p>Sign Up for Email Updates</p> </div> <div class='th_mail'> <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=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Blog uri]'/> <input name='loc' type='hidden' value='en_US'/> <input id='th_mailbox' name='email' required='' type='text' placeholder='Enter your email...'/> <input id='th_mailbutton' title='' type='submit' value='Submit Email'/> </form> </div> </div> <div class="th_social_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-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li> </ul> </div> <table class='th_social_like'> <tbody> <tr> <td class='th_fb_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> </tr> <tbody> </table> </div>

Some Changes:
  • The Yellow marked text on the code above that will be given your blog social media link or URL.
  • In Green Marked text on the code above that will give your FeedBurner username. Such as http://feeds.feedburner.com/your_username. copy your FeedBurner username and paste on the green text in the code. 

Email Subscription Widget 3

3 Stylish Email Subscription Widgets For Blogger

The third email subscription box widgets code is shown below:


<center> <div align="center" id="trickhopper-Subscribe-wrapper"> <div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 250px"> <img src="https://img.icons8.com/fluent/2x/email-open.png" width="100px" height:"100px" alt="email"/> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/DJtuQ", 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="name" id="trickhopper_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Your Name" /><br /> <input class="email" id="trickhopper_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Your Email Address" /><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <input name="uri" type="hidden" value="blogspot/DJtuQ" /><input name="loc" type="hidden" value="en_US" /> <input id="trickhopper_Submit_Text" style="width: 130px; padding: 5px 0;" type="submit" value="Submit" /></form> </div> </div> </center> <style>#ig-subscription-optin {margin: 0px;padding: 10px;background: #000; background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#21ea69), to(#fff627));height: auto!important;color: white !important;padding: 20px 15px !important; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px; margin: 8px 0 0 !important;line-height: 22px;font-family: Arial, Times, "domine", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif; padding: 5px;border: none;}#ig-subscription-optin input.name { background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4aexaAxh_tK-DT8aTPGmpsvYB2zpX6RJzv7628xphCUZ-BGcCkHGeDrF8KZPzxIe8CBiqvJQvDzgHNdue9MmciVtf_Kzzz6m6hcK3F45L87cV6dPiVgyRkqluDKGcnG5xADeiV_L6Vt76/s1600/subscribe-name.png) no-repeat center right;} #ig-subscription-optin input[type="text"] {border: 1px solid #111 !important; font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;} #ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_TBZSUg0muP0pFCqLEaTOXozcpHYh44fadHTBgAVvL2TzKUUjkoynQIvmv7SslWaBkTyFMdOWf45HovmpQKLLAbjgaPbf20t5Ank-zJKpXocTHriyZmQilXITU7pRqrSS0ETbkR_keuPj/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input { font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important; font-weight: bold !important;line-height: 26px !important;letter-spacing: normal; text-transform: none;text-decoration: none; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif; border: none;padding: 0px !important;float: none;}input:hover[type="submit"] { background-color: #000000;border: 1px solid #000000;color: white;text-decoration: none;}input[type="submit"] {background-color: #000000;border: 1px solid #000000; color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input { color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMeQYCS1kAHPu8lCLgDheod7uZXozhNf4kjv605DshFAcUhd39th4pxq91kj3avfzxRwXft3KxrWiUR6rvldbDjRWAaYfJWgRjg6TssEaraTsuCOFqz_Ldw-olAt5EWUZ1VDDFLRflpRzl/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important; padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;} #ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;} .credit p{ font-size: 10px;}</style>


Some Changes:
  • In Green Marked text on the code above that will give your FeedBurner username. Such as http://feeds.feedburner.com/your_username. Copy your Feedburner username and paste on the green text in the code. 
So, all the email subscription widget code is done. Now choose one style for using your blog.
If you don't know how to set up an email widget. let's see it.

How To Set Up an Email Widget on Blogger?


- Firstly, go to your blogger dashboard. Then, go to the layout option. See on your layout sidebar. Select the "Add a Gadget" option.
3 Stylish Email Subscription Widgets For Blogger



-Secondly, when you select the "Add a Gadget". You will see all gadgets. Now, select the 4 number option. I mean that select the "HTML/JavaScript" option. 
3 Stylish Email Subscription Widgets For Blogger


-Thirdly,  select an email subscription box widgets code of your choice from the top. Then, copy and paste codes into the empty box of "HTML/JavaScript".

[Mind it, you must set your FeedBurner username on the code]
 
3 Stylish Email Subscription Widgets For Blogger

-Fourthly, Now add a title for this widget like "Email Subscription". This title is optional. But necessary for blog style. Now click the "Save" button and save it.
Congrats!
All is done. Now, your blog visitors will subscribe via email easily. Visitors will connect with your blog. For any kind of problem or issue related to these email subscriptions, Please comment below. Stay read "TrickHopper". 

If this article helps you, please share more. So that others can also benefit through it.

Post a Comment

Previous Post Next Post