Add Geometric Design Subscribe Box in Blogger

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 ...

Subscribe-box-blogger
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;
}
Check This: Quote Subscription Box For Blogger.
Check This: 5 New Email Subscribe Boxes For Blogger.

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

BLOGGER: 1
Loading...
Name

Android,2,backlinks,7,Blogger,45,Errors,1,How To,31,Make Money Online,2,SEO,13,SMM,10,Templates,8,Tools,7,Tricks,15,Web designing,17,Widgets,24,WordPress,4,
ltr
item
PRO TECHNIFY: Add Geometric Design Subscribe Box in Blogger
Add Geometric Design Subscribe Box in Blogger
https://4.bp.blogspot.com/-rLMJ24of1A4/V-fjIqho6uI/AAAAAAAAJZg/GObKHjZxfKYc-W8ZTa_vhPcz3hbz4p48gCLcB/s640/subscribe-box-blogger.jpg
https://4.bp.blogspot.com/-rLMJ24of1A4/V-fjIqho6uI/AAAAAAAAJZg/GObKHjZxfKYc-W8ZTa_vhPcz3hbz4p48gCLcB/s72-c/subscribe-box-blogger.jpg
PRO TECHNIFY
http://www.protechnify.com/2016/09/add-geometric-design-subscribe-box-blogger.html
http://www.protechnify.com/
http://www.protechnify.com/
http://www.protechnify.com/2016/09/add-geometric-design-subscribe-box-blogger.html
true
8223102945718438291
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy