Redirect Mobile Devices to Mobile Version Of Blogger Blog

Redirect Mobile Devices to Mobile Version Of Blogger Blog

Lately, I came up with an idea to redirect the web version of blogger's blog to the mobile version when viewed via mobile devices. For example, if you go to http://www.ikhwanesia.com/ via mobile or iPhones/iPods then you'll be redirected to the mobile version of this blog which is http://www.ikhwanesia.com/?m=1. Blogger doesn't support this feature so, we have to add our own custom script. Here's what i did to enable this feature.

The first step to Enable the mobile version of your blogger's blog, which you can find on my previous post Mobile Template For Blogger Blog. The next step is to add the script in HTML/JavaScript Gadget.

1. Go to your blogger Dashboard >> Design >>
2. Click on add Gadget Link.


3. Select HTML/JavaScript widget.
4. Copy and paste these code and save it.
5. Drag the gadget wherever you want save it again and you're done.

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "/?m=1";
}

else if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("/?m=1");
}
//-->
</script>

Note:
This tutorial is for bloggers blog. However, you can use this script on any other websites. . Just replace the /?m=1 tag with the full URL of the page you want to redirect to. eg: http://www.m.google.com/ For any queries, feel free to use the comments tab.


Reference: CSS-TRICKS

Share this