Jan 31, 2016

How To Add Ripple Effect On Blogger Elements

First, I'm so sorry guys because i'm unable to read and reply your mails in previous days because there is marriage of my cousin brother. So, I am so sorry.  Now lets discuss about this post. This post is about adding ripple effect on blogger elements. "It's an effect that occurs when we click on any element (web page element), and it is like when we mistakenly drop a drop of ink on paper." Now question is why we should add it on our blog?

Actually it is not necessary but adding it on blog can attract more visitors on your blog because it has pretty look and effect. When a new visitor comes to your blog and click on the button where you have add this ripple effect then he/she attract to your blog, because this is never seen effect. You can see live demo of this effect from below button.

Actually, you can find this effect in almost thousands of blogs on internet, but the language and steps mentioned on those blogs are too confusing and also, those all steps are for developers you can say like me ;)  That's why we decided to post this ripple effect on our blog to make our readers able to use this effect without facing any serious problem if they are developers or non-developers. So if you want to Add the new and materialized ripple-effect on your blogger blog then follow below simple guide.

How To Add Ripple Effect On Blogger?

To use this effect we must have to implement some CSS coding of this effect inside our blogger template. So for implement that CSS coding follow below steps carefully.
  • Go To Blogger >> Template >> Edit HTML.
  • Now click anywhere inside code area and press CTRL+F and search for </head> tag.
  • Now paste below code just above of </head> tag.
      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)})});

  • Now again search for ]]></b:skin> tag and paste the following code just above of it:
@-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);
  • Now save template.
  • You have added it successfully.

Now question  is how to add this effect on blogger elements then let me describe it.

How To Use Ripple Effect in Blogger?

For using it, you just have to add ripple-effect as a class. If you are non-developer, you'll find some difficulty in using it. So, here's a quick line to help you use it.

1st Example >> Suppose, I have a button, and its HTML is:

And now, if you want to add ripple effect on it, you would change the above code to below code:
<button class='ripple-effect'>Hello</button>

2nd Example >> What if we have code like this:

<button id='anything' class='anything'>Hello</button>
In this case, you would just add ripple-effect after second anything:
<button id='anything' class='anything ripple-effect'>Hello</button>
  • That's it. Hope you understand how to use it on blogger.

Our Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.


So above guide is about How To Add Ripple Effect On Blogger Elements? Hope by this complete and simple guide you can easily add this effect on every blogger element. If anyhow problem persist after following steps then let me know. I'll help you out of sure. Don't forget to give your feedback by using comment box. Now share it on social networking sites. Thank you.

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.