How to Add Quote Subscription Box Below Blogger Post | Blogger Tips 2016

You would have been seen many types of subscription boxes like pop up, sidebar tool tip, widget style and  in below blogger post, but they all are boring and clone from the others by some little changes. How it’s awesome if you also have Word press like eye touch subscription box which is mostly present below post. Now you don’t have to find a great and unique subscription box because Tips4tricx introducing a new quote subscription box which is totally looks like premium subscription boxes with awesome and unique features.

What's Unique in This Subscription Box?

First of all, this simple and awesome looking premium subscription box is for everyone it meant it is FREE for all.

It is a third party subscription box (free from every error or bugs).

Easy customization, i.e. change of colors, image URL and font style.

The main and unique feature of this subscription box that you can add your desire and favorite quote in the middle of subscription box, because nowadays everyone like and spread his messages through quotes and every quote has its own level and quality which may be catch your visitor’s heart and they easily subscribe and will become your daily reader.

This subscription box will not eat your page speed, because it is made from simple code.

How to Add Quote Subscription Box Below Blogger Post

Go to blogger>> Template and click on backup or restore, then download full template for 100% template back safety.

After backup, click on Edit HTML and find </head>.

Then select your favorite box color and paste its CSS styles above </head> tag.

Green Box

<b:if cond='data:blog.pageType == "item"'>

<style type='text/css'>

#Box {background: #6CB952 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc6P58fqkNNrIIZpDUssQrCzIvyHKnAfc9dG0MuUY9xlPjJRYECiLmh3pGm_AswvPfn7Wm70Gi-R2zfykfhViXqsZSOYsnIaCJXlr3r50fF3qkBVNEHIfLmGvjhPJ42lcGU3ozkgkIEnY/h120/quote2.png") no-repeat; background-position:5% 70%;text-align: center;width: 100%;display: block;margin: 10px 0 0px 0;height: 175px;}

.Internet-Email {color: #444242;width: 39%;height:50px;background: #fff;padding: 6px 0px 5px 30px;border-radius: 3px;margin: 5px 2px 0px 160px;}

.mail-button:hover {background: #000000;border: solid #000;}

.mail-button {background: #2F3C4E;cursor: pointer; width: 15%; height: 3%;color: #FFF;font-weight: bold;border: solid #000;border-radius: 2px; font-size: 17px;padding: 6px 30px 6px 30px;margin-left: 15px;}

.credit {color: #fff;display: block;font-size: 13px;font-weight: 600;}

#Headline {text-align: center;color: #ffffff;font-size: 19px;line-height:18px;padding: 9px 0 0 0; margin-bottom: 8px;margin-top:4px;font-weight: bold;font-family: Sans-serif;}

</style>

</b:if>

Blue Box

<b:if cond='data:blog.pageType == "item"'>

<style type='text/css'>

#Box {background: #0D9BFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkuGd3Y5xRVzvPW89jB_BdFm1DKNCCmI-4HDYQnLbv3AoKZ2UeT_Ke3EG91smXjF7Okwgpt7a4PICjAmg6a6ErkKnmmtHWYodD5z_9eHs3u2wyZbjKkazs6ZUBzSRAykKYV0E9UR5SPTc/w140-h140-p/sign-up.png") no-repeat; background-position:5% 70%;text-align: center;width: 100%;display: block;margin: 10px 0 0px 0;height: 175px;}

.Internet-Email {color: #444242;width: 39%;height:50px;background: #fff;padding: 6px 0px 5px 30px;border-radius: 3px;margin: 5px 2px 0px 160px;}

.mail-button:hover {background: #000000;border: solid #000;}

.mail-button {background: #2F3C4E;cursor: pointer; width: 15%; height: 3%;color: #FFF;font-weight: bold;border: solid #000;border-radius: 2px; font-size: 17px;padding: 6px 30px 6px 30px;margin-left: 15px;}

.credit {color: #fff;display: block;font-size: 13px;font-weight: 600;}

#Headline {text-align: center;color: #ffffff;font-size: 19px;line-height:18px;padding: 9px 0 0 0; margin-bottom: 8px;margin-top:4px;font-weight: bold;font-family: Sans-serif;}

</style>

</b:if>

Red Box

<b:if cond='data:blog.pageType == "item"'>

<style type='text/css'>

#Box {background: #E06F65 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQRF5ta-JSaLNFM0JKrpa0aQeT32uhx-BBQoDwLa0ygK2OQper4cT7o5qo9xW6hQu8oq_suPSWE1h2lEunQebsl5DXdMk9LvuZW-H61OwEIHAIF_nqQ30GVyQv-kuzTKljgdrKzjhbu8U/h120/quote1.png") no-repeat; background-position:5% 70%;text-align: center;width: 100%;display: block;margin: 10px 0 0px 0;height: 175px;}

.Internet-Email {color: #444242;width: 39%;height:50px;background: #fff;padding: 6px 0px 5px 30px;border-radius: 3px;margin: 5px 2px 0px 160px;}

.mail-button:hover {background: #000000;border: solid #000;}

.mail-button {background: #2F3C4E;cursor: pointer; width: 15%; height: 3%;color: #FFF;font-weight: bold;border: solid #000;border-radius: 2px; font-size: 17px;padding: 6px 30px 6px 30px;margin-left: 15px;}

.credit {color: #fff;display: block;font-size: 13px;font-weight: 600;}

#Headline {text-align: center;color: #ffffff;font-size: 19px;line-height:18px;padding: 9px 0 0 0; margin-bottom: 8px;margin-top:4px;font-weight: bold;font-family: Sans-serif;}

</style>

</b:if>

Customization

Replace #0D9BFF OR #6CB952 OR #E06F65 from your desire background color.  Add a new image address in between url(“Your-Image-Url-Address”), if you want to add a new image instead of default so replaced only image URL address with a new one.

Note: When you are replacing the image address so don’t forget to set its background position which is very necessary because default image is set with the box space.

Afterwards, find the below code.

<div class='post-footer'>

Guideline: The above code will be present two times so add the below code under the second one not at first.

Important Code: Paste the following code just below <div class=’post-footer’>.

<b:if cond='data:blog.pageType == "item"'>
<div id='Box'>
<div id='Headline'>
<p class='sub-para'>Subscribe Now and Get Professional Articles Directly in your inbox</p>
<p class='quote'>“A reader lives a thousand lives before he dies, said Jojen.<br/> The man who never reads lives only one.” <br/> ~ George R.R. Martin</p></div>
<form action='http://feedburner.google.com/fb/a/mailverify' class='btntEmailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=tips4tricx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input name='uri' type='hidden' value='tips4tricx'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='Internet-Email' name='email' onblur='if (this.value == "") {this.value = "Enter your Email Address";}' onfocus='if (this.value == "Enter your Email Address") {this.value = ""}' required='' type='text' value='Enter your Email Address'/>
<input class='mail-button' title='' type='submit' value='Subscribe'/>
<a class='credit' href='http://www.tips4tricx.blogspot.com/2015/10/quote-subscription-box-below-blogger-post.html'>Get This</a><br/></form>
<div class='clr'/>
</div>
</b:if>

Customization

Replace the default quote with your own favorite quote.

Finally, save the template.

Note: If this subscription box isn’t working on your template, so don’t worry paste the Important Code just above </b:includable> tag which you can find above of the below code.

<b:includable id='postQuickEdit' var='post'>