Friday, January 22, 2016

Force Blogger "Dynamic Views" to ignore mobile templates


Dynamic templates  "Mosaic" view on a mobile device
10wontips in "Mosaic" view on a mobile device
Today I'll show you how to get desktop, non-mobile templates working on mobile if you use Blogger's "Dynamic Views".

Background


Blogger's "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 didn't 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 don't worry. You can utilize these Dynamic Views even on mobile devices with a simple change to your blog's template code. There are basically three ways, and all involve editing basically one line of code. Go to your blog's 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 we'll be using:
 <b:if cond='data:blog.isMobileRequest'>        <script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/classic.js&quot;' type='text/javascript'/>      <b:else/>        <b:if cond='data:skin.vars.blitzview'>          <script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/&quot; + data:skin.vars.blitzview + &quot;.js&quot;' type='text/javascript'/>        <b:else/>          <script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/sidebar.js&quot;' type='text/javascript'/>        </b:if>      </b:if>
I list 4 methods below, but honestly, I think #4 the best choice. I'll keep the others here for your information, but hey, if you're 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 + &quot;/js/classic.js&quot;' type='text/javascript'/>      <b:else/>        <b:if cond='data:skin.vars.blitzview'>          <script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/&quot; + data:skin.vars.blitzview + &quot;.js&quot;' type='text/javascript'/>        <b:else/>          <script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/sidebar.js&quot;' 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 + &quot;/js/classic.js&quot;' type='text/javascript'/>
Notice that it shows "classic" there. That's the code that's 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 won't 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 blog's non-mobile, desktop home. For this, find the same part we just edited above:

<script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/classic.js&quot;' type='text/javascript'/>
And change it to this:
<script> window.location=&quot;http://YOURBLOGNAME.blogspot.com/?m=0&quot;; </script>

This way, any visitor that lands on your blog's 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 blog's non-mobile home. This can be a problem when, for example, someone on mobile follows a link to a specific post on your blog. They'll get the "mobile" redirect back to the blog's 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


Blogger's "Dynamic" Templates have a lot of amazing strengths. It's 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.

20 comments :

  1. I tried #4 but my blog just stopped loading completely. I'm no expert at this; am I just meant to be replacing the code in the box above with the code in #4?

    ReplyDelete
  2. I got it working with a bit of trial and error. Thank you so much! I have been looking for a solution to this for ages!

    ReplyDelete
    Replies
    1. Yeah I had to figure this out by trial and error myself. Anyway glad it worked for you.

      Delete
  3. I'm using the mosaic view and put a CSS to view only the mosaic view. I'm not neither an expert... I ve tried several times various of your tips but it is not working... It just skip to another dinamic view both computer and phone... Could you explain where to put code in #4?

    Thank u very much!

    ReplyDelete
  4. Actually when I try all theses codes, it just skip on smartphone and computer to view classic...

    ReplyDelete
  5. Okay... Aftera lot of errors...I still don't know but now it works!

    Tank you very much for this post

    ReplyDelete
    Replies
    1. Haha well I'm glad you got it working!

      Delete

    2. I loved your site. How did you get? None of these are working with me.

      Delete
  6. I tried a lot and I did it. my mistake was to put Flipcard (uppercase F). When I changed I had an event.
    I did not have to delete anything, just edit a word:
    expr: src = 'data: blog.dynamicViewsScriptSrc + & quot; /js/flipcard.js"' type = 'text / javascript'

    ReplyDelete
  7. Hi, I am desperate for option 4 to work, but I am also not sure what exactly to replace. Could you please specify exactly. If I replace the entire top section with the 4 code it does not work. I don't use a phone, but maybe my solution is working: https://sylsabastian.blogspot.com/

    ReplyDelete
    Replies
    1. Replace just the first "IF" statement.

      In other words, look at Method 1. See the colored section there? Replace that with the code from Method 4. That should work.

      Delete
    2. Thanks very very much for the response. I did get it working. One of the problems was the setting for how the posts show and jump breaks. Post have to be set to full and it seems removing jump breaks helps.

      Just in case, I have a particular need to get the labels on inside the Flipcard to show based on frequency of label used, most frequent showign first. Any idea how that might be done?

      Thanks again for the tip and the response.

      Delete
    3. Ah, for me, if I replace the then it fails to work entirely. Seems like the is part of the color change. Hard to see a bit. When I leave it in, all good, which is what I ended up doing originally.

      Delete
    4. Sorry, I'm not sure how the labels could be re-ordered if the Layout options aren't affecting it already (and on Dynamic Views, they seem not to).

      Delete
    5. Thanks for the response. I'll just make a post or page and link it in the pages gadget. Then I can arrange the labels manually. I'm getting all my blog probs resolved, only one I have not yet found a solution to is getting the background colour of my posts to show in the subscription emails. My custom backgrounds used to show in the emails, then suddenly stopped. No idea why. Any ideas on how I can get the post background to show in the emails again?

      Delete
    6. You could try displaying the Labels widget on a stand-alone page. Google more on that as I'm sure others have done it before. Much easier (and auto-updating) than doing it manually. Plus there are various scripts that should do it for you too if you use a stand-alone page.

      I highly doubt the background color of emails can be adjusted. You can tweak that in the Feedburner settings but since it pulls from your RSS feed it's very unlikely you can change it.

      Delete
    7. Ah thanks, I'll try that on the labels. :) The mystery is that the background colour used to display in emails.

      Delete
    8. You might want to try this. It looks very nice.

      https://almost-a-technocrat.blogspot.kr/2017/04/how-to-create-toc-label-based.html

      Delete
  8. This comment has been removed by the author.

    ReplyDelete