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.
