How to Add Custom Design Options Within Your Blogger Template

On
Pecil crayons lying on a black tableBlogger users often complain about how hard it is to customize their blogger template. Naturally, everyone is not familiar with coding and generally, template editing is required to make such customizations. Fortunately, the blogger platform provides a handy way to enable you to make substantial design changes without ever touching the template code. But, again this requires you to make one-time changes to your template. It is done through variables supported by the blogger template. Once configured, you can make changes to the design from the visual template designer available in the dashboard. This tutorial is aimed at users or template designers who're familiar with HTML and CSS. You can use this feature to ensure the technically-challenged, when using templates designed by you, can do different types of design customizations with ease. If you have a working knowledge of HTML and CSS, you can use this feature to add different types of customization options to your existing template.

Pencil crayons lying on a black table
Try these customizations on a temporary test blog using one of the available pre-built templates offered by Google. This way, you can easily inspect the existing design options already present in the template.

Read Also:
A Simple Guide to Quickly Design a Custom Blogger (Blogspot) Template


And, in case, you're planning to directly edit the template of your live blog, take a backup before moving ahead. Let's get started and see how we can add custom design options to our blogger template.

Mastering the Basics

First of all, let's see what exactly having a custom design option means in this context. It's simply a click and change option within the dashboard that enables you to change the appearance of your blogger template without ever touching the HTML code.

Here's a sample design change option offering customization of the post title color.

Post title color optimization option for a Blogger template
Here, you can see that apart from picking a color from one of the pre-defined options, one can also generate a custom one through the color generator. No messing with code! It's all click and change.

Color is just one of the types of available design options within the theme customizer. You can also specify font and width settings for various elements of the design.

To provide custom design options, we often create two types of entities. The first one is a standalone variable and the second one is a group of custom options targeting a specific element on the page.

We'll look at both of them as we move ahead in this tutorial.

These variables and group definitions are written within the <b:skin> tags where the template's CSS code is written as well. The structure looks something like this.


<b:skin><![CDATA[
/*
Custom Variables and Group Definitions Goes Here

Remember, do not delete opening and closing comment tags /* */ here
All these definitions are written between these comment tags.
*/

/* Custom CSS code goes here */
* {
  margin: 0;
  padding: 0;
}
]]></b:skin>

While coding custom design options, first write all the custom variables you may use in your template and then move on to writing custom group definitions for the design options.

Blogger Template Variables

Now that we know the basics, let's start with defining some of the custom variables and see how they work in a blogger template. A variable consists of the following parts.

  • name - This one is quite simple. This attribute is used to give a meaningful or human-readable name to the variable. It is also used to reference a variable within the CSS code.
  • description - This attribute is used to describe what the variable is all about.
  • type - Here, we mention the type of variable, viz., color, font, length, automatic, and so on.
  • default - This is the default value of the variable. It is used when a user triggers a template reset in the theme customizer.
  • hideEditor - It's used to hide or display the variable within the visual theme customizer.
  • value - This is the current value of the variable to be used within the template.
Now, let's quickly create a variable and see how it exactly looks when written in the template.


<Variable name="primaryColor" description="Main color" type="color" default="#0DC143"  value="#0DC143"/>

Now, you can reference this variable in your template code $(primaryColor) using a dollar sign and a pair of parenthesis. Here's how you fetch the variable within the CSS code.


<b:skin><![CDATA[
/*

<Variable name="primaryColor" description="Main color" type="color" default="#0DC143"  value="#0DC143"/>

*/

.post p {
  color: $(primaryColor);
 }
]]></b:skin>

What if I want to change the value of a variable? Should I change the default="" attribute or the value="" attribute?

It's the value="" attribute that should be changed. The default="" attribute should only be changed when you want to change the value to be applied on a template reset by the user.

Let's take a quick look at different types of variables. It'll give you a good idea about how these variables are defined.


/* Color Variable */
<Variable name="primaryColor" description="Main color" type="color" default="#0DC143"  value="#0DC143"/>

/* Font Variable */
<Variable name="georgiaBold16" description="Georgia bold size 16" type="font" default="bold 16px Georgia, serif" hideEditor="true"  value="bold 16px Georgia, serif"/>

