Aug 19, 2016

Stylish Subscription Box for Blogger! Add to Below Post.

data:blog.title
Below Post Subscribe Box, Blogger Subscription Box
Everyone know Feedburner is the only free source to collect email newsletter subscribers and increase their blog's page views  and without the readers and subscribers blogs are meaningless. As you know subscription box widget help their blog owner to grow up their email subscriber list and it also helps to the blog readers to get free newsletter from their loved ones blog. If you have huge subscriber list than there is no need to promote your blog content because it automatically send the newsletter to your subscriber whenever you published the new article on your blog.

Placing a Email Subscription Box to Each Post's footer is good idea to increase email subscribers for your blog. So, We highly recommend everyone to must have a feedburner subscribe box on your blog to gain new subscribers for their blogs. Although a subscription is none of use when it is not unique, stylish and professional. We think you have understand what we want to say. Yes guys attractive and professional look widgets attract more visitors to your blog and also having a attractive and stylish subscribe box widget can also increase mail subscribers for your blog.

Most of us use feedburner in order to send to blog readers and subscribers. Therefore we have designed a unique, professional and stylish feedburner email subscribe box for all of you. You can add it on each post's footer of your blogger blog. Actually, this widget we have designed for one of our upcoming blogger template, which we are going to share on tomorrow with all of you. We hope you will like because it was free and have stylish, professional and unique look. Below we are going to attach a demo screenshot and a live demo button. Have a look on it before adding it on your blogger blog.

Below Post Email Subscribe Box, Subscription Box for Blogspot, Below Post Subscribe Box, Blogger Subscription Box

Live Demo

Also Read : Stylish Pop-Up Email Subscribe Box Widget for Blogger.

So, we hope you have liked it and now you want to add it on your blogger blog to increase your email subscribers. But before adding it on your blogger blog you should know why to add this widget on your blogger blog? What is special in this widget? Read below features of this email subscribe box widget.

Features of This Email Subscribe Box Widget

There are many good features which we have added it in this email subscribe box widget. Features are given below.
  1. Neat & Clean Widget.
  2. Made With Pure CSS, HTML and JavaScript Language.
  3. Email Subscribe Box Has Light Theme.
  4. Gradient Background with CSS Language.
  5. Added Ripple Effect On Sign Up Button.
  6. Responsive Design.
  7. Very Fast Loading.
  8. Light Theme.
  9. Pleasant Look for eyes.
  10. No Need to say, It has also Stylish look.
Also Read: Another Stylish Below Post Email Subscribe Box for Blogger.

So, now we are going to explaining how you can add this widget on your blogger blog to below of each post. Lets follow the all below steps carefully to save yourself to making a mistake inside your blogger template code area. Follow instructions below.

How To Add Email Subscribe Box to Below of Each Blogger Post?

Note1: Before doing any customization inside your blogger template code are must download a backup copy of your blogger template to save yourself to facing a big problem if you do any mistake. Having a backup copy of blogger template before doing customization is a good habit of blogger users.
STEP1] Go To Blogger >> Choose Your Blog >> Click on Template >> Now Click On Edit HTML.

STEP2] Now, Using CTRL+F (Windows) or CMD+F (Mac) Search for <head> tag inside your blogger template code are and paste below FontAwesome Stylesheet Link just below of this.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>

STEP3] Now again Using CTRL+F (Windows) or CMD+F (Mac) Search for ]]></b:skin> tag inside your blogger template code are and paste below code just above of this.

Note2: You don't have permission to share my codes on your blog in any condition. Respect the hard work of developers.

///******************************************************////
Ripple Effect by MyBlogger
///******************************************************////
@-webkit-keyframes ripple-animation {
0% {
-webkit-transform: scale(.01);
transform: scale(.01);
}
100% {
-webkit-transform: scale(5);
transform: scale(5);
}
}
@keyframes ripple-animation {
0% {
-webkit-transform: scale(.01);
transform: scale(.01);
}
100% {
-webkit-transform: scale(5);
transform: scale(5);
}
}
/*  Subscription Box V2 by:   www.MyBloggerGuides.com  */
div#MBG-Sub-Boxv2 .wrap-mev2:hover{box-shadow: 4px 4px 4px 4px #444444;}
div#MBG-Sub-Boxv2 .wrap-mev2 {
margin: 0 auto;
display: block;
padding: 30px 20px;
box-shadow: 4px 4px 4px -4px #444444;
box-sizing: border-box;
background: linear-gradient(135deg,#f4f8ff 0,#f4f8ff 49%,#e5efff 49%,#e9e8f2 100%);
padding: 12px 0px 1px 0px;
clear: both;
text-align: center;
display: block;
margin: 10px 0;
height: auto;
}
.MBG-Enter-Emailv2 {
color: #444242;
width: 50%;
height: 45px;
background: #fff url(https://lh4.googleusercontent.com/-dPJx9mWYWPw/UtV5aN-6mRI/AAAAAAAAAJs/ibo7iZsN4nw/h120/MAIL.png) no-repeat 15px 19px;
padding: 5px 0px 5px 38px;
border-radius: 2px;
border: 1px solid #000;
margin-top: 36px;
float:left;
margin-left:30px;
}
.MBG-Buttonv2:hover {
background: #111;
box-shadow: 4px 4px 4px 4px #444444;
}
.MBG-Buttonv2 {
width:30%;
background: #0c6aff;
font-family: normal, FontAwesome;
box-shadow: 4px 4px 4px -4px #444444;
  cursor: pointer;
color: #fff;
font-weight: bold;
text-shadow: 2px 2px 2px #444343;
font-size: 40px;
padding: 5px;
  margin-top:-30px;
}
.MBG-Creditv2 a{color:#0c6aff}
.MBG-Creditv2{
text-align: right;
padding-right: 10px;
padding-bottom: 10px;
color: #CAFFFD;
font-size: 10px;
font-family: Lobster, FontAwesome;
margin-top: 7px;
}
.MBG-Headlinev2 {
text-shadow: 2px 2px 2px #fff;
text-align: center;
color: #0c6aff;
font-size: 30px;
font-family: Arial, FontAwesome;
line-height: 1.1em;
}
@media screen and (max-width: 500px){
.MBG-Enter-Email{width:60%; margin-top:5px; margin-left:10px; margin-right:10px;
float:none;}
.MBG-Button {width:auto; font-size:30px;}}
STEP4] In above step we have added the CSS Part of this widget. Now wea re going to Add HTML Part of This email subscribe widget. To add HTML Part Search for <div class='post-footer-line post-footer-line-1'> and paste below HTML Code just after of it.

