Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
It's 2013, almost every teen is using a mobile phone to access internet. Even I surf tons of wap pages on my Android everyday. Creating a mobile friendly site is a great idea to gain some extra views. Also, it'll be easy for your users to access a small mobile version of your site.
In this tutorial, I'll show you how to create a mobile friendly version of your Blogger blog. You can check mobile version of BWidgets by clicking here. We're going to do this tutorial in three simple steps. First step is important, while second step is optional, and third step is only for custom domain blogs.
Creating A Mobile Version:
There are lots of sites, which offers you to create free mobile site, and for that they put ads on your site, which totally sucks. However, some premium sites give you full access, but as I said they are premium.
We don't need a stinking service to create a mobile version of our site. We're going to use Blogger's mobile template for our site, which is best option. Blogger provides lots of amazing mobile templates for us. Some people don't use Blogger mobile template because they are ugly but that's not true. Click here to check our mobile site, which looks totally flawless. So here is how to turn on mobile template:
- Go To Blogger > Template > Click on Mobile option > Turn on mobile template and choose a theme for your blog:
After turning this option, you can access your mobile blog at http://yourblog.blogspot.com/?m=1
That's it for first step. Now, you can leave this tutorial here or you can check next step, if you want to remove Powered By Blogger option from your mobile template.
Removing Credits:
In February, we discovered a way to remove this attribution widget from both mobile and default template. ithout wasting any time, let's get started:
- Go To Blogger > Template > Edit HTML > Proceed
- Find and remove following code from your template:
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
- Find </body> in your template and just above it paste following code:
<div style='display:none;'>
<b:section class='hiddenbar' id='hiddenbar' preferred='no'>
<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>
</b:section>
</div>
- Save your template, it's done.
Let me explain this, instead of removing attribution widget, we hid this widget with css. If you only add mobile='no' property in your attribution, instead of this code, it'll only remove this widget from your mobile template.
If you're using free Blogger domain then this tutorial is over for you, but if you're using custom domain then don't forget to check next step.
Create A Mobile URL:
Time for a cool step. If you're using a custom domain, then why not give our mobile website a new address? I mean it'll be easy for your visitors to access your site from m.yoursite.com. In this step, I'll only explain what to do.
Visit your domain registrar, then visit your domain control panel and choose domain/sub-domain forwarding/redirecting. Now redirect m.yourdomain.com to http://www.yourdomain.com/?m=1.
If you're using GoDaddy, then you can learn more about domain forwarding at this link. As of writing, mobile url of BWidgets is not available, since our domain registrar doesn't provide this service, but soon I'll transfer my domain to GoDaddy.
Hope this tutorial helped you. Don't forget to leave a comment.
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
