So, How do I...

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% smaller 1200 wide (236KB) - 36% smaller 800 wide (186KB) - 50% smaller 640 wide (139KB) - 62% smaller 480 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 contain

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 URL Go to  Template => Edit HTML Search for the 'all-head-content' tag Underneath 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 host

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 thes

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.html Go to  blogger.com  > (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.html Tick permanent Save. 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 tab Find your Page List widget Untick 'Home' Click '+Add external link' Set the url to your blog's url with /s

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 blogger.com . 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 analytics.google.com , 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,

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 HTML Search 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!