Making subscribers runs your blog blood in a healthy way and it all done from internet marketing and yes from subscribe box which is an ...
Making subscribers runs your blog blood in a healthy way and it all done from internet marketing and yes from subscribe box which is an open vessel of your blog in which blood generates and make your blog healthy and populated. Nowadays you can see the eye-catching subscription box on every popular and new blog especially in the platform of WordPress but in today article we will share with you the professional geometrical subscribe box which we would implement on above the footer area or body for the real affection of subscribe box as in WordPress blogs. Before continuing this article I mentioned you that we have adopted this nice subscribe box from SEO TIME (A new template Designed by TemplateSilk). Let’s start this article.
1. Open your Blogger Account.
2. Click on Template>> Back Up and Restore and do backup for safety.
3. Then, click on Edit HTML>> Press CTRL+F to open the hidden search box.
Search footer because if you have the footer in your blog so you can implement this subscribe box just above the footer and if you want to add this subscribe box just above your credit box so search your actual template id/class of footer or credit as shown in below image. In below image, I searched footer.
4. Now, paste the below HTML code just above the first parent footer div as shown in above image.
<!-- Subscribe Box -->
<div id='subscribe-layer'>
<div id='subscribe-box-wrap'>
<div id='subscribe-box'>
<h2 class='title'>Subscribe to our newsletter</h2> <span class='sub-description'>
(Get fresh updates in your inbox. Unsubscribe at anytime)</span>
<div class='subscribe-box-inside'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-ID", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'> <table> <tr> <td width='100%'>
<input class='subscribe-box-address' name='email' placeholder='Your Email Address' type='text'/> </td> <td>
<input class='subscribe-box-submit' type='submit' value='Subscribe'/> </td> </tr> </table>
<input name='uri' type='hidden' value='templatesilk'/> <input name='loc' type='hidden' value='en_US'/>
Replace the blue highlighted text with your blog Feed Burner Id.
5. Then, search the below code.
]]></b:skin>6. Paste the below code just before the ]]></b:skin>.
/*=====================================
= Subscribe Box =====================================*/
.subscribe-box-inside {
margin-top: 15px;
}
#subscribe-layer {
background-blend-mode: overlay;
background-image: url(//dmypbau5frl9g.cloudfront.net/assets/common/bg-page-section-00fcdc3f6a998791f63bb32dc69b1105.png);
background: rgb(66, 127, 237);
}
.subscribe-box-inside .subscribe-box-address {
color: #fff !important;
width: 480px;
font-size: 20px;
border: 0;
outline: none;
background-color: rgba(43, 64, 82, 0.84);
padding: 26px 0px 20px 26px;
border-radius: 0px;
}
.subscribe-box-inside .subscribe-box-address:focus {
box-shadow: 4px 0px 6px #fff inset;
border-radius: 5px;
}
.subscribe-box-inside .subscribe-box-submit {
margin: 0px 0px 0px 30px;
border: 0;
background: #ffffff !important;
color: #448aff;
padding: 21px 21px;
font-size: 20px;
}
.subscribe-box-inside .subscribe-box-submit:hover {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
.sub-box a,
.sub-box a:visited {
color: #eeeeee
}
.sub-box a:visited {
text-decoration: underline;
}
.sub-box a:hover {
color: #cccccc;
}
#subscribe-box-wrap {
background-blend-mode: overlay;
background-image: url(//dmypbau5frl9g.cloudfront.net/assets/common/bg-page-section-00fcdc3f6a998791f63bb32dc69b1105.png);
padding: 42px 0px 50px 0px;
margin: 0px auto;
background-attachment: fixed;
background-size: cover;
}
#subscribe-box-wrap a {
color: #66665f;
}
#subscribe-box {
color: #5b5b5e;
width: 520px;
margin: 0 auto;
}
#subscribe-box h2 {
margin: 0px 0 3px -45px;
padding: 0px;
color: #fff;
font-size: 35px;
display: block;
width: 676px;
}
#subscribe-box::-webkit-input-placeholder {
color: #fff;
}
span.sub-description {
color: #fff;
font-size: 21px;
display: block;
margin-left: 20px;
width: 505px;
}
.subscribe-box-inside:before {
content: "\f0e0";
color: #fff;
float: left;
font-size: 200px;
margin-left: -260px;
margin-top: -110px;
}
Click on Save Template and check the new professional Geometric Design subscribe box before footer container in your blog. If you like this subscribe box widget so kindly shares it with your other friends and readers.
COMMENTS