Data Firmware

Displaying your Blogger posts location tag on mobile templates other than Dynamic Views

Displaying your Blogger posts location tag on mobile templates other than Dynamic Views

Vanishing Location Information on Mobile

Im a big fan of tagging my Location on Blogger posts, especially on my travel blog, where I review restaurants, document my trips with tips for other travellers, etc. Blogger adds your location tag to the post in the post footer by default, which is great, but more and more people are browsing blogs on their mobile phones rather than the desktop.



As it stands, it seems if your Blogger blog is using the "Dynamic Views" template, the posts location information will be shown on both the desktop and the mobile view, including the address being a clickable link to a Google Map.

But I recently noticed that this is not the case for any other template. I tested out Bloggers other templates (Simple, Picture Window, Awesome Inc, Watermark, Ethereal, Travel, all of them!) and noticed that the location tag is not included when using these templates on mobile.

Heres a demonstration. Heres a test post I made, location tagged at beautiful Bass Lake. These are screen-shots from my phone. Notice the location info displayed here in "Dynamic Views" layout:



Great, I like that a lot. But what if Im not a fan of Dynamic Views, for one because it takes longer to load?

Heres the same post, with the blog template switched to "Simple":


As you can see, the location information is gone. How can we get it back?

A possible solution?

This can be fixed by adding a short bit of code to your blogs template, telling it to display the location on mobile. However, in my tests, this method only works:

• on SOME templates ("Simple" but not "Awesome Inc" for example) and
• seems to only work on blogs that do not use Google+ integration (i.e. still use the old Blogger profile)

Anyway, to try this, edit your blogs template HTML by going to (duh) Template -> Edit HTML.

*** First make a back-up of your blogs template, just in case something goes wrong ***

Now, in the HTML editor, you need to find this tag:

<b:includable id=mobile-post var=post>

This will contain the code for how your blog is displayed on mobile devices. You may or may not need to click the little arrow on the side to expand this entry.

Now all you have to do is add this bit of code to the spot where you want the Location displayed. For example, I like having mine displayed in the post footer, so I search for this (it was about 50 lines of code down from the mobile-post tag in mine):

<div class=post-footer-line post-footer-line-1>

Now then, right below this line, add in the special location-displaying code:

<span class=post-location>
<b:if cond=data:top.showLocation> <b:if cond=data:post.location>
<data:postLocationLabel/> <a expr_href=data:post.location.mapsUrl target=_blank><data:post.location.name/></a> </b:if> </b:if> </span>

And thats it! Now I save the template, and when I refresh my blog post, I see this:


The location details are back! Success!

Helpful Notes

If, like me, you are not a coder in any way at all, please take note: your blog HTML template is going to have multiple entries of the kind <div class=post-footer>. I wont even pretend to know what each of them does or why they all exist. All I can tell you is that this will only work if you put it in the section under that <id=mobile-post var=post> tag from above.

Also, as I mentioned above, Ive had limited success, depending on the particular blog template. Id love to hear your experiences with this. 

Credit

Credit for the majority of this idea goes to George B. Moga whose blog post here gave me the code used in this trick. I appreciate his support in trying to solve this.

P.S. This post is location tagged at beautiful Napa Valley, California. If the code works, you will hopefully see this post tagged (if youre reading on mobile) as such.

Get