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 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 to our newsletter


(Get fresh updates in your inbox. Unsubscribe at anytime)

Replace the blue highlighted text with your blog Feed Burner Id.
5. Then, search the below code.

]]>

  1.  Paste the below code just before the ]]>.

/*=====================================
= 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:
Check This:

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.

via Blogger http://www.droidadda.org/2017/01/add-geometric-design-subscribe-box-in.html https://mtkdr0id.files.wordpress.com/2017/01/6060a-subscribe-box-blogger.jpg

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s