Blog Flak

Have you ever wondered what your Blogger blog looks like in mobile view and you don’t a have an internet capable phone handy? That’s easy, whatever your blogs URL is just add ?m=1 after the address in the address bar and hit Enter. It’s probably not very pretty! It doesn’t show your blog’s header image, just some text for the title unless you used a widget to insert an image. Here’s a sample view with no image before the hack:

Here’s another view of the same page after the mobile view hack:



That looks much better!

This is actually pretty easy to do and all you need is a reduced size image of your header image or background. The size must be no wider than 600 pixels, the height doesn’t matter but keep it as short as you can. You don’t want the file size to be too large for mobile phones to have to download.

Do not use the header widget to Resize the image to 600 pixels wide, because it actually just crops off any part wider than that, it’s not actually resized and looks like crap. You still want it to look good so keep that in mind when cropping or resizing your image. You probably want your blogs title to show in the image and that can be done by making a screenshot of your blog in your browser window and hitting Print Screen on your keyboard.

Once you make the screenshot, the image is now in your clipboard, open your favorite image editor and create a new blank image. It should be already sized to the size of your screen, then just paste the image in. Then crop the part you want to show in the mobile view. Save it somewhere in your files.

Next step is to go to the Page Elements of your blog and use the header widget to upload the image. Make sure you check “Instead of title and description” and click save.

Now there’s just one more step. When you look at your blog in normal view, you will now have two headers! The mobile one may appear over or above the original one, now we need to hide it with a small bit of code:

#header-inner {
display:none;
}

Copy then paste that code into the bottom of your blogs style sheet. You get there by clicking on Edit HTML and scroll down. Then save the changes and you’re done, the mobile image should now only display when viewed on mobile devices. Again, you can check the mobile view by just adding ?m=1 after the address.

I tried this on several different templates and it worked great. I have found that this mod will not work on some templates since the original writing, try this at your own risk. If your blog is a modified one there may be some differences in the code to achieve the desired end result. Let me know if you tried this and how it worked for you.