Posts

How To Add Click Vibrating Effect In Blogger

If you are looking for how to add a Click Vibrating Effect On Blogger website then this post is just for you.

I am Monish. I have been involved with coding for a long time. I will give you proper advice from long experience so let's start.

How To Add Click Vibrating Effect In Blogger

So without wasting important time let's check How To Add Click Vibrating Effect In Blogger?

You can see the demo here:-

Demo

How To Add Click Vibrating Effect In Blogger?

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Then find the code </body> and paste the following CSS Codes just above to it.

<script>/*<![CDATA[*/ 
var getar = document.querySelectorAll('.getar');
for (var i = 0; i < getar.length; i++) {
var getarr = getar[i];
getarr.addEventListener('click', function() {
navigator.vibrate(40)
});
}
/*]]>*/</script>

Step 5: Save or Publish the html changes by clicking on this icon

How to use it?

You just need to add class='getar' to the code where you want to make it shake. I'll show you an example with HTML code for a button.

Step 6: Then go to the post/page or place which you want to add Vibrating Effect

Step 7: Then if you are doing this in page/post then In post editor view, click icon at the bottom right of the title.Two options will appear: HTML view and Writing view, Select 'HTML View'.

Step 8: Now paste the following HTML code to that place

<!-- Button -->

<button class='getar'>Click here</button>

<!-- link -->
<a class='getar' href='#'>Click here</a>

<!-- div text -->
<div class='getar'>Click here</div>

You can change html texts as you want in the code box!

Step 9: Then Save or Publish.

For multiple class situation

The situation that already exit a class!

<button class='otherclass'>Hello World!</button>
<button class='otherclass getar'>Hello World!</button>

Terms of Use

To appreciate our workshop, consider keeping the credits in canons.

We do not allow to rewrite this post in any manner. Do not copy this post, canons or any part from this composition without authorization, it's rigorously prohibited.However, Legal conduct will be taken, If you do so.

Conclusion

In this article I have made a tutorial on How To Add Click Vibrating Effect In Blogger. I Hope you have liked this article and please do share with your friends and follow up blog for more.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © The Pro Project | All Rights Reserved

© Copyright:
www.the-pro-project.blogspot.com

Rate This Article

Thanks for reading: How To Add Click Vibrating Effect In Blogger, Stay tune to get latest Blogging Tips.

Getting Info...

About the Author

Hey there! I'm Farhan, a Web Designer, Graphic Designer as well as a Content Creator. I love to Redesign and create interesting things.

1 comment

  1. Good
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.