Sept 30, 2015 update:
Blogspot now can be served with HTTPS.This method below can be used for Blogger blog with custom domain.
So, Google always encourages people on the web to use
HTTPS, but the Blogger service hasn't fully implemented it until now.
I dunno what exactly keeps them from upgrading this neat service (Blogger), and, like,
Google Fonts resources snippets (the Google Fonts snippets have already been updated, I noticed, just now).
I guess it's really technical, or political, or economical. Who knows?
As you might have noticed, or probably haven't, most (all) of Google's services can be served with both
HTTPS. Except Blogger blog
URL (with the blogspot.com subdomain). It's only (until this date) served with
If we try to use the
HTTPS for our blog (not with custom domain), it will (still) be temporarily redirected to
But when I tinkered around...
As I observed, the images from Blogspot can be served using
HTTPS. They won't be redirected.
The advantage is, they are faster to load than when served with the
The disadvantage of this front end technique is that the browser will do twice the work. But the first request will be cancelled (but depends on the browser though). Hence, it's still faster.
It's not really a disadvantage for modern browser actually.
But it is some kind of "burden" to Blogspot server because there are additional requests. Heehee. But you know, the servers are exquisitely gigantic smart godzillas. So.
This is the newer snippet (updated)
Placing it on your Blogger blog
Go to your template HTML setting, and jump to
</body> (closing body tag).
Place it above (before the closing body tag) that, like so:
<![CDATA[ ... ]]> comment is the "forbidden-character-escape-er". Even though there's nothing to escape from it, it's a recommended method whenever implementing
CSS on Blogger.
More about escaping technique on this post
Details about the
- It is auto invoked, with parameter
d, which is defined as the HTML DOM
"use strict";directive is a new feature in ECMA5 (supported in IE10, Chrome since version 31, Firefox since version 38, Safari since 7.1, Opera since 30, Android since 4.1, Chrome Android since 42; more at caniuse). Read more at MDN.
blogspot_imagesvariable consists of all
imgelements which have the (partial) blogspot.com strings in the
It needs to be converted to
Array.prototype.slice.call()) so that the variable can be looped with
- Then the looping starts. It will switch the
If it found no element with that criteria, then the function would do nothing.
About the "newer snippet"
I added the Lightbox parent-href-switcher. There's that Lightbox module on Blogger to show an image by clicking the anchor element that wraps the image.
So the "newer snippet" switches both the
img and the
a (anchor, the parent of
The updated "newer snippet" has an additional comparing step before switching the parent element
If it has the same "tail", for instance the
img has tail my_image.jpeg and the parent also has that, then the parent will be switched. If not, well, the parent
href won't be changed.
If the parent element has no
href attribute, then it will be left intact.
There you go
Test it on your blog. If it isn't improving anything, then just delete the
And when the Blogger team has announced the official "going totally secure", this snippet can be deleted, or just keep it. It won't burden the browser. But maybe delete it. Moar makes sense.
If you have large photos on a post, you can switch the
HTTPS manually, by typing it, if they're not that many.
It will be better to do the manual method. So there'll be no double works for your blog visitors' browsers.
But it will take forever if you have pajillions of images.
The thing to remember about "totally secure" (later)
We need to avoid the "mixed contents". Modern browsers now restrict some things being loaded over mixed protocol-ed domains. Especially if the host is using
- If the host is using
HTTP, then it can load both
- If the host is using
HTTPS, then it can only load resources with
Images (and maybe multimedia: audio/video) can be loaded with warnings if we use
CSSwill be blocked.
Additional: combining this with the GoogleUserContent images
Go to this post