How to Add Quote Subscription Box Below Blogger Post
HomeWidgetsWeb designing

How to Add Quote Subscription Box Below Blogger Post

Renovate your blogger blog with awesomeness by adding quote subscription box below blogger posts.

Add Geometric Design Subscribe Box in Blogger
Add Fresh Percentage Value to a Scrollbar in Blogger Blog
65 Best Responsive Web Design Testing Tools
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 PRO TECHNIFY 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/AVvXsEggcflVLfPidYH9Ggy2XhuibdPi2ZVVkka2gNaqp4dx18i9_U-dharuEI1RF0yTPgd-jlSxsMEs0BDW-anhVHqYtV8vMOVxXgMyRb3wgBLuAwGhwczjuxBRxm5KET8pzVDsHEmGrIEVgWs/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/AVvXsEgFEVGiC6AvquvhPt_DJuxsSr3GlKBJ9GqG4S6V7zxdI-bEgAjG0yzsZx12nsEtF8VDdwylThxhJFSVqI0dnUszUFGL0HkmuPKgzn1VUcISayeHvbXh_HT_hdWscIO6P9cagDePziZCJeY/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/AVvXsEj9QKWXQBI7tyho2Lfhf3WcgbOqNrjjuKoo137QiSlkHWtz5kYErEP2iToyvksLLMaWHU4pS-GjZqtk4_oRiuZuXQwQtKfyq7RkVeGdXDjtnwrL37ZpOcm7MoyoBRpz6xDce2Ch5EdToyk/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=protechnify', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input name='uri' type='hidden' value='protechnify'/>
<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.protechnify.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'>

Final Strokes

Now check your premium and unique subscription box which will surely be present below your blogger post. If still you are facing any type of problem in implementation so freely ask in the comments I will help you in implementation. I hope your visitors will like this subscription box and become your daily reader Cheers! And stay tune.
Loading...
Name

Android,2,backlinks,7,Blogger,46,blogger theme,1,Errors,1,How To,31,Make Money Online,2,SEO,13,SMM,10,Templates,9,Tools,7,Tricks,15,Web designing,18,Widgets,24,WordPress,4,
ltr
item
PRO TECHNIFY: How to Add Quote Subscription Box Below Blogger Post
How to Add Quote Subscription Box Below Blogger Post
Renovate your blogger blog with awesomeness by adding quote subscription box below blogger posts.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpsK6iGQpvSRTeTHhEjAgzlrRDThc9tu484nnXfXVGg8j9lFiPNzK_CwBPBgNzkBUEiOvP1TbMV0smC3xMHEtf_E6oyZ7IFfU-a5IUNu7huGqaH-BoVfB26rMB6tlVuqWMciTh5dK5IAjX/s640/Quote-subscription-box-below-blogger-posts.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpsK6iGQpvSRTeTHhEjAgzlrRDThc9tu484nnXfXVGg8j9lFiPNzK_CwBPBgNzkBUEiOvP1TbMV0smC3xMHEtf_E6oyZ7IFfU-a5IUNu7huGqaH-BoVfB26rMB6tlVuqWMciTh5dK5IAjX/s72-c/Quote-subscription-box-below-blogger-posts.jpg
PRO TECHNIFY
https://protechnify.blogspot.com/2015/10/quote-subscription-box-below-blogger-post.html
https://protechnify.blogspot.com/
https://protechnify.blogspot.com/
https://protechnify.blogspot.com/2015/10/quote-subscription-box-below-blogger-post.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