New Blogger Themes

Blogger launched new themes on March 20th, 2017, after more than 7 years since the last update. This update isn't only limited to the new designs introduced in the themes but the entire underlying theme code has been rewritten. Lots of new operators have been introduced and more functionalities have been added to the Layout and Theme Designer (Customise) tab. A whole new set of data layout and page element tags have also been introduced allowing users to further customize their blogs. It is being touted as the third major re-write to the theme engine since Blogger was created back in 1999

The New Themes

The first thing that you will notice is the 4 new themes (each with 5 color scheme variations). Each one comes with a modern look and caters to specific taste - Contempo (fashion), Soho (photography), Emporio (galleries) and Notable (personal). All of them have a clean and elegant design and are by default responsive in nature.

The biggest difference that you will immediately notice upon accessing the Theme tab, is that these new themes don't have any separate Mobile version (the Customise Mobile theme Gear icon is missing from the dashboard). They only use a singular code base for both mobile and desktop versions (the ?m=1 query parameter for accessing the mobile version of the blog has been deprecated). All in all, a much need improvement to the default themes.

Layout tab

The Layout tab has always allowed the users to easily edit the positioning of various widgets on the blog without needing to meddle with code. Taking a step further in this direction, Blogger has introduced visibility control for each widget, allowing the users to easily hide/show widgets.

Currently, the visibility control affects the widget's visibility on the whole blog, but in the future, it is likely that Blogger will introduce more fine-tuned controls for hiding the widgets on specific types of pages.

Blogger Theme Designer

Introduced in the last update to the theme engine, it brought along the ability to easily change the design (in terms of fonts, color schemes, background, etc) via a simple interface without needing any knowledge of HTML or CSS. With the new update, even more, features have been introduced to achieve this goal. The length type variables have been added, allowing theme developers to provide more options to users. Also, a Gadget tab has been introduced, allowing controlling the visibility of the widgets on the blog.

Comment Form

The embedded comment form has also been completely re-designed. It looks much more elegant than the previous comment form and should be easier to use on Apple devices (a very big pain point for the previous comment form which had known problems with not being able to accept Name/URL comments).

Theme Code

This has seen the most overhaul in this theme release. As there is no official documentation released, as of now, it is not possible to know all the things that have been changed. But if you go through the code of the new themes, you will surely notice lots of new stuff -

Operators -

1. snippet operator

<b:eval expr='snippet(data:post.body, {length: 450, linebreaks: true})' />

Allows generation of snippets from HTML string. This will bring an end to all the JavaScript read more solutions out there

2. format operator

<b:eval expr='data:post.date format "MMM dd" ' />

Allows formatting dates according to ICU format strings

3. path/params/appendParams/fragment operators

Operators that can be used to modify URLs

4. take/skip operators

Operators for doing operations of array data type

Layout tags -

1. data:messages

Various messages used on the blog, displayed in the user's locale

2. data:view

Abstracting the different page types to more generic term. Will lead to less code clutter

3. data:skin

Variables of the skin rendered for the current view

4. Many new additions to the currently existing namespaces like data:blog & data:post

Markup tags -

1. <b:css>

Used for disabling default CSS on a blog

2. <b:class>

Used for assigning classes to an element

3. <b:template-script>

Used for loading JavaScript files specific to a theme

4. <b:comment>

Used for adding comment in the theme code which doesn't get rendered in the real version of the blog

Most of the information regarding the new theme code has been taken from the blog - template-data.blogspot.com. Currently, it is the only semi-official source (written by a Blogger engineering team member) for information regarding these tags, until an official documentation update is released.

All in all, there have been lots of new feature additions under the hood to make the platform as a whole much more customizable. I hope that the Blogger team will continue to make more improvements to the platform and once again make Blogger the platform of choice for majority of the users out there.

Written by Prayag Verma

Find me on Twitter