Data Firmware

Export Blogger archive to Google Calendar or iCal

Here is a way to export a Blogger archive file to your Google Calendar, or any iCal-based calendar program.

Background: Blogger .xml archive -> iCal .ics file

Basically, I was looking for a way to recreate the sort of "Timehop" feature where what you were doing on social media "On this Day..." would resurface on that day years later. You know, like with Facebooks "On this Day" feature or Google Photos "Rediscover this Day". But I couldnt find any such thing for a Blogger blog, and you might have years of old embarrassing posts that youd love to relive. Why leave them just sitting unread? Relive them each day by having those old posts appear (either as links or full entries) in your calendar.

So I haphazardly found a way to import those posts into Calendar, so that I can set them as recurring events. Now Im no programmer or app author. Basically, I just manually edited my Blogger archive file with a bunch of Find/Replace commands, until it met the standards of an iCal file for importing to Google Calendar. In other words, I manually transformed the file from one type to another. Its a totally do-it-yourself way.

Now like I said, Im no expert and I am 100% sure there are better ways to do this, and someone much smarter than me could probably write a self-contained program or macro to do this automatically. But Ive never found a program like that to convert Blogger archive .xml files to .iCal files. So I had to make do with my own limited knowledge.

But Im hoping that following these copy/paste instructions can save you the hassle of figuring out the code manually, and can help semi-automate this process so that you can convert over the file quickly and hopefully painlessly. Just copy/paste these strings into the Find/Replace box and in about 5~10 minutes you should be ready to go.

Tool: Notepad++

The only tool you will need is a text editor program called Notepad++.
I chose this because its free, open-source, and works great with regular expressions. I used version 6.8.8.

Find/Replace dialog box in Notepad++

This is the Find/Replace dialog box in Notepad++. We are going to basically use this and only this. A lot. So get comfortable with it.

And before we start double-check that "Regular expressions" is selected and ".matches newline" is checked.

The iCal format

So a basic iCal file follows this format. I need to make my blog archive file look like this. This will be the template style that were aiming for.

BEGIN:VCALENDAR
PRODID:<Test>
VERSION:2.0
BEGIN:VEVENT
DTSTART;VALUE=DATE:20160130
RRULE:FREQ=YEARLY
DESCRIPTION:here is some entry content. Looking good my man.
SUMMARY:here is the event title aka blog post title
END:VEVENT
END:VCALENDAR

As far as I could tell, Google will only successfully import the file if you have these items as a minimum. OK, lets start.

Open the Blogger archive .xml file in Notepad++.

Part 1 - Preliminary file clean-up

Step 1.1 - Beautify (Optional)

You dont have to do this, but I recommend it. The big block of code on your screen is ugly, confusing, and unorganized, and its difficult to see where items start and stop. So I suggest installing the "XML Tools" plugin via Notepad++s Plugin Manager.

Once its installed, find it in the plugins menu and choose the menu option "Pretty Print - XML only". Now the code looks organized and clear.

Step 1.2 - Clear the junk out

OK, now lets start the editing. Remember, for everything we do, ensure in the Find/Replace box that "Regular expressions" and the ".matches new line" boxes are checked.

[We just want your entry data, but the Blogger archive file includes lots of information about your settings, template, etc. It seems to store this data as unused blog "entries." Since we dont need that data and only want the post content, lets remove it all.]

Use the "Find..." command to find this in the file:
BLOG_USE_LIGHTBOX

Youll probably get back three results, but all are in the same blog entry (i.e. between a pair of <entry> and </entry> tags). Which ever entry includes this BLOG_USE_LIGHTBOX code will be the final of the useless unused blog entires, meaning your real, first, actual blog post starts after this entry.

So with your eyes, look down a few lines from the last BLOG_USE_LIGHTBOX and find the first <entry> tag just below. Overall, for my test archive file, this was around line 3460.There are lots of <entry> tags so make sure youve got the right one.

Now delete EVERYTHING above that <entry> tag.

Youll be left with just actual blog posts.

Step 1.3 - Delete useless blog post info 

Now we start using Find/Replace to remove the bits that are useless to us. So use the Find/Replace function to Find each of these items (yes, one at a time because Im not a programmer) and Replace them with nothing (leave the Replace box blank).

These functions will find these tags and all the content between them, and remove it. Just paste each of these one at a time into the "Find" box, make sure the "Replace" box is empty, and hit the "Replace All" button. Repeat for each:

• <id.*?</id>

