How to Vibrate Navigation Bar on your android phone in Blogger

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated


Did you know that we can enable vibration mode in your Android phones by editing our blogger themes. By tapping the navigation menu button, (click my navigation bar for the demo ) you can feel the vibration of your phone. By this, we can stay the users to stay connected by tapping the menu button on their mobile devices. Note, that we only apply vibration mode when using mobile phones.

Website navigation (in mobile view)  is a collection of user interface components that helps visitors find content and features on a site. These components take the form of copy, link text and buttons, and menus.

See figure 1.

We will be using codova plugin  to control the vibration in android mobile devices. 

Now lets start  VIBRATING our  navigation menu button!


Here in bloggerexpose, I will be teaching you on the steps on how we are going to vibrate navigation bar in your mobile device to make it more cool!

First, go to Blogger Then click on the Theme option 

Second Step is to click on Edit HTML. But before you Edit Html please have a back up of your theme.

After you open the Edit Html press CTRL+F and find <head> and copy script below <head> tag.
<script src='cordova.js' type='text/javascript'/>
        document.addEventListener(&quot;deviceready&quot;, onDeviceReady, false);

        function onDeviceReady() {

        function vibr3() {
            navigator.vibrate(50); //


        function stepvibr() {
You can change the number of highlighted above if you want.

Then press CTRL+F and find <![CDATA[ and paste the script below above <![CDATA[ 

<meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>
Final Step is to search for after the link url of your navigation menu and paste this after it


See the example below.

Finally we're done. Click save and see if your specific link on your navigation menu is/are vibrating. Touch my navigation bar for the demo and experience.


I am hoping that this tutorial will help you boost your site navigation and make your blog website more responsive.

Post a Comment

It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
Site is Blocked
Sorry! This site is not available in your country.