So, How do I...

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!

Blogger, like Google Photos, has great photos handling which allows you to resize an image just by tweaking its URL, which can be incredibly useful for using dynamic images to ensure that your mobile readers aren't downloading MB of data over their mobile network. URL Size Parameter Take, for example, a panoramic image that I took of the coliseum in Rome. Its original size is a whopping 4.6MB - overkill for any mobile client viewing it. Even on an iPhone 6+, we're talking 1920x1080 res, when the original image itself is 8682x2630. Uploading the image to Blogger and adding it to this post, we see straight away the resizing behaviour in action. The image above is the default size when you insert into blogger's post editor: 320px wide. The URL is: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisgLw0X4x4JCco_ogwQMt44xWIEP9dhtNmAAHBTxSQoixIVBMt0EQRpUbIBOwYoQlR5BJzUOyqt-UUAtUti_u86nQbyb01pzcixAXofDM9b_RacvC2IjbVJ-U9rHi0SeXb48cNcUMatejI/ s320 /PANO_...

For some reason, the polls widget does not have settings for its colours in the configuration dialog. It seems to pick up its colors from template variables instead. Find or Add the variables The variable that the polls widget uses for its text color is sidebar.text.color - if this variable already exists in your skin, you will find it in the group that it belongs to. If it doesn't already exist, add it by copying this into the <b:skin>  section of your blog's template ( Template => Edit HTML).   <Group description="Poll Widget" selector="widget.Poll">      <Variable name="sidebar.text.color" description="Text Color" type="color" default="#2288bb"  value="#2288bb"/>      <Variable name="sidebar.link.color" description="Link Color" type="color" default="#2288bb"  value="#2288bb"/>    </Group> Add new variables if ...