BTemplates Blog

Tutorials, documentation and news about Blogger.

Citlali – Documentation

Versión en Español

Citlali Blogger template

After a while, I decided to shake the cobwebs out of VIM (my code editor of choice) and get to work on a template I had started a few months ago. Citlali, is the Nahuatl word for “star” and is a common female name in Mexico.

Based on the new version of Bootstrap framework, the idea is a simple design but also with the ability to show a good amount of content on the home page. A design that would convey a fresh image but still be pleasant to read and compatible with a large number of screen resolutions. Perhaps the biggest novelty is the incorporation of a dark mode and the respective switch to select the preferred one.

Citlali is available in its original CSS version and for Blogger in regular version (fully functional) and the Pro version, with extra customization features.



Templates options

In this template you have a small gadget of Options related with some elements inside the template. These options are:

  • Display Particles effect on Header. To display or not the effect of white particles floating in the header. Then, in the URL field you can type: true or false.
  • Top menu always visible (sticky menu). You can choose to always display the top menu (true) or not (false). In the URL field you could write: true or false.
  • Force uppercase in titles. Transform posts titles, sidebar titles, etc to uppercase. In the URL field you could write: true or false.

Template settings

Main drop-down menu

The main menu supports drop-down items. This menu is based on a Link List gadget. To add a regular link (without displaying a sub-menu), you add it as any link in these gadgets, example:

To add a menu item with ONE level drop down sub items:

One level drop-down menu.

To add an item with ONE LEVEL drop-down sub-menu:

1. Crate a regular link, in this case the URL is not relevant.

2. Create a second link, but this time add a dash at the beginning of the New Site Name field and the correspondent URL. This is going to be the first element of your drop down menu.

3. Add as many element as you need, but remember to add the dash at the beginning of each Site Name.

Full gadget example:


Two levels drop-down menu.

To add a menu item with TWO levels drop down sub items: 1. Crate a regular link, in this case the URL is not relevant.

2. Create a second link, but add ONE dash at the beginning of the New Site Name field and the correspondent URL. This is going to be the first element of your drop down menu.

3. Create a third link, but this time add TWO dash at the beginning of the New Site Name field and the correspondent URL.

Full gadget example:


2 levels dropdown menu

You can change, delete or add a logo to your blog going to your Blogger panel, then Layout, look for Page Header Gadget and clicking on edit.

Header gadget.

You also can edit your Blog title and description with this option.

Gadget descriptions

Most gadgets in Blogger don’t allow you to add a text description on them, but sometimes a description is very useful. To add a text description under the title of any gadget, change the title of the gadget following this format:



  • Title – Is the title you want for this widget.
  • Description – Is the text description to display under the title.

Example: The Follow by Email widgets don’t have a field to add a description, to add one, we can write the following in the title field:

SUBSCRIBE-desc:Subscribe for Free to get all newest tutorials and lessons.

The gadget would look like:

And the result would looks like:

Note: The email subscription gadget was removed by Blogger but the description for gadgets follows this logic.


Blockquote. screenshot

In order to display the Blockquotes with the right format inside a post, you need to use the posts editor in HTML mode:

HTML view on the Blogger editor.

And use the follow HTML structure:

<blockquote><p>Content of my quote</p></blockquote>


Code block. Screenshot.

In order to display code with the right format inside a post, you need to use the posts editor in HTML mode (see Blockquotes). And use the following HTML structure:

<code><span>This is my code &amp; looks great</span></code>

Lists of posts on main page.

On the main page there are two sections with lists of posts (in the demo these are the sections called “Featured posts” and “Latest news”) and a slider (also called “Slider” in the demo). These three sections work with an HTML gadget and show by default the latest posts of the blog, but they can be configured to show the content of any label. To do this, the content of the HTML gadget must follow the following structure:



  • NumberOfPosts – is the number of posts to display.
  • TypeOfPosts could be:
    • latestposts – To display the latest blog posts regardless of their labels.
    • tag:Label – To display the latest posts of a specific tag. Where “Label” is the exact name of the desired label as it appears in your posts.
  • ThumbnailSize – It is the size in pixels of the thumbnail image.
  • FormatStyle – You can take the values:
    • slider – To display it as a slider.
    • composition1 – To display a gallery of posts. Used in the “Feature posts” section of the demo. Note: For this format, the ideal NumberOfPosts value is 5, but you can use 9 or 13 if you want to display more content.
    • bloglist – To display a list of posts. Using the “Latest news” section of the demo.

