Showing posts from 2016

Make my background image responsive

Blogger's got a nice selection of backgrounds to choose from when you're customizing your template. Recently, they made some changes to make them responsive.

If you don't know what I mean by responsive, try reducing the size of your browser window, and you'll see the background of this blog re-requested as a smaller version of the background image).

This actually has a massive impact on bandwidth for your readers. Take, for example, the background of this blog:

Full size (370KB)1600 wide (319KB) - 13% smaller1200 wide (236KB) - 36% smaller800 wide (186KB) - 50% smaller640 wide (139KB) - 62% smaller480 wide (65KB) - 82% smaller! For anyone who has forked (customized) their template, though, the change may not been applied. If you've customized your template, using 'Edit HTML' on the template tab, but are still using the Blogger backgrounds, you should also add the following HTML gadget to your template.

The gadget contains the following custom markup.

Get Facebook to show feature image for your Blog's Homepage

Facebook seemingly exclusively uses Open Graph protocol (og:image)  tags to determine which image to feature. As a result, sharing your content to Facebook from blogspot has no image or a broken image for the homepage.

To fix this, you can explicitly specify the feature image on feed pages.
Select your image, and copy the URLGo to Template => Edit HTMLSearch for the 'all-head-content' tagUnderneath that tag, add the following XML, replacing [Your image URL] with the URL of the image you want to feature.
Note: Make sure to leave the single AND double quote-marks wrapping the URL.<b:if cond='data:view.isMultipleItems'> <b:with var='image' value='"[Your image URL]"'> <meta property='og:image' expr:content='resizeImage(data:image, 1200, "1200:630")' /> </b:with> </b:if> Resizing the Feature Image If the image you have uploaded is hosted on a Google product, it can…

Get nicer thumbnails for my Post snippets

I recently received some feedback that my thumbnails are a bit nicer than the standard thumbnails offered by Blogger. This is because I use a custom snippet in my Blog widget, to produce bigger thumbnails, using the new resizeImage operator.

Note: This post leverages the techniques described in the article about Responsive images for Google photos.

A note: The resizing behaviour provided on Blogger requires that the image is hosted on a Google platform to work - provided that you add your images by uploading them in the editor, this technique should work. Creating a responsive, resized Thumbnail The resize operator takes 3 parameters - the URL of the image, the width to resize it to, and an optional ratio for a cropped version of the image.

<img expr:src=’resizeImage(data:post.firstImageUrl, 300)’ />
In my Blog widget, I've customized the HTML so that on feed views (homepage, search, etc), I display post snippets instead of the full post. As a part of these snippets, I do a s…

Change the landing page of my blog

Or: So, How do I change the homepage of my blog to be a different page.

For some blogs, the posts are not the primary content. To modify what the landing page of your blog is, you can use this neat workaround.

Copy the path of the page you want to redirect to, e.g. /p/mypage.htmlGo to > (Your blog) > Settings > Search preferences.Under Errors and Redirections, there is Custom Redirects.Hit 'Edit'Set From to '/'Set To to the path in step 1, e.g. /p/mypage.htmlTick permanentSave.
Now, navigating to your blog's homepage will redirect.

But wait! I still want to be able to get to the homepage! No problemo, all you need to do is modify your Page List widget navigation Home link. Currently, it's just the home page. Let's change it to a search, with no criteria.  Go to the Layout tabFind your Page List widgetUntick 'Home'Click '+Add external link'Set the url to your blog's url with /search as the path. (e.g.…

Add Google Analytics to my Blog

There are a few ways that you can add Google Analytics to your blog, but the best way to do it is using the settings interface on

This is because whenever you customize a template, your template becomes a fork of the template that you customized, at the time you customize it. So if Blogger roll out a new feature or a bugfix which is placed in the templates, you won't get it on your template because your template is customized. So, when possible, use the facilities built in to the template engine!

Note: The Google Analytics snippet added by default when you set up your Analytics ID in Blogger is namespaced to 'blogger'.  This means that any custom calls to log events either need to be set up in the default/empty namespace, or share the blogger namespace. Get your Analytics ID If you head to, you should be able to create a new property which will have a tracker ID associated with it. Create the property for your blog's url, e.g.…

Prevent search crawlers indexing my Archive pages

If your blog archive only has one post for a given page, say 'March 2016', then the content overlap for that post is very high when comparing the blog archive page to the actual post page. This can lead to the archive and the post both showing as results when you run a search.

To prevent this happening, you can add a meta tag to your template.

Go to Template => Edit HTMLSearch for 'all-head-content'Add the following underneath the tag for all-head-content <b:if cond='data:blog.pageType == "archive"                 or data:blog.searchQuery != ""                 or data:blog.searchLabel != "" '>     <meta name="robots" content="noindex" />   </b:if>
This will cause the noindex meta tag to be rendered on archive and search pages, preventing duplicate results for the content in your post.
Happy Blogging!