How To Add Subscribe Box With Ripple Effect And Flat Look In Blogger?

Friends, we all know that how much subscribers are important for us. That's why we often put an ordinary subscribe box to let our readers stick at our posts. But...I can bet. From that 'ordinary' subscribe box, no one would have subscribed your blog yet.

We have already introduced with some of the best subscribe boxes like shining subscribe box for adding attractiveness to your blogger blog. Now, I think it's 2016, and we should think better than that shiny one. Now, the world like professionalism instead of funky and flat designs. It's time for materialization and today; we are with a mixture of material design's component and an old flat design.

I think we know that these days, after making your blog, optimizing it correctly and collecting subscribers are the most difficult works, and every blogger should do this work.

Do you know what you totally need to get your users attracted towards a thing? It's:

1. Uniqueness
2. Professionalism

This subscribe have all. Professionalism, in its design and Uniqueness in its silent attractiveness.

Why Subscribe Box Is Important For Blogger Blogs?

Do you have this question in your mind? I mean, did this question arise in your mind? I think yes but if no, then you are an old Blogger. Am I right?

Actually, if a visitor of your blog subscribes to your blog, he receives, or she receives an email every time you update your blog. I mean, you post new content on your blog. So, isn't it useful? It will help to increase your blog and listen from your subscribers.

How To Add This Subscribe Box On My Blog?

Well, I would say that you should add a subscribe box on your blog. I am not actually forcing you to add this one only; you can add another subscribe box from another blog. But, you must add at least one subscribe box on your blogger blog.

Now, let's come to the main mudda. Which is, how to add this subscribe box in your blog.

Note: - We are using this subscribe box for more than a month, and we have actually seen the positive effect of this subscribe box.

Steps are following:

1. First of all, go to Blogger > Layout > Add a Gadget [Of Sidebar]
2. Now on your "Content" field, copy/paste the following set of codes:

<div class="subscribe-box"><div class="text-subscribe">Get'ur Daily Newsletter In Your Email<div class="bigger-text">For FREE</div><div class="text2-subscribe">Just put your email id in the below given field and then submit that "I'm In!" button. Then we'll send you a verification link in your Inbox. Just verify that link. Then we'll send you our newsletter daily in your email!</div></div>
<div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open

('http://feedburner.google.com/fb/a/mailverify?uri=BloggerGuiders', 'popupwindow', 'scrollbars=yes,width=550,height=520');return 

true" id="bg-embedded-subscribe-form" name="bg-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div>
 
 <input type="email" value="" name="EMAIL" class="newsletter-address" placeholder="Email Address" required />
    <div style="position: absolute; left: -5000px;"><input type="text" tabindex="-1" value="" /></div>
    <div class="clear"><input type="submit" value="I'm In!" name="subscribe" class="ripple-effect newsletter-submit" /></div>
    </div>
</form>
</div>
<div class="attention-subscribe">We would never spam you.</div></div>
<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>

3. Now, click on "Save" button.
4. Now, go to Blogger > Template > Edit HTML
5. Press Ctrl + F and find out ]]</b:skin> and above it, copy/paste the following set of CSS properties:

/********************************************
Subscribe (wanna) Widget By Blogger Guider
********************************************/
.subscribe-box {
background: #00ACF5;
color: #FFF;
letter-spacing: 1px;
text-align: center;
padding: 20px;
font-family: Oswald;
box-shadow: 1px 1px 2px;
}
.text-subscribe {
text-transform: uppercase;
}
.bigger-text {
font-size: 83px;
font-weight: 900;
}
.text2-subscribe {
font-family: Alegreya;
text-transform: capitalize;
margin-top: 3px;
line-height: 1.5em;
margin-bottom: 20px;
font-size: 12px;
}
input.newsletter-address {
width: 86%;
padding: 22px;
background: #008BC5;
color: #FFFFFF;
font-family: Oswald;
border: 0;
}
.newsletter-address::-webkit-input-placeholder {
color: #00ACF5;
}
input.newsletter-submit {
color: #FFF;
transition: ease .3s all;
font-family: Oswald;
cursor: pointer;
background: #005D84;
border: 0;
width: 100%;
padding: 10px;
font-size: 15px;
margin-top: 10px;
text-transform: uppercase;
}
.attention-subscribe {
font-size: 8px;
margin-top: 7px;
font-family: sans-serif;
}
input.newsletter-submit:hover {
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
input.ripple-effect.newsletter-submit:focus {
box-shadow: 0px 5px 10px 2px rgba(0, 78, 111, 0.43);
}

6. Now, save your template and you're done with all of it!

Note: - We haven't added any credits like other blog does. So, we would appreciate if you share this post. We hope you would. :)

Customize It!

• In the code above, replace red text with the text you want in the widget;
• In the code above replace BloggerGuiders with your Feedburner username;
• Search for #00ACF5 and then replace it with your theme color that want the background color of subscribe box;
• Search for #008BC5 to change the color of email box;
• Search for #005D84 and replace it with the hex color code for the color you want of the I'm In button.

[info headline='Information']Remove the code that is highlighted above with blue background if you have already added the ripple effect jQuery that we had shared in the previous post.[/info]

Final Words

I hope you liked this subscribe box a lot. If so, please comment any suggestion and we would try to implement it for you. Don't forget to subscribe to our newsletter. We would be more frequent now on Blogger Guider. Means, a lot of fun further!

Share this post