Example 1: To display 5 posts in the first list of posts (Featured posts) of the “Travel” tag, the following structure would be used:


Example 2: To display 5 posts in the slider of the “Languages” tag, the following structure would be used:


Example 3: To display the last 4 posts of the blog in the second list of posts (Latest news), the following structure would be used:


Note: To display the latest blog posts it is not necessary to include the tag: subfix.

List of posts inside a post

Posts list inside post content. Screenshot.

Sometimes is very useful to list the posts under a specific label, for example to display all the content related to an event or person. In this template you can create this list with just one line.

For example, to display the latest 50 posts inside the label “Travel”, you just need to add inside you post this line:


Lists of posts in a gadget (footer)

Posts list on footer. Screenshot.

Similar to the slider, you can create lists with the latest blog posts or by label in the sidebar and/or footer. To create a new list of posts:

1. Go to Blogger/Layout and create a new HTML gadget. You can use whatever title you want.

2. In the gadget’s content: To display the latest blog posts use:


To display the latest posts in a specific label use:

3-tag:Label name-65px

Where “Label name” is the exact name of the label you want to use.

In both cases you can replace the number “3” with the number of posts you want to display.

Labels’ galleries

Labels’ galleries work in the Pro version of the template. These galleries use the Labels gadget and what they do is to show a nicer list of labels with a preview image. This preview image corresponds to the image of the last post within that label.

These galleries make the reader’s navigation more friendly and make the appearance of the blog more dynamic, since they are updated every time a post is published within a label.

In the demo, it is the “Sections” section on the home page. And as a gadget in the footer, also with the name “Sections”.

Labels gallery on home page. Screenshot.

Labels gallery on footer. Screenshot.

Like any label gadget, it is possible to display only the desired labels.

In the case of the free version, the “Sections” section of the home page is replaced with an HTML gadget. Here you can manually add a gallery by editing an HTML code for each element, like the following:

<a class="bt-tag" href="URL" alt=""><div class="tag-thumb"><img src="IMAGE URL"></div><h4>NAME</h4></a>

Social icons in header and footer

Social icons on footer. Screenshot.

In this template you can add social icons to the sidebar or footer in a very easy way, you just need to edit or create a Links List gadget and add all your social media links there, then your links are going to be transformed in icons automatically.


The same applies to the bar with social icons on header:

Social icons on header. Screenshot.

Because Mastodon uses a wide variety of servers and domain names, to your profile link, it is necessary to add ?icon=mastodon at the end of the link, example:

Latest comments widget

To add a Latest comments widget you just need to add a new HTML gadget with the content following this format:



NumberOfComments is the number of comments you want to display.

Example, to add a list with the latest 3 comments the content in the HTML gadget would be:


Dark mode

The dark mode is available in the Pro version.

This function makes use of Javascript to know if the user prefers a light version (default) and dark mode. Once detected, it applies it to the layout.

The reader can set his design preference, independently of the one he has configured in his system, using the switch found in the main menu. This preference will be remembered for future visits.

Color mode switch on the main menu. Screenshot.

Related posts

Related posts on sigle post page. Screenshot

Related posts are available in the Pro version and appear automatically under the post content in the individual entries. These posts are based on the first tag of the post.

404 Error Page

The 404 error page can be customized from the Blogger panel. Simply locate the corresponding section in the “Design” section. There you have an image gadget and an HTML gadget available.

Gadgets for 404 Error page on Blogger

Main font family and colors

To edit the current main font family and the color of some of the elements in the template, in your Blogger dashboard go to Layout, the look for the link to the Theme Designer. Once there, go to Adjust widths, here you can change the font and some colors.

Color settings on Blogger panel. Screenshot.

RTL Support.

The template offers partial support for RTL (right to left) alignment, used in languages such as Arabic. To enable it, in the code of your template look for:

<html b:css='false'

And replace it with:

<html lang="ar" dir="rtl" b:css='false'

Where ar is the language code for Arabic.

Then look for:


And replace it with:



  • Version 1.0 – 30-01-2023 – Initial release.