Vanishing Location Information on Mobile
I'm 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 post's 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 Blogger's 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.
Here's a demonstration. Here's 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 I'm not a fan of Dynamic Views, for one because it takes longer to load?
Here's 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 blog's 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)
Update: I heard from others that this does work on all templates, so give it a try!
Anyway, to try this, edit your blog's template HTML by going to (duh) Template -> Edit HTML.*** First make a back-up of your blog's 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'>And that's it! Now I save the template, and when I refresh my blog post, I see this:
<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>
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 won't 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, I've had limited success, depending on the particular blog template. I'd love to hear your experiences with this.
Credit
Credit for the majority of this idea goes to 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 you're reading on mobile) as such.
Comments