Hey guys, do you want to create a beautiful Email Subscription box for Blogger - if yes, then stay tuned with this article.
If you want to get success in the world of blogging and want to stay connected with your visitors, then email subscription can be a good medium for your blogging journey. So, today we have brought you 2 easy ways through which you can set up a beautiful email subscription box for Blogger. With a pop up email subscription box for Blogger you will be able to reach a vast audience.
So let's dive in!!
How to set up Email Subscription on blogger
Basically!! There are two ways to make a beautiful subscription box for Blogger (with social media icons). Now, let's start with the first one!!!
1. Go to Feedburner Website and create new feed.
2. Now, activate the subscription by email option. If you don't know how to activate the subscription by email option in Feedburner then just click this link - How to Enable Subscription by Email in Feedburner.
3. Open a new tab in browser and go to blogger Website.
4. Go to Themes Section and click on Edit HTML.
5. After clicking on the edit html button, you will be taken to the source code editor of the your website template - Now, press ctrl+f and search for ]]></b:skin>
6. Now, copy the following CSS code and paste it on the above of ]]></b:skin> and Save it!!!
#ultimatebox {width:300px; height:auto; background-color:#eee; border:1px solid #ddd; border-radius:7.5px; display:block; margin:auto; line-height:40px; padding:0px}#ultimatebox .email__ {padding:15px 15px 5px;}
#ultimatebox .email {margin:auto; color:#555; text-align:center;}
#ultimatebox .email:before {content:''; width:50px; height:50px; display:block; text-align:center; margin:auto; border-radius:100px; transition:all .3s ease; -webkit-animation:ignielRing 5s 0s ease-in-out infinite; -webkit-transform-origin:50% 4px; -moz-animation:ignielRing 5s 0s ease-in-out infinite; -moz-transform-origin:50% 4px; animation:ignielRing 5s 0s ease-in-out infinite; transform-origin:50% 4px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='%23008c5f'/%3E%3C/svg%3E") center center / 50px no-repeat;}
#ultimatebox .medsos__ {padding:15px 0px; line-height:0px; border-top:1px solid #ccc;}
#ultimatebox form {display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; margin:0px 0px 15px; padding:0px; position:relative;}
#ultimatebox form:before {left:15px; position:absolute; display:block; width:20px; height:20px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23717171'/%3E%3C/svg%3E") no-repeat; content:'';}
#ultimatebox input {width: calc(100% - 35px); background-color:#ccc; line-height:1.5em; border:1px solid #ccc; border-right:0px; padding:8px 10px 8px 40px; font-size:12px; text-align:left !important; border-radius:50px 0px 0px 50px; outline:none; outline-width:0px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;}
#ultimatebox button {background-color:#008c5f; width:40px; min-width:40px; height:36px; margin:0px; padding:0px; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;}
#ultimatebox button:hover, #ultimatebox button:focus {background-color:var(--color-hover);}
#ultimatebox button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat; content:''; vertical-align:-3px;}
#ultimatebox .medsos {width:100%; text-align:center;}
#ultimatebox .medsos svg {width:20px;height:20px;margin-top:7px}
#ultimatebox .medsos svg path {fill:#fff}
#ultimatebox .medsos a {display:inline-block; margin-right:7px; width:35px; height:35px; box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4); transition: all ease-in-out 300ms; border-radius:100px;}
#ultimatebox .medsos a:last-child {margin-right:0px;}
#ultimatebox .medsos a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05);}
#ultimatebox .medsos .facebook{background:#3a579a}
#ultimatebox .medsos .twitter {background:#00abf0}
#ultimatebox .medsos .googleplus {background:#df4a32}
#ultimatebox .medsos .youtube {background:#cc181e}
#ultimatebox .medsos .instagram {background:#992ebc}
#ultimatebox .medsos .pinterest {background:#e60023}
@-webkit-keyframes ignielRing{
0% { -webkit-transform: rotateZ(0); }
1% { -webkit-transform: rotateZ(30deg); }
3% { -webkit-transform: rotateZ(-28deg); }
5% { -webkit-transform: rotateZ(34deg); }
7% { -webkit-transform: rotateZ(-32deg); }
9% { -webkit-transform: rotateZ(30deg); }
11% { -webkit-transform: rotateZ(-28deg); }
13% { -webkit-transform: rotateZ(26deg); }
15% { -webkit-transform: rotateZ(-24deg); }
17% { -webkit-transform: rotateZ(22deg); }
19% { -webkit-transform: rotateZ(-20deg); }
21% { -webkit-transform: rotateZ(18deg); }
23% { -webkit-transform: rotateZ(-16deg); }
25% { -webkit-transform: rotateZ(14deg); }
27% { -webkit-transform: rotateZ(-12deg); }
29% { -webkit-transform: rotateZ(10deg); }
31% { -webkit-transform: rotateZ(-8deg); }
33% { -webkit-transform: rotateZ(6deg); }
35% { -webkit-transform: rotateZ(-4deg); }
37% { -webkit-transform: rotateZ(2deg); }
39% { -webkit-transform: rotateZ(-1deg); }
41% { -webkit-transform: rotateZ(1deg); }
43% { -webkit-transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); }
}
@-moz-keyframes ignielRing{
0% { -moz-transform: rotate(0); }
1% { -moz-transform: rotate(30deg); }
3% { -moz-transform: rotate(-28deg); }
5% { -moz-transform: rotate(34deg); }
7% { -moz-transform: rotate(-32deg); }
9% { -moz-transform: rotate(30deg); }
11% { -moz-transform: rotate(-28deg); }
13% { -moz-transform: rotate(26deg); }
15% { -moz-transform: rotate(-24deg); }
17% { -moz-transform: rotate(22deg); }
19% { -moz-transform: rotate(-20deg); }
21% { -moz-transform: rotate(18deg); }
23% { -moz-transform: rotate(-16deg); }
25% { -moz-transform: rotate(14deg); }
27% { -moz-transform: rotate(-12deg); }
29% { -moz-transform: rotate(10deg); }
31% { -moz-transform: rotate(-8deg); }
33% { -moz-transform: rotate(6deg); }
35% { -moz-transform: rotate(-4deg); }
37% { -moz-transform: rotate(2deg); }
39% { -moz-transform: rotate(-1deg); }
41% { -moz-transform: rotate(1deg); }
43% { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(0); }
}
@keyframes ignielRing{
0% { transform: rotate(0); }
1% { transform: rotate(30deg); }
3% { transform: rotate(-28deg); }
5% { transform: rotate(34deg); }
7% { transform: rotate(-32deg); }
9% { transform: rotate(30deg); }
11% { transform: rotate(-28deg); }
13% { transform: rotate(26deg); }
15% { transform: rotate(-24deg); }
17% { transform: rotate(22deg); }
19% { transform: rotate(-20deg); }
21% { transform: rotate(18deg); }
23% { transform: rotate(-16deg); }
25% { transform: rotate(14deg); }
27% { transform: rotate(-12deg); }
29% { transform: rotate(10deg); }
31% { transform: rotate(-8deg); }
33% { transform: rotate(6deg); }
35% { transform: rotate(-4deg); }
37% { transform: rotate(2deg); }
39% { transform: rotate(-1deg); }
41% { transform: rotate(1deg); }
43% { transform: rotate(0); }
100% { transform: rotate(0); }
7. After that, come back to main blogger dashboard and go to layout and click on Add a Gadget.
8. Just click on Configure html/Javascript and paste the following Html code
<div id="ultimatebox"> <div class="email__">
<div class="email">
Subscribe to our Newsletter!!
<form action="https://feedburner.google.com/fb/a/mailverify?uri=Answersjet" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Answersjet', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" class="email" placeholder="Enter your E-mail"/>
<input name="uri" type="hidden" value="Answersjet" /> <input name="loc" type="hidden" value="en_US" />
<button type="submit"></button>
</form>
</div>
</div>
<div class="medsos__">
<div class="medsos">
<a class="facebook" title="Facebook" href="https://www.facebook.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg></a>
<a class="twitter" title="Twitter" href="https://twitter.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path></svg></a>
<a class="youtube" title="Youtube" href="https://www.youtube.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z"> </path></svg></a>
<a class="instagram" title="Instagram" href="https://www.instagram.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg></a>
<a class="pinterest" title="Pinterest" href="https://in.pinterest.com/xxxx/" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z"></path></svg></a>
</div>
</div>
</div>
Note: Replace the Answersjet (in html code) with your respective Feedburner username and Replace the xxxx text(in html code) with your social media usernames or ID.
9. After doing this, just hit the Save button. That's it!!!! You have successfully set up a pop up Email subscription box for Blogger.
Now, you will see something like this;
Now, let's start with Seconds method to make beautiful Email Subscription box for Blogger;
1. Again go to Theme section and simply click on Edit HTML.
2. Press ctrl + F and Search for </head>
3. Paste the following code in the above of </head> and Save it!!
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/css/all.min.css">4. Now, go to Layout > add a gadget > Configure html/Javascript and paste following the code!!
<style>#hbzsub {
background-color: #576269;
max-width: 300px;
margin: auto;
padding: 3%;
}
#hbzsub * {
box-sizing: border-box;
}
#hbzsub .hbzform-inner {
padding: 15px 0 10px;
}
#hbzsub .hbzform-inner h4 {
color: #fff;
text-align: center;
padding: 0;
margin: 0;
font-size: 18px;
font-weight: bold;
}
#hbzsub .hbzemailbox {
background-color: #798187;
color: #FFF;
border: 1px solid #697780;
padding: 15px;
text-align: center;
width: 100%;
}
#hbzsub .hbzemailbutton {
background-color: #f35d5c;
border: 1px solid #d75453;
width: 100%;
font-weight: bold;
padding: 15px;
margin: 10px auto;
color: #fff;
}
#hbzsub .hbzemailbutton:hover {
background-color: #E64C4B;
border: 1px solid #BF4A49;
}
#hbzsub .social-hbz ul {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
#hbzsub .social-hbz ul li {
list-style: none;
width: 20%;
display: inline-flex;
}
#hbzsub .social-hbz a {
color: #fff;
display: flex;
flex: auto;
width: 100;
height: 0;
padding: 45% 0;
justify-content: center;
font-size: 22px;
text-decoration: none;
margin: 0 5%;
position: relative;
}
#hbzsub a i {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#hbzsub .social-hbz.norms a {
background: transparent !important;
color: #fff !important;
}
#hbzsub .social-hbz.norms a:hover {
opacity: 0.8;
}
#hbzsub .social-hbz.norms ul {
border-bottom: 3px solid #76858e;
}
#hbzsub .social-hbz ul li {
width: 20%
}
#hbzsub .social-hbz a.facebook {
background-color: #32528c;
}
#hbzsub .social-hbz a.youtube {
color: #f70000;
background-color: #fff;
}
#hbzsub .social-hbz a.twitter {
background-color: #50abf1;
}
#hbzsub .social-hbz a.instagram {
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
#hbzsub .social-hbz a.pinterest {
background-color: #df0022;
}
</style>
<div id='hbzsub'>
<div class="social-hbz">
<ul>
<li><a class="facebook" href="xxxx" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a class="youtube" href="xxxx" target="_blank"><i class="fab fa-youtube"></i></a></li>
<li><a class="twitter" href="xxxx" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a class="instagram" href="xxxx" target="_blank"><i class="fab fa-instagram"></i></a></li>
<li><a class="pinterest" href="xxxx" target="_blank"><i class="fab fa-pinterest-p"></i></a></li>
</ul>
</div>
<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=https://feedburner.google.com/fb/a/mailverify?uri=Answersjet', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='https://feedburner.google.com/fb/a/mailverify?uri=Answersjet'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='hbzemailbox' name='email' required='' type='text' placeholder='Enter your e-mail'/>
<input class='hbzemailbutton' type='submit' value='Sign Up'/>
</form>
</div>
</div>
</div>
Note: Replace the Answersjet (in html code) with your respective Feedburner username and Replace the xxxx text(in html code) with your social media profile URL.
5. After doing all these things, just click on Save button. Email subscription box for Blogger has been set up successfully.
Now, you will see something like this;
Conclusion
Above we have discussed tutorial for how to set up Email Subscription box on Blogger. With a pop up email subscription box for Blogger you will be able to reach a vast audience. So, today we have discussed 2 easy ways through which you can set up a beautiful email subscription box for Blogger. And by following these above mentioned steps or methods anyone can easily set up a beautiful email subscription box for Blogger. I hope this information will be useful to you all.