INTRODUCTION
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!
STEPS ON HOW TO VIBRATE YOUR NAVIGATION BAR USING MOBILE DEVICES IN BLOGGER
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'/>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(navigator.vibrate);
}
function vibr3() {
navigator.vibrate(50); //
}
function stepvibr() {
//
navigator.vibrate([50]);
}
</script>
You can change the number of highlighted above if you want.
<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"/>
onclick='vibr3();'
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.
Conclusion
I am hoping that this tutorial will help you boost your site navigation and make your blog website more responsive.