/* Length Variable */
<Variable name="sidebarWidth" description="Sidebar width" type="length" min="200px" max="350px" default="300px" value="325px"/>

/* Automatic Variable */
<Variable name="alignRight" description="Align element to the right" type="automatic" default="right" hideEditor="true" />

You've already seen how color settings look in the theme customizer in one of the sections above. Here's how length variable options appear in the theme customizer.

Width and margin settings within blogger theme customizer
And, here's how the font setting appears in the theme customizer.

Font setting within blogger theme customizer
Automatic variables are used to reference the values within the template's CSS code. They're not used in the theme customizer. That's why we generally apply hideEditor="true" attribute to these variables.

Blogger Template Custom Design Group Definitions

Now, that we know the basics of variables, let's go ahead with a real-life example to see how we may use both the combination of variables and group definitions to create design options within the theme customizer. It's dead simple and one can learn it quite easily.

While creating a custom design option group, you can either target all the child or descendant elements of a parent container or you can create a design option group for a common set of elements present on the page. Let's see how to do it.

The demo blogger template I'm using for this tutorial has the following HTML code for the post section. Naturally, we're targeting the post-design options.


<div class="post hentry uncustomized-post-template" itemprop="blogPost" itemscope="itemscope" itemtype="http://schema.org/BlogPosting">
   <h3 class="post-title entry-title" itemprop="name">
      Hello World!!!
   </h3>
   <div class="post-header">
      <div class="post-header-line-1"></div>
   </div>
   <div class="post-body entry-content" id="post-body-2930505525536801724" itemprop="description articleBody">
      This is a demo post to demonstrate blogger's custom design options.
   </div>
   <div class="post-footer"></div>
</div>

I've stripped down this code to bare essentials to simplify things. Here's you can see that within the parent post container we're targeting both the post and hentry classes.

So, all the elements within this parent container can be targeted through custom design options. For that, we need to create a group. Here's how to do it.


 <Group description="Post Design Options" selector="div.post.hentry">
....
....
</Group>

You can see we use the <Group> tag for the same. All the design options go inside the opening and closing <Group> tags.

You can see, the description attribute is where we provide the name for that group as it'll appear within the theme customizer. Pay attention to the selector attribute. Here we're targeting the parent container.

Now, let's say we want to provide customization options for both the font size and the font color for both the post title as well as for the bost body. Here's how to do it.


<Group description="Post Design Options" selector="div.post.hentry">

/* Post title font and color settings */
<Variable name="post.title.font" description="Post Title Font" type="font" default="bold 1.6rem Georgia, serif"  value="bold 1.6rem Georgia, serif"/>
<Variable name="post.title.color" description="Post Title Color" type="color" default="#444" value="#444"/>

/* Post body font and color settings */
<Variable name="post.body.font" description="Post Body Font" type="font" default="bold 1rem Georgia, serif"  value="bold 1rem Georgia, serif"/>
<Variable name="post.body.color" description="Post Body Color" type="color" default="#333"  value="#333"/>

</Group>

You're already familiar with the variable types. You can see we've named these variables with a dot notation. It's not necessary though. It's a de-facto standard or kind of a norm to write it that way. You're free to write camel case names too. It's up to you.

The name itself should be chosen in such a way so that it explains what we're customizing.

Make sure you're enclosing attribute values in double-quotes. Single quotes will result in an error.


Now that the design options group has been created and the associated variables are defined as well, it's time to complete the last step. What, there's something more to do now?

Yes, we have to apply these variables at the right places within the CSS code so that the values associated with them get replaced with the variable name itself.

So, here's how the variables' names will be referenced in my CSS code.


h3.post-title {
  font: $(post.title.font);
  color: $(post.title.color);
}
  
.post-body {
  font: $(post.body.font);
  color: $(post.body.color);
}

You can see how I've used the dollar sign and parenthesis to refer variables in the CSS code. This completes the process. Now it's time to see how these options appear in the theme customizer.

Blogger theme post custom design options
Cool! Isn't it? Now theme users can directly customize these design properties through these options instead of messing their hands with the CSS code.

You're free to create as many design option groups as you want with a collection of variables within each group. Feel free to experiment with these design options on a test theme.