• <author.*?</author>

• <updated.*?/>

• <media.*?/>

• <category.*?/>

• </title>

• <link rel=edit.*?/>

• <link rel=self.*?/>

• <link rel=replies.*?/>

• <thr.*?/thr:total>

• <thr:in-reply-to.*?/>

• <gd:extendedProperty.*?/>

Get

Blogger photos inside Google Drive

TL;DR: If you dont see your Blogger-uploaded albums inside Google Photos, try checking the Photos folder inside Google Drive. 

With the announcement of Picasa Web Albums being retired, I was worried about all the photos Ive uploaded from within Blogger, from not just this blog but my personal and family blogs, some of which had years worth of photos. Previously, Picasa Web Albums (picasaweb.google.com) was the only way to see all these photos, as Google Photos (photos.google.com) did not show them for me.

This is strange, as I have another personal/family Blogger account (not tied to Google+, as this one is), and all the photos uploaded via Blogger there do appear in Google Photos.

More strange, my Google Photos page does show "Assistant"-created creations, such as collages and animations, made from the photos Ive uploaded to this blog. But thats it. The originals are, for some reason, not visible there. Have a look:

Blogger-uploaded photos not appearing in Google Photos-- but "Assistant" creations do!

I was nervous that Googles announcement of Picasa Webs "read-only" mode would mean no newly-uploaded Blogger photos would appear there:

That way, you will still be able to view, download, or delete your Picasa Web Albums, you just won’t be able to create, organize or edit albums (you would now do this in Google Photos). 

But luckily, I found that if I simply enable the "Google Photos" folder inside Google Drive, then they all appear there and can be easily managed inside the Drive interface. Here they all are:

Blogger-uploaded photos appearing in Google Drive

Its not ideal, as Id prefer to just use the Google Photos interface for its powerful searching, but whatever.

So if youre like me, and nervous that your Blogger photo albums are missing from Google Photos, try checking inside that Google Drive folder. It sure made me breathe a sigh of relief.

Get

Auto add a map to Blogger posts

<b:if cond=data:top.showLocation>
  <b:if cond=data:post.location>
    <div class=post-location>
      <iframe expr_src=data:post.location.mapsUrl + &quot;&amp;amp;ie=UTF8&amp;amp;hnear=&quot; + data:post.location.name + &quot;&amp;amp;hq=&amp;amp;t=h&amp;amp;output=embed&quot; frameborder=0 height=350 marginheight=0 marginwidth=0 scrolling=no width=425/><br/>
      <small style=color: #0000FF;>
        <span><b><data:postLocationLabel/></b> <span class=notranslate><data:post.location.name/></span></span><br/>
        <span><a expr_href=data:post.location.mapsUrl style=color: #0000FF; target=_blank>GoogleMaps</a> |
        <a expr_href=&quot;https://plus.google.com/u/0/local/&quot; + data:post.location.name style=color: #0000FF; target=_blank>GooglePlus Local</a></span>
      </small>
    </div>
  </b:if>
</b:if>

[Source: Add Google Maps automatically to blogger posts]

Full credit for this goes to the tip site Blogger4Bloggers, which seriously is a treasure trove of neat tips like this. If you use Blogger definitely check them out and subscribe. They have some amazing stuff there.

Geotagging your posts

Just a reminder that to make the map appear, you need to geotag your blog post using the "Location" setting in the sidebar of the post editor. The Blogger mobile app should also do this, though for some reason mine has started giving a "Location not available". Not sure if thats a Blogger issue or just me. Anyway it works great from the desktop editor.

Case studies for using this

I can imagine a few situations where this would be very convenient.

• Small business that does installations in a local area, and writes up a blog post for each to feature the work. This would save them having to manually embed maps to the locations, which would be a pain in the ass. 
• A tourist or travel writer keeping a travel blog, to easily show where he was at each stop of his tour.
• An amateur food critic can easily show the locations of restaurants hes dined at. 
• A hiking club could add blog posts for specific trips, posting photos and details of the destination, and automatically have a map of the destination embedded. 

Im sure there are lots more cases where this would be convenient. Like I said it beats the hell out of doing this manually, which I know some people do.

Other Map types

If youre into this, Ive got a couple of other map posts, including how to display a large map that shows the locations of all your geotagged blog posts, and the same but in a sidebar widget.

And all my map-related posts are here.

Thanks for reading, and happy mapping.

Get

Display your Blogger posts on a Google Map

In this post, well make a full-size Google Map that contains all the location-tagged posts from your Blogger feed. It will display full entries on the map.
If youre looking for a more simple map page that links to the posts, or for putting a map in your blogs sidebar as a widget, please see my other post.

UPDATE 2015-09
I edited the HTML file code below. Readers on Twitter alerted me to the fact that the RSS URL for blogs only goes so far back in time, meaning many older location-tagged posts were missing from the map. Ive replaced that URL format with another that seems to stretch all the way back.



---

I keep a travel blog for friends and family, and usually tag those Blogger posts with my location. Usually, this just adds a location tag to the bottom of the post, with a link you can click to see that spot on a map. Pretty boring. But heres a nice way to plot all your geocoded (location-tagged) Blogspot blog posts onto a single Google Map. Great way to revisit old posts and visually, geographically see where and when you were.

For example, here is the map with location-tagged posts from this blog. Just click each one to view the corresponding entry in its entirety. All of the entries appear similarly.

Screenshot of my Blog Map

This entry, coincidentally, will be location-tagged in Busan; not because Im there, but because a man can dream. Anyway, lets get started.

Step 1 - Edit the code

Copy the code below and paste it into a plain-text document.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>GeoRSS Layers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(49.496675,-102.65625);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById(map-canvas), mapOptions);
  var georssLayer = new google.maps.KmlLayer({
    url: http://www.blogger.com/feeds/blogId/posts/default?max=500&max-results=500
  });
  georssLayer.setMap(map);
}
google.maps.event.addDomListener(window, load, initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Get

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

Blogger Map widget for showing geotagged blog posts on a map

This post will show you how to add a side-bar widget to your Blogger/Blogspot blog. The map will display pushpins at each of your location-tagged posts locations. Click the pins, and a small card appears with the title, date, and a link to the post.
If youd like the cards/pins to show the full post entries, click here for my other post.

UPDATED June 2015
You can embed the map in a page too, not just as a widget. 

Location-tagged Blogger posts

I like using Blogger, and I always geotag the posts on my travel blog using the "Location" setting in the right-hand side of the Blogger compose page.

Bloggers "Location" tag feature

This adds a nice "Location" line under my posts that displays the address of my blog posts geotag, and clicking it opens a Google Map of that location.

Until today, I thought that was all you could do with this feature, which seemed a bit disappointing. Ideally, I was hoping there was a way to display, on one single map, the locations of all my blog posts. Sort of like how you can visualize all your Foursquare checkins with its KML feed, I wanted to treat my Blogger blog posts as "Check-ins" and see where all Ive been.

It turns out that this is not only possible, but also very easy to do. The technology behind it seems ancient (2008) but I just tested it out (2014) and it works beautifully!

Adding the widget from the original source (easy)

The most simple way is just to follow the directions from this old "Blogger in Draft" post:

1. Go to Bloggers "Layout" editing section
2. Add a new Gadget
3. Add by URL
4. Paste this URL in the box:
    http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml
5. Save it and edit the gadget, using your blogs feed URL as the source
   (http://yourblog.blogger.com/feeds/posts/default)

Adding the widget from your own source (optional)

The widget source-code is coming from a very old "Blogger in Draft" post, and you might worry that it could be deleted or lost, especially since this seems to be the only location on the net for it. Ill repost it here, so that you could potentially self-host the file if need-be.

In that case:

1. Copy the code from the box below and save it in a plain text document, giving it the extension .xml
2. Upload the document to a place that allows public full access to the document. Dont paste it into a blog post. It has to be accessible as text. Google Sites sometimes works, as can your Dropbox Public folder, or any other file hosting site that lets you link directly to the file. Google Drive can also do this.  
3. Use this new URL, the location of the file you just uploaded, as the URL when you add the widget via the "Adding by URL" option.

<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Blog Map" description="Display blog posts on a map." height="250" author="Brian Ngo" author_email="briancse+blogmap@gmail.com"> <Require feature="dynamic-height" /> <Require feature="setprefs" /> </ModulePrefs> <UserPref name="feedUrl" display_name="Blogs GeoRSS feed URL. Save as empty to reset." /> <UserPref name="height" display_name="Height in pixels" required="true" default_value="250" /> <Content type="html"> <![CDATA[ <style type="text/css"> .inputBox { border-color: #777777 #AAAAAA #AAAAAA #777777; border-style: solid; border-width: 1px; padding: 2px; width: 100%; } .inputBox-hint { border-color: #777777 #AAAAAA #AAAAAA #777777; border-style: solid; border-width: 1px; padding: 2px; width: 96%; color: #999; font-style: italic; } .statusMsg { font-size: small; color: #333; font-style: italic; } .statusMsg-error { font-size: small; color: red; font-weight: bold; } </style> <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAn138JcpDQexRxBMx-GYAehTZqGWfQErE9pT-IucjscazSdFnjBS4hjjTEOYU89NegWNS5Bv9cZZO8g" type="text/javascript"></script> <div id="instructions" style="display: none; font-size: 14px;"> <p> To display your blog posts on a map, enter your <b>blogs URL</b> below. Alternatively, you can also enter your blogs <b>RSS or Atom feed URL</b>. </p> <input type="text" id="feedUrl" name="feedUrl" class="inputBox-hint" value="Example: http://your-blog-url.blogspot.com" /> <div style="padding: 5px 10px 0 0;"> <input type="button" id="okButton" name="okButton" value="Fetch my blog!" /> </div> <div id="statusMsg" class="statusMsg"></div> </div> <div id="map"></div> <script type="text/javascript"> var PREFS = new gadgets.Prefs(); var MAP = null; var WIDTH = gadgets.window.getViewportDimensions().width; var HEIGHT = PREFS.getInt(height); var FEEDURL = PREFS.getString(feedUrl); var XML = null; var BLOGSPOT_REGEX = new RegExp(blogspot.com/?$); var inputBoxActivated = false; function init() { gadgets.window.adjustHeight(HEIGHT); var container = document.getElementById(map); container.style.height = HEIGHT + px; container.style.width = WIDTH + px; if (!FEEDURL) { document.getElementById(instructions).style.display = ; document.getElementById(feedUrl).onclick = activateInput; document.getElementById(okButton).onclick = validateFeedUrl; } else { fetchFeed(); } } function activateInput() { if (!inputBoxActivated) { document.getElementById(feedUrl).className = inputBox; document.getElementById(feedUrl).value = ; inputBoxActivated = true; } } function validateFeedUrl() { document.getElementById(statusMsg).className = statusMsg; document.getElementById(statusMsg).innerHTML = Validating feed...; var feedUrl = maybeFixUrl(document.getElementById(feedUrl).value); var params = {}; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.FEED; params[gadgets.io.RequestParameters.NUM_ENTRIES] = 1; params[gadgets.io.RequestParameters.GET_SUMMARIES] = false; gadgets.io.makeRequest(feedUrl, handleValidateFeed, params); } /** * Will attempt to detect a blogspot.com url without the feed suffix * (e.g., http://ginternfoodblog.blogspot.com/). If detected, adds * the feed suffix ("/feeds/posts/default"). Also, adds an http:// * protocol if one isnt present. */ function maybeFixUrl(url) { // trim whitepsace. url = url.replace(/^s*(S*(s+S+)*)s*$/, "$1"); // test blogspot url fix if (BLOGSPOT_REGEX.test(url)) { if (url[url.length - 1] != /) { url += /; } url += feeds/posts/default; } // test http protocol fix if (url.indexOf(http://) != 0) { url = http:// + url; } return url; } function handleValidateFeed(response) { if (response && response.data && response.data.Entry) { var feedUrl = response.data.URL; PREFS.set(feedUrl, feedUrl); FEEDURL = feedUrl; fetchFeed(); } else { document.getElementById(statusMsg).className = statusMsg-error; document.getElementById(statusMsg).innerHTML = Couldn find feed. Is the URL correct?; } } function fetchFeed() { var params = {}; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM; params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET; gadgets.io.makeRequest(FEEDURL, handleFetchFeed, params); } function handleFetchFeed(response) { document.getElementById(instructions).style.display = none; var data = response.data; var points = data.getElementsByTagName(georss:point); // We werent able to get any georss:point nodes, this might be a // Webkit browser and just wants "point" as the tag name. if (points.length == 0) { points = data.getElementsByTagName(point); } var geoposts = []; for (var i = 0; i < points.length; i++) { var latlngPair = points[i].firstChild.nodeValue.split( ); var title = points[i].parentNode.getElementsByTagName(title)[0] .firstChild.nodeValue; var date; var link; var pubDate = points[i].parentNode.getElementsByTagName(pubDate); if (pubDate.length > 0) { // This is an RSS feed. var tempDate = new Date(); tempDate.setTime(Date.parse(pubDate[0].firstChild.nodeValue)); date = tempDate.toLocaleDateString(); link = points[i].parentNode.getElementsByTagName(link)[0] .firstChild.nodeValue; } else { // This is an Atom feed. date = points[i].parentNode.getElementsByTagName(updated)[0] .firstChild.nodeValue.substring(0, 10); var links = points[i].parentNode.getElementsByTagName(link); for (var n = 0; n < links.length; n++) { if (links[n].getAttribute(rel) == alternate) { link = links[n].getAttribute(href); break; } } } geoposts.push({ title: title, point: new google.maps.LatLng(latlngPair[0], latlngPair[1]), date: date, link: link }); } createMap(geoposts); } // Doing two loops here... non-ideal.. too tired to optimize. function createMap(geodata) { var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < geodata.length; i++) { bounds.extend(geodata[i].point); } MAP = new google.maps.Map2(document.getElementById(map)); MAP.setCenter(bounds.getCenter(), MAP.getBoundsZoomLevel(bounds)); MAP.addControl(new google.maps.SmallZoomControl()); for (var i = 0; i < geodata.length; i++) { var marker = new google.maps.Marker(geodata[i].point, { title: geodata[i].title }); MAP.addOverlay(marker); var infoHtml = <div style="font-size: small"> + <b> + geodata[i].title + </b> + <div style="color: #666;"> + Posted on + geodata[i].date + </div> + <div style="font-size: small"> + <a href=" + geodata[i].link + " target="_blank"> + View post</a></div> + </div>; marker.bindInfoWindowHtml(infoHtml); } } gadgets.util.registerOnLoadHandler(init); </script> ]]> </Content> </Module>

Blog Map widget in action

Here is a screenshot of this beautiful, underutilized, and probably forgotten feature. The map that is now displayed in your blogs sidebar shows pins at your posts geotagged locations. You can click the pins for a small pop-up dialog that contains a link to the blog post that was tagged at that location.

Blog Map sidebar widget

This relies on your blogs RSS feed, so it might not display your older location-tagged entries. In this case, just add the parameter ?max-results=200 to the end of your blog feed URL. (Note: see my other post for a potentially better blog URL format to ensure all posts are pulled in.)

Embedding the map in a Blogger Page

You dont have to just use this as a side-bar widget. The map can also be embedded on one of your Blogger pages (it works better on a "page" not a "post").

This is very easy. Just create a new Blogger page, switch to HTML editing, and paste this code, changing the URL for your blog:

<iframe frameborder="0" height="250" id="map" name="map" src="//www-blogger-opensocial.googleusercontent.com/gadgets/ifr?url=http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml&amp;container=blogger&amp;view=default&amp;lang=en&amp;country=ALL&amp;sanitize=0&amp;v=38841e006da8e2dd&amp;libs=core:dynamic-height:setprefs&amp;parent=http://testofpyojina2.blogspot.com/&amp;up_feedUrl=http://testofpyojina2.blogspot.com/feeds/posts/default&amp;up_height=250&amp;mid=1#up_height=250&amp;up_feedUrl=http://testofpyojina2.blogspot.com/feeds/posts/default&amp;st=e%3DAFlCd0Vr5Ehr8RmECOHLq0S%252F20Y33QUXiflbjKfRMJKtj9KwkD9YS3Uq3Xezr3ffRqOsHwYznsMMLJL1lzdH2mGi20gGUDm6kZZjf5a%252F1QQDC%252B%252B6NPHmoRqokx%252BjvN6pekTyBhptzGC9%26c%3Dblogger&amp;rpctoken=2160341050058157284" style="display: block; width: 100%;"></iframe>

It does not seem to work if your blogs feed is redirected through Feedburner, and the script can sometimes hang if you have too many entries. If anyone has any solution to these issues, let me know in the comments!


If you use Blogger, please add the widget to your Blogger blog, and demonstrate its usefulness to the masses! Id love for this wonderful bit of code to be revived, and for Google to be more active in supporting Blogger. In the crazy world of Google+ checkins and Swarm checkins and Facebook checkins and all the other checkin services, its nice to see location-tags on Blogger still being supported. Its a great way to revisit old memories and see your blog journey in a new way.

Get

Force Blogger Dynamic Views to ignore mobile templates

10wontips in "Mosaic" view on a mobile device

Today Ill show you how to get desktop, non-mobile templates working on mobile if you use Bloggers "Dynamic Views".

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 + &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. 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 + &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. 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.

Final Thoughts

Get