(Don't save it, Changing required in this code area. To see what you have to change scroll down this post.)
<b:if cond='data:blog.pageType == "item"'>
<!-- Below-Post-Subscribe-Box-Start -->
<div id='MBG-Sub-Box'><div class='wrap-me'><div class='MBG-Headline'>Subscribe Us &amp; Get Latest Updates Direct into Your Mailbox!</div><form action='http://feedburner.google.com/fb/a/mailverify' class='MBGEmailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerGuides&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input name='uri' type='hidden' value='MyBloggerGuides'/> <input name='loc' type='hidden' value='en_US'/> <input class='MBG-Enter-Email' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' required='' type='text' value='Enter your email...'/><br/><br/><input class='MBG-Button ripple-effect' title='' type='submit' value='Sign Up'/><div class='clr'/><div class='MBG-Credit'> <a class='ripple-effect' href='http://www.mybloggerguides.com/2016/08/add-stylish-subscription-box-below-blogger-posts.html' target='_blank'><i aria-hidden='true' class='fa fa-download'/> Get Widget</a>
</div>
  </form>
</div>
</div>   
<!-- /Below-Post-Subscribe-Box-Ends -->       
</b:if>

Possible Customization

This Color - To Change The Text Area.
This Color - Change it With Feedburner Id(URL). If you don't have Feedburner of your blog. Then go and create one.

STEP5] Now, Search for </head> tag and paste below script code just above of the </head> tag inside your blogger template code area.

<script>
          //<![CDATA[
          jQuery(document).ready(function(e){e("body").on("click",".ripple-effect",function(t){t.preventDefault();var i=e(this),a=i.attr("data-ripple-limit"),n=i.attr("data-ripple-color");if("undefined"==typeof n)var n="rgba( 0, 0, 0, 0.3 )";var o=i.attr("data-ripple-wrap-radius");if("undefined"==typeof o)var o=0;if("undefined"==typeof a)var r=i;else var r=i.closest(a);var p=r.offset(),d=t.pageX,s=t.pageY,f=r.outerWidth(),l=r.outerHeight(),u=e('<span class="ripple-effect-wrap"></span>');u.css({width:f,height:l,position:"absolute",top:p.top,left:p.left,"z-index":1e4,overflow:"hidden","background-clip":"padding-box","-webkit-border-radius":o,"border-radius":o});var c=i.attr("data-ripple-wrap-class");"undefined"!=typeof c&&u.addClass(c),u.appendTo("body");var b=d-p.left,m=s-p.top,g=1e3,h=e('<span class="ripple"></span>');h.css({width:g,height:g,background:n,position:"absolute",top:m-g/2,left:b-g/2,content:"","background-clip":"padding-box","-webkit-border-radius":"50%","border-radius":"50%","-webkit-animation-name":"ripple-animation","animation-name":"ripple-animation","-webkit-animation-duration":"5s","animation-duration":"5s","-webkit-animation-fill-mode":"both","animation-fill-mode":"both"}),e(".ripple-effect-wrap:last").append(h),setTimeout(function(){u.fadeOut(function(){e(this).remove()})},500);var v=i.attr("href"),w=i.attr("target");w||(w="_self"),"undefined"!=typeof v&&"#"!=v.substring(0,1)&&setTimeout(function(){window.open(v,w)},200),(i.is("input")||i.is("button"))&&setTimeout(function(){i.removeClass("ripple-effect"),i.trigger("click"),i.addClass("ripple-effect")},200)})});
          //]]>
    </script>

STEP6] Now, Click on save template button.

That's it. You have added email subscribe box to the footer of your blogger blog post. Open any post of your blog and see it live on your blog.

Also Read: How To Add Stylish Email Subscription To Each Post's Footer in Blogger?

Conclusion:

So above guide is about "How To Add Stylish Email Subscribe Box to the Below Of Each Post in Blogger?" We hope by this guide you have added this on your blogger blog. If anything goes wrong or you are facing any problem in its responsiveness then drop a comment below. We will help you out of sure.  Did you like this subscribe box? Do Subscribe us to get out Next Updates direct into your mailbox. Do Share it. 
Thank You! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.