How To Add Stylish Email Subscription Widget For Blogger
In this post, We are getting How To Add Stylish Email Subscription Widget For Blogger website and also wordpress website. All Email Subscription form are design with HTML, CSS code. You can also add Popup Email Subscription Box On Blogger Website With Google Feedburner.
{tocify} $title={Table of Contents}
What is Email Subscription?
An email subscription is a widget on a blogger website that allows visitors to receive updates via email by their email addresses in a subscription form from subscribed. Also call, Email subscription is email marketing strategy. After registering with google feedburner, you can create any subscription form for free and send unlimited email.
Benefit of Email Subscription Widget for Blogger / Wordpress
Wordpress / Blogger Email subscription is an important part to receive an interesting newsletter from a website. A customer starts to receive automated emails from subscribe website. Once a visitor, A subscription form on a website, a confirmation email is sent to the user's email address to double the number of visitors and users get all the updates on the website by adding their email address to the mailing list of the website. This is called email marketing.
As we all know, email marketing is a great way to market your business online and there are many benefits to adding Blogger email subscription widgets.
A visitor is getting all the content updates without having to visit your website, for this they just need to subscribe by email. For this you must have good quality content on your website.
A user will only use the Email Subscription Widget when they find quality posts on your website, which is a must. Otherwise its use will be very low.
How To Add Stylish Email Subscription Box Widget For Blogger
So, Lets Start the topic How To Add Email Subscription Widget for Blogger Website or Wordpress Website Using HTML, CSS. These Stylish Email Subscription Box are designed to be of very good quality which will attract visitors very easily.
In this post all Stylish Email Subscription Widget are use to same Way, I will provide just one for Blogger. You can use these same way.
- Firstly, Go To Blogger Dashboard
- Then, Click Add A Widget
- Add HTML / Javascript Code Box
- Then, Paste blew any code, which you want to add on your blogger website.
- Then, Save the Widget.
Style - 1 : Best Style Email Subscription form
<style> //@media(max-width:400px) {.sbox{width:109%!important;}}
//@media(max-width:1024px) and (min-width:400px) {.sbox{width:106.5%!important;}}
.sbox {background:#009abe;text-align:center;width:100%;}
.sbox span {color:#fff;font-family:roboto;font-size:27px;}
.sbox .small {font-size:18px;}
input.boxinput::placeholder {color:#fff;}
.sbox .hatespam {font-size:15px;}
.sbox .boxinput::placeholder {color:#fff;}
.sbox .boxinput {background:rgba(0,0,0,0.4);color:#fff;border:none;padding-top:13px;padding-bottom:13px;font-family:roboto;margin-bottom:10px;outline:none;transition:.3s;width:86%;text-align:center;border-radius:4px;}
.sbox .boxsubmit {box-shadow:0px 0px 31px 0px rgba(0,0,0,0.2);width:86%;text-align:center;padding-top:13px;padding-bottom:13px;background:#fff;outline:none;border:none;color:#009abe;font-family:roboto;cursor:pointer;border-radius:4px;}
.sbox .boxsubmit:active {background:rgba(0,0,0,0.6);color:#fff;}
.sbox {border-radius:8px!important;padding:0!important;border:none!important;}
.sbox .widget-content {margin:0!important;}
#sidebar-wrap .widget {overflow-x:hidden;}
.sbox {background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)!important;width:100%;}
.sbox .boxsubmit {box-shadow:none!important;border-radius:2px!important;color:#764ba2!important;}
.sbox .boxinput {border-radius:2px!important;}
</style>
<div class='sbox wow rubberBand'>
<center>
<br /><span class='icon'><img height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVUG4aGRBfK_VJrlquda1_1VdMxnbWZN_TXQz_qeiXPPX4_kO1QdZDP36T9umF8HS1cUfqzSEf7DHETk8XA12njESCzTLn9AjTFWt9XCOYfRWHSJfetFf6kLTbExcB4LKcm5NdF8ef4XU/s1600/email.png' width='150px'/></span><br/>
</center>
<span>Newsletter</span><br /><br />
<span class='small'>Join Our newsletter</span><br /><br />
<center>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=Blogbn-follow' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=Blogbn-Follow', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true' target='popupwindow'><input class='boxinput' name='EMAIL' placeholder='Your Email Address' type='email' required/>
<input class='boxsubmit' type='submit' value='Submit'/><input name='uri' type='hidden' value='shoutersplanet'/>
<span class='hatespam'>*We Hate Spam!</span><br /><br />
</center></div>Style - 2 : Email Subscription Form With Background Image
<div class="social-counter">
<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700);
.wk_subs_box_wrapper{
background:url('Your Backgroud Image') repeat scroll 0 0 #FFF;
color:#427FED;
border-radius: 5px;
border: 2px solid #0AC4FC;
font-family: "Roboto";
font-size:14px;
line-height:20px;
padding:1px 20px 10px;
text-align:center;
text-transform:uppercase
}
.sidebar-subscribe-box-form{
clear:both;
display:block;
margin:10px 0
}
form.sidebar-subscribe-box-form{
clear:both;
display:block;
margin:10px 0 0;
width:auto
}
.sidebar-subscribe-box-email-field{
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#fff;
border:1px solid #ccc;
border-radius:4px;
color:#444;margin:0 0 15px;
padding:10px 30px;
width:75%
}
.sidebar-subscribe-button{
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
font-family: "Roboto";
color: #ffffff;
font-size: 29px;
background: #3cb0fd;
padding: 10px 30px 10px 30px;
width:100%;
border: solid #ffffff 0px;
text-decoration: none;
}
.sidebar-subscribe-button:hover,.sidebar-subscribe-box-email-button:focus{
background: #3498db;
text-decoration: none;
}
</style>
<div class="wk_subs_box_wrapper">
<p>Subscribe for free</p>
<div class="sidebar-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Blogbn-follow', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="[YOUR URI]" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address"/>
<input class="sidebar-subscribe-button" title="" type="submit" value="Subscribe Now !" />
</form>
</div>
</div>Note : Backgroud Image Url to Replace your image Url{alertInfo}
Style - 3 : Stylish Email Subscription Box Widget With Social Link
<style type="text/css">
.wk_subs {
background-color: rgb(255, 255, 255);
width: 100%;
height: 100%;
border: 1px dashed #ddd;
}
.wk_sub {
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%;
}
.wk_email_form {
width: 235px;
margin: 10px auto;
}
#wk_email_box {
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;
box-sizing: content-box;
font-size: 13px;
}
#wk_email_button {
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;
height: 34px;
}
#wk_email_button:hover {
background-color: #E64C4B;
border: 1px solid #BF4A49;
}
.wk_signup_form {
margin-top: 15px;
}
.wk_social_icons {
overflow: hidden;
text-align: center;
display: block;
margin: 20px auto;
}
.wk_social_icons ul {
margin: 0px auto !important;
text-align: center;
padding: 0px !important;
display: inline-block;
}
.wk_social_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;
}
.wk_social_icons ul li::before,
.wk_social_icons ul li::after {
display: none !important;
}
.wk_social_icons ul li a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrODKEfhFEvOtj_OeRJcuCV_ME5OdJJtu2p1kpQ0_TMG5-MZ7CJbeRVRfsNXGU3r_vxC9_0TxIDJUFCAEWKWLODHmR7gP8bRXkWvAZj10_vio-bRS2U5b9zqbj5cdBk1lfYUqaJfJf688T/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;
}
.wk_social_icons ul li a:hover {
background-color: #aeaeae !important;
}
.wk_social_icons ul li.social-facebook a {
background-position: -62px 1px;
background-color: #3b5998;
}
.wk_social_icons ul li.social-twitter a {
background-position: -254px 1px;
background-color: #00aced;
}
.wk_social_icons ul li.social-gplus a {
background-position: -95px 0px;
background-color: #dd4b39;
}
.wk_social_icons ul li.social-pinterest a {
background-position: -159px 1px;
background-color: #cb2027;
}
</style>
<div class="wk_subs">
<div class="wk_sub">Join Our Newsletter For Free</div>
<div class='wk_signup_form'>
<div class='wk_email_form'>
<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='wk_email_box' name='email' required='' type='text' placeholder='Your Email Address' /> <input id='wk_email_button' title='' type='submit' value='Subscribe' /> </form>
</div>
<div class="wk_sub">Sociliaze with Us</div>
<div class="wk_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-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>
</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="[https://www.facebook.com/wonderkrish/]" 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>Note : Backgroud Image Url to Replace your image Url{alertInfo}
Set Up With Editing Theme
Style - 4 : Stylish Popup Email Subscription Widget Box For Blogger
- Go To Blogger Dashboard
- Theme
- Edite HTML
- Now Search For <head> tag and paste after <head> tag. Blew stylesheet code.
Code :
<link href=’http://fonts.googleapis.com/css?family=Oswald|Open+Sans:300italic,400italic,600italic,400,300,600,700′ rel=’stylesheet’ type=’text/css’/>- Then, Search for </body> atg and paste blew script code above </body> tag.
Code :
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’ type=’text/javascript’></script>
<script type=’text/javascript’>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie…
if (arguments.length > 1 && String(value) !== “[object Object]”) {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === ‘number’) {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), ‘=’,
options.raw ? value : encodeURIComponent(value),
options.expires ? ‘; expires=’ + options.expires.toUTCString() : ”, // use expires attribute, max-age is not supported by IE
options.path ? ‘; path=’ + options.path : ”,
options.domain ? ‘; domain=’ + options.domain : ”,
options.secure ? ‘; secure’ : ”
].join(”));
}
// key and possibly options given, get cookie…
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp(‘(?:^|; )’ + encodeURIComponent(key) + ‘=([^;]*)’).exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>- Now, Search for ]]</b:skin> tag and paste below code just above ]]</b:skin> tag.
Code :
/***************************************************************
Email Subscription Popup Box Coded by www.blogbn.com
***************************************************************/
#mbg-blogger-subbox {
display: none;
background: rgba(0,0,0,0.5);
width: 100%;
height:100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index:99999999;
}
#mbg-blogger-subbox .popup-box {
padding: 0;
margin: 0 auto;
max-width: 600px;
border-radius: 37px;
border: 2px solid #111;
background: #ec407a url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEoIn0BOO54BgWu69l2yZonNFL9IKQujrdd7VrlfbmqvUPIe86WqXQYLT-9SVc5DB3-wK8zk6NGLKAusvrbxChfPpXjF1rdJu8BliqJuLjwTWo7QWc5lBWOkYRsIhQpi3xU7uEiWPDgUve/s1600/transparent-background-bird-email.png’);
background-repeat: no-repeat;
background-position: 100% 45%;
position:relative;
top:25%;
z-index:0;
}
#mbg-blogger-subbox .popup-box .exit-button-subbox {
float: right;
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
margin-top: 2px;
margin-right: -2px;
}
#mbg-blogger-subbox .popup-box .exit-button-subbox:before {
content: “X”;
padding: 5px 8px;
background: #0d47a1;
color: #fff;
font-weight: normal;
font-size: 12px;
text-shadow: 0px -1px #fff;
font-family: sans-serif;
border: 4px solid #fff;
border-radius: 50px 0px 50px 50px;
}
/*–Main Headline Style – www.blogbn.com–*/
#mbg-blogger-subbox .popup-box .tagline {
padding: 0;
line-height: 2em;
font-size: 26px;
height: 50px;
font-weight: normal;
font-family: “Oswald”,sans-serif;
text-shadow: 0px -1px 0px #ec407a;
color: #ec407a;
text-align: center;
background: #111;
border-radius:30px;
border-right: 7px solid #111;
border-left: 7px solid #111;
border-bottom: 15px solid #111;
}
/*–Paragraph Style – www.mybloggerguides.com–*/
#mbg-blogger-subbox .popup-box p {
font-family: “Oswald”,sans-serif;
font-size: 15px;
color: #fff;
text-shadow: 1px -1px 0px 111;
line-height: 35px;
padding: 10px 110px 0px 20px;
text-align: left;
letter-spacing: 0.5px;
margin: 0;
}
#mbg-blogger-subbox .popup-box .rssform {
padding: 15px 20px;
margin: 15px 0px 0px 0px;
}
/*– Button Style – www.blogbn.com –*/
#mbg-blogger-subbox .popup-box .rssform .button {
cursor: pointer;
margin: 0px 0px 0px 5px;
border: 2px solid #fff;
overflow: hidden;
width: 35%;
height: 37px;
background-color: #0d47a1;
font-size: 14px;
font-weight: normal;
color: #fff;
letter-spacing: 0.5px;
text-transform: uppercase!important;
font-family: “Oswald”;
float: right;
border-radius: 40px;
}
#mbg-blogger-subbox .popup-box .rssform .button:hover {
background: #00e676;
padding: 7px;
border: 2px solid #111;
}
#mbg-blogger-subbox .popup-box .rssform .email-bg {
background: #FFE url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi025JRw6IDCIf2tptYvOyFNX9jtw_H8Q6-52rGlWqNEdmNyhyphenhyphenLNLUWvgAebGTG4F3qxnGLS4zEoWH5BHo_CskvD2YdGiTHPkC9q44xqhKNBV_A9T3wNvGsz108rleQEfITSnMyhhHXTdU/s1600/1envelope.png’) no-repeat 5px 5px !important;
padding-left: 30px;
}
#mbg-blogger-subbox .popup-box .rssform input {
padding: 8px;
font-size: 13px;
font-family: Oswald;
font-weight: normal;
display: inline-block;
width: 60%;
height: 37px;
text-transform: uppercase;
outline: none !important;
border: 2px solid #111;
border-radius: 10px;
box-sizing: border-box !important;
}
#mbg-blogger-subbox .popup-box .rssform input:hover{
border: 2px solid #0d47a1;
border-radius:20px;
color: #ff0000;
}
#mbg-blogger-subbox .popup-box .rssform input:active{
border: 2px solid #00e676;
}- Then Save Theme.
- Again Go To Blogger Dashboard
- Layout
- Click Add A Widget
- Add HTML/ Javascript Code Box and Paste here blew HTML & Script Code and save it.
Code:
<div id=’mbg-blogger-subbox’>
<div class=’popup-box’>
<div class=’exit-button-subbox’/>
<div class=’tagline’>
Don’t Forget! Subscribe Us
</div>
<p>Get our latest Blogger Tricks, Guides, Widgets/Plugins and much more things direct into your MAILBOX for free. Just Enter your Good Name, email address, Verify and join our Newsletter! :)</p>
<div class=’rssform’>
<form action=’http://feedburner.google.com/fb/a/mailverify’ method=’post’ onsubmit=’window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerGuides', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true’ target=’popupwindow’>
<input class=’email-bg’ name=’email’ placeholder=’Enter your email address… :)’ type=’text’/>
<input name=’uri’ type=’hidden’ value=’MyBloggerGuides’/>
<input name=’loc’ type=’hidden’ value=’en_US’/>
<input class=’button’ type=’submit’ value=’Sign Up’/>
</form>
</div>
</div>
</div>
<script type=’text/javascript’>
jQuery(document).ready(function($){
if($.cookie('feedburner_popup_box') != 'yes'){
$('#mbg-blogger-subbox').delay(15000).fadeIn('medium');
$('.exit-button-subbox, .button').click(function(){
$('#mbg-blogger-subbox').stop().fadeOut('medium');
});
}
$.cookie('feedburner_popup_box', 'yes', { path: '/', expires: 10 });
});
</script>Conclusion :If you have Adding email subscription Widget for blogger any problem using HTML, CSS, Javascript Code Please comment blew on this post. I will try to fix your problem.