Make Blog or Website Mobile Responsive
Make Blogger blog mobile friendly – Redirect mobile users to mobile site
Trends in technology have been changed and that is mainly when smart phones and tablets arrived. Do you have any idea about visitors who arrive to your blog from mobile devices? People enjoy viewing your blog only if your blog is mobile friendly. So to grow your audience you must design your blog for both normal users (desktop/laptop) as well as mobile users. Here we will see how to make Blogger blog mobile friendly.
How to make Blogger blog mobile friendly (Blogger mobile version)
Do you know that your Blogger blog supports mobile devices and it has various templates to choose from? Just add ?m=1 at the end of your blog URL and you can see the mobile version of your blog. If you don’t, then you just have to activate this feature.Blogger blog mobile template
- Login to your Blogger account
- In your blog dashboard head to templates
- Now in templates you will see mobile version. Just click on the gear icon to enable and customize your mobile template
- Check the option that says “show mobile template on mobile devices”.
Also you will have 7 different templates to choose from. Just select one that perfectly fits your blog, preview it and then save changes when you are done.
Now your Blogger blog is ready for mobile devices. Just add ?m=1 at the end of your URL and you will see your blogs mobile version.
How to redirect mobile users to mobile site in Blogger
All users who are viewing your blog on mobile devices should be automatically redirected to your mobile template, but Blogger fails to do that. By adding a piece of code in to your blogs template you can redirect your mobile users to your mobile site. Here is how you do that. | |
|
<script>
if(/if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ) {
window.location.href="http://yourblog.blogspot.com/?m=1";
}
</script>
Redirecting mobile users to mobile template
- Login to your Blogger blog dashboard and head to your templates area.
- Now in templates you will see your web version as well as your mobile template.
- Click on edit HTML under web version and find out the <head> tag
- Now paste the above script just below to <head> tag.
In the above code, just replace yourblog.blogspot.com with your blogs homepage URL. Also make sure that you have added ?m=1 at the end of your URL (Blogger mobile URL). That’s it; you’re done and from now on all your mobile visitors will be automatically redirected to your mobile template.
The above script detects all your blog visitors who come via Android, iPhone, iPad and BlackBerry devices. It detects and simply shows your blogs mobile template. Note the above script redirects mobile site and so you can use it on websites other than Blogger.
