Your Blogger Blog Is Now Mobile Friendly

Blogger in Draft - Mobile Templates

Google’s Blogger is the largest blogging platform by far, hosting over 40 million individual blogs. While famous for the many spam blogs or “splogs” it hosts, the free service is also used by millions of legitimate bloggers including some well know ones like Google Operating System, PostSecret, the law blog Althouse and Michael Mace’s Mobile Opportunity.  It’s even used for some big corporate blogs like the official Twitter and Alexa blogs and all of Google own blogs such as the Official Google Blog and the YouTube, Gmail, Android Developers and Google Mobile blogs.

One thing that Google has lacked that competing hosted  blogging services like WordPress.com, Microsoft Spaces (now hosted on WordPress) and Livejournal have is a mobile friendly version.

It looks like Google has fixed that with a new mobile option that was quietly rolled out last month. Here’s how to enable it on your Blogger blog.

Go to Blogger In Draft at draft.blogger.com and log in with your Google account. Blogger In Draft is Blogger’s Beta or Labs site where new features are initially made available for public beta testing. Changes made using the Drafts interface apply to your live Blogger blog.

Click  Settings and then click Email & Mobile tab and select the radio button to turn on mobile templates (image above). Don’t forget to click the Save button when you are done. There’s also a Preview button that lets you see what the mobile version of your blog will look like before you commit to enabling it.

Blogger In Draft Mobile Home Page Blogger In Draft Mobile Detail

The mobile templates deliver your blog in a light-weight single column format. The home page (image above, left) is a list of recent posts with an excerpt and thumbnail image for each. Clicking on a post’s title, description or thumbnail opens the full post with all images and comments in a single page (image above, right). Images are re-sized to 300px wide but their is no pagination. This is fine for the WebKit based browsers that Blogger is targeting but can produce pages that are too large to load in some legacy mobile browsers.

To simplify the page and make it mobile friendly, the mobile templates remove most of your add-on Blogger Gadgets. Only your Header, Blog, Profile, AdSense and Attribution gadgets  will appear on your mobile blog. If you are using Adsense, mobile ads will be shown on mobile pages.

According to Blogger, if enabled, the mobile version will be served to smartphones with WebKit based Browsers. I didn’t find that to be strictly true, the mobile version was delivered to the iPhone, bada and Android browsers but not to the WebKit based Symbian browser.

Users of un-supported  mobile browsers like Symbian, Windows Phone and Opera Mini and Mobile will still see the desktop version. Fortunately, they can force the mobile version to appear in any browser by appending ?m=1 to the URL. There don’t seem to be any WebKit dependencies in the mobile template which worked well for me with the Symbian and Opera Mini Browsers.

So far not many Blogger publishers, not even most of the official Google blogs, have enabled the mobile templates. A couple that have are Blogger’s own Blogger Buzz (images below) and Blogger Buster, a 3rd party site covering Blogger.

Interestingly the ?m=1 trick works even with blogs that haven’t enabled mobile templates, for example; mobileopportunity.blogspot.com/?m=1

If you have a Blogger site, I recommend that you enable mobile templates, it will make your blog much more usable for millions of mobile web users, many of whom do not own a PC.

To help users of un-supported mobile browsers find your mobile edition, you can add a link to it on the desktop page. It’s easy, just go to your Design tab at draft.blogger.com, click on “Edit HTML” and scroll down until you see the <body> and  <div id=’outer-wrapper’> tags:

<body>
<div id=’outer-wrapper’>

and add a link to your blog’s mobile edition between the <body> and  <div id=’outer-wrapper’> tags as shown below:

<body>
<a href=’http://YourBloggerURL.com/?m=1′>Mobile Edition</a>
<div id=’outer-wrapper’>

(Replace “YourBloggerURL.com” with your actual Blogger URL).

This is a great feature and I hope every Blogger user enables it. Welcome to the mobile web Blogger.com, but what took you so long?

Blogger Buzz Mobile - Home Page Blogger Buzz Mobile - Single Post Page

16 thoughts on “Your Blogger Blog Is Now Mobile Friendly

  1. Just thought I’d mention that your redirection to draft.blogger.com says drafts.blogger.com and it kinda threw me off at first.

  2. It would’ve have been a lot of help if Blogger just automatically redirect opera-mini users to the mobile site

  3. Can anybody tell me is the place where I would put the link to make my blog mobile closer to the top of the page or closer to the bottom? I’ve been looking everywhere and cannot find it.

    Thanks!

    • Did you read the post? It tells you how to do just that by modifying the HTML template.

      If you want to be notified of follow up comments by email tick the “Notify me of followup comments via e-mail” checkbox below.

    • Yes, I read the post, but what I am trying to understand is exactly where under “Edit HTML” do I put it?

      I know the post was saying between the “body” and “div id” but the thing is, there are so many words in the “Edit HTML” section, I was just wondering if somebody could narrow it down for me, and tell me if where I need to put the link is somewhere in the beginning, in the middle, or towards the end of all the HTML.

    • <body> only occurs once in the template. It’s near the bottom. In Opera, Chrome or Firefox you can use your browser’s Find feature (Ctrl-F) to find it.

      Be sure you backup your template before modifying it in case you make a mistake

  4. I have been looking for a solution to just “auto zoom in” to the center table for viewing on mobile devices.

    This is kindda nice, but it seems to lose tabs as well as ads.

  5. Pingback: Retired Librarian: We're supposed to play with our blog

  6. Unfortunately (For publishers) Adsense ads are not currently appearing at sites accessed via Opera Mini, UC browser and native mobile browsers. As more and more peoples are accessing sites via mobile browsers, Adsense income has decreased considerably (At least for me). I hope the ads (Mobile ads) will again start appearing at mobile versions of the sites.
    Any way thanks buddy for sharing the trick of “Mobile edition”.

    • Even with the iPhone and Android devices I’m not seeing mobile ads on the mobile version of Blogger Buster or on a test site I created.

      Either the mobile AdSense feature is broken at the moment or else Google doesn’t have any ads available for your demographic.

      Insufficient mobile ad inventory is a big problem with all the mobile ad networks including Google. On my own sites I try to get an ad from three different networks and even then many pages go ad-less

  7. Joomla still don’t have anything like that by default, well, I would say that it should be included in the core components, I hope Joomla 1.6 will include this feature.

Comments are closed.