Showing posts with label templates. Show all posts
Showing posts with label templates. Show all posts
Saturday, August 6, 2016
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)
Update: I heard from others that this does work on all templates, so give it a try!
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>And thats 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 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 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.
Sunday, July 31, 2016
Force Blogger Dynamic Views to ignore mobile templates
Force Blogger Dynamic Views to ignore mobile templates
 |
| 10wontips in "Mosaic" view on a mobile device |
Background
Bloggers "Dynamic Views" templates can be very lovely and useful. But previously, one limitation was that you were limited to using the "Classic" view for your mobile audience. This could be fine for some, but I suspect that the whole reason people would choose to use a Dynamic View template is to highlight more of their collection of posts, rather than just the newest. Using a Dynamic View on mobile, especially the "Mosaic" or "Flipcard" view, actually works quite well, as it is automatically responsive to the size of the screen.
It makes sense, then, to use these "dynamic views" (hence the name) on all screen-sizes. Sure, not every View looks great on a mobile screen, but some look and function fabulously. Just for an example, you can see here what the "Mosaic" view looks like for this blog on a 5-inch screen smartphone, in the Chrome browser for Android.
This has always been possible by appending the URL with a "/?m=0" suffix, forcing it to use the non-mobile template. But what if you want your visitors automatically directed to the non-mobile view when browsing on a mobile device?
Blogger supposedly gave you the option of disabling any special "mobile" by choosing "No. Show desktop template on mobile devices."
However, it was clear that this didnt work when using a Dynamic View template. It would only revert your blog to the "Classic" dynamic view for mobile viewers, no matter what view was applied to the "desktop" version.
Solution Intro
But dont worry. You can utilize these Dynamic Views even on mobile devices with a simple change to your blogs template code. There are basically three ways, and all involve editing basically one line of code. Go to your blogs template settings and choose "Edit HTML". Hit Control-F inside the code box and do a search for "MobileRequest". That should bring you right here to this section of code which well be using:
<b:if cond=data:blog.isMobileRequest> <script expr_src=data:blog.dynamicViewsScriptSrc + "/js/classic.js" type=text/javascript/> <b:else/> <b:if cond=data:skin.vars.blitzview> <script expr_src=data:blog.dynamicViewsScriptSrc + "/js/" + data:skin.vars.blitzview + ".js" type=text/javascript/> <b:else/> <script expr_src=data:blog.dynamicViewsScriptSrc + "/js/sidebar.js" type=text/javascript/> </b:if> </b:if>I list 4 methods below, but honestly, I think #4 the best choice. Ill keep the others here for your information, but hey, if youre busy, just scroll down to #4.
Method #1: Remove the mobile view option
One way to force the desktop view is to remove the code that checks to see if the blog is being accessed from a mobile device. In the code above, find and delete the colored lines.
<b:if cond=data:blog.isMobileRequest> <script expr_src=data:blog.dynamicViewsScriptSrc + "/js/classic.js" type=text/javascript/> <b:else/> <b:if cond=data:skin.vars.blitzview> <script expr_src=data:blog.dynamicViewsScriptSrc + "/js/" + data:skin.vars.blitzview + ".js" type=text/javascript/> <b:else/> <script expr_src=data:blog.dynamicViewsScriptSrc + "/js/sidebar.js" type=text/javascript/> </b:if> </b:if>
This will force the blog to use whatever Dynamic Template View has been set for the full "desktop" version. One problem, however, is that widgets/gadgets will be missing from the resulting mobile view.
Method #2: Customize the mobile view option
In the original code above, find this line:
<script expr_src=data:blog.dynamicViewsScriptSrc + "/js/classic.js" type=text/javascript/>Notice that it shows "classic" there. Thats the code thats making the blog revert to the Dynamic Templates "Classic" view when viewed on mobile. You can edit this to be any of the available Views: Classic, Flipcard, Mosaic, Magazine, Sidebar, Snapshot, or Timeslide. This is handy in case you want to use two different template views: one for desktop and a different one for mobile. The mobile template chooser in the Blogger GUI allowed that option only for standard templates, but this way you can do it with Dynamic Templates too.
One downside here is that it seems, again, widgets/gadgets wont show up.
Method #3: Redirect to the desktop view when accessing the mobile site
This is a bit of a nuclear option. In this method, we simply redirect all would-be mobile traffic to the blogs non-mobile, desktop home. For this, find the same part we just edited above:
<script expr_src=data:blog.dynamicViewsScriptSrc + "/js/classic.js" type=text/javascript/>
And change it to this:
<script> window.location="http://YOURBLOGNAME.blogspot.com/?m=0"; </script>
This way, any visitor that lands on your blogs mobile site will be redirected to the "full" version. This also ensures normal widget/gadget operation. Hat tip to this post at Blogtimenow. The downside is that any mobile page view will redirect to the blogs non-mobile home. This can be a problem when, for example, someone on mobile follows a link to a specific post on your blog. Theyll get the "mobile" redirect back to the blogs non-mobile home, and have to go find the post manually. Not ideal.
Method #4: URL redirect to equivalent non-mobile page
This is the best method in my opinion. This will simply use the mobile-check feature like above, but if a mobile device is found, it will simply edit the page URL from m=1 to m=0, thereby taking you to the non-mobile version of that page.
<b:if cond=data:blog.isMobileRequest><script>var url = window.location.toString();window.location = url.replace(/m=1/, m=0);</script>
This gets around the problem of Method #3. Now, widgets/gadgets should continue to work, and any links to particular posts will stay in-tact and simply direct you to the desktop, non-mobile version of that post. Perfect! Huge hat-tip to Matt Ball over at Stack Overflow for this idea.
Final Thoughts
Bloggers "Dynamic" Templates have a lot of amazing strengths. Its just too bad that Blogger built something so cool and then sort of left us to ourselves in modifying and editing them. Southern Speakers is a must-have resource if you use Dynamic Views. I do not, for this particular blog project at least, because of the widget/sidebar limitations. I just like the way this one looks :-) But for family blogs and/or project blogs, I prefer Dynamic Views.
Good luck.
Subscribe to:
Posts (Atom)