Template Options Widget

The Template Options gadget (LinkList46) sits in your Layout’s settings section. It lets you control core layout and styling without touching code.

Navbar & Menu

Main Navigation

The main navigation menu is based on a LinkList gadget (located in the MainMenu section, locked). How you name each link determines how it behaves. Below are all the supported patterns with step-by-step instructions.

Regular menu item

To add a simple link with no dropdown, just set the Site Name and Site URL fields normally.

Example: set Site Name to Home and Site URL to your blog’s homepage URL. The result is a single clickable item in the navbar.

Menu item with dropdown (one level of sub-items)

You need two or more LinkList entries to create a dropdown group:

Step 1: Create a regular link that will serve as the dropdown parent. The URL is not relevant — it won’t be clickable.

Step 2: Create a second link for the first child item. This time, add a dash (-) at the beginning of the Site Name field and the real URL:

Step 3: Add as many child items as you need. Every child must start with a dash in the Site Name field.

Full gadget example — this setup produces a “Drop down menu” parent with three children:

Two-level dropdown (submenu within a submenu)

To create a second nested level, use a double dash (--) at the beginning of the Site Name. Only items directly after a single-dash child become part of its submenu.

Example gadget setup:

• Drop down menu (no dash — parent, not clickable)
• -Menu item (one dash — first dropdown child)
• --Submenu item (two dashes — nested under “Menu item”)
• -Another item (one dash — second dropdown child, at root level)

Menu item with AJAX post list

To display a live list of posts from a specific label inside a dropdown, add a new link following this format:

tag:LabelName-NumberOfPosts-ShowThumbnail

Where:

• LabelName — the Blogger label (case-insensitive)
• NumberOfPosts — how many posts to fetch and display
• ShowThumbnail — true or false (show thumbnail images or text only)

Example: to show 5 posts from the label “Courses” with thumbnails, create a link with:

• Site Name: tag:Courses-5-true
• Site URL: any value (it won’t be used)

The result is a dropdown that fetches post titles and thumbnails via AJAX:

Adding a search form to the navbar

Create a link with Site Name set to search and any URL. The template automatically replaces it with a search toggle. On desktop a dropdown search form appears on click; on mobile an inline form is shown directly. Both auto-focus and prevent empty submissions.

Adding the dark mode switcher Pro only

Create a link with Site Name set to theme and any URL. The template replaces it with a theme switcher dropdown offering Light (sun icon), Dark (moon-stars icon), and Auto (half-circle icon, follows system preference).

Full example — a typical LinkList setup for the main menu

The gadget shown above produces a navbar with: Home (regular), Drop down menu (parent with children), Courses (AJAX post list dropdown), a search form, and the dark mode toggle.

Social Icons in Navbar

The navSocial section uses a LinkList gadget (LinkList68). Add your social media URLs and the template auto-detects each network, rendering the matching Bootstrap Icon. Over 40 networks are supported including Facebook, Instagram, X, YouTube, TikTok, Mastodon, and more.

Full gadget example:

Hero Section

The full-bleed hero is powered by four gadgets in your Layout:

To edit the hero background:

1. Go to Layout → look for the Hero Background section
2. Click Edit on the Image gadget
3. Upload a new image (at least 1600px wide for best results)
4. Save the gadget

To edit the hero title and subtitle:

1. Go to Layout → Hero Content section
2. Click Edit on the Header gadget
3. Change the title and description fields
4. Save

To edit the hero CTA button:

1. Go to Layout → Hero CTA section
2. Click Edit on the HTML gadget
3. Enter a cta: shortcode (see Shortcodes Reference below)
4. Save

To edit the hero features row:

1. Go to Layout → Hero Features section
2. Click Edit on the HTML gadget
3. Enter a feat: shortcode (see Shortcodes Reference below)
4. Save

The hero includes a homogeneous dark overlay, animated geometric shapes (circles and dots), entrance animations on all elements, and a scroll-down indicator linking to the Featured Courses section. Header height is configurable via Template Options.

Homepage Sections

All homepage sections appear only on the homepage. Each is powered by an HTML widget that contains a single shortcode line.

To edit which posts appear in a section:

1. Go to Layout and find the section on the homepage
2. Click the Edit icon
3. Change the shortcode to point to your label. For example, to show 6 posts from a label called “Courses” in course card style: 6-tag:Courses-600px-course
4. To show the latest posts regardless of label, use latest: 6-latest-600px-course
5. Save the gadget

Labels Gallery

Pro Version

The Pro version auto-generates a visual labels gallery directly from your Blogger labels. To set it up:

1. Go to Layout → Labels Gallery section
2. Click Edit on the Labels widget
3. Set the title to Explore Topics-BTLabels
4. Click Selected Labels, pick the labels you want to display, then click Done
5. Save the gadget

A background image widget (Image91) adds the section background — upload an image at least 1600px wide.

Free Version

The Free version uses a static HTML gadget with 4 pre-designed category cards (Blog, Campus, Courses, Videos). To customize:

1. Go to Layout → Labels Gallery section
2. Click Edit on the HTML widget
3. Update the link href attributes and thumbnail image src for each card
4. Save the gadget

Shortcodes Reference

Shortcodes are single lines of text you place inside HTML widgets or blog posts. The template reads them and replaces them with dynamic content.

Post List Shortcode (in HTML widgets)

{N}-{postsType}-{size}px-{style}

Parameters:

• N — number of posts to show
• postsType — latest (most recent), tag:LabelName (posts under a specific label), or randomtag (random label)
• size — thumbnail width in pixels
• style — display style (see table below)

Available styles:

Real-world examples:

6-latest-600px-course             Latest 6 posts as course cards
3-tag:Testimonials-400px-testimonial-grid  3 testimonials in grid
1-tag:Videos-800px-video          Latest video from "Videos" label
4-tag:Campus-600px-mosaic         Campus gallery in 4-column mosaic
3-latest-65px                     Latest 3 posts, sidebar list
3-tag:Courses-65px                Latest 3 courses, footer list
6-tag:Blog-350px-bloglist         Latest 6 blog posts as cards

Shortcodes Inside Posts

Place this anywhere in your post content to embed a dynamic post list:

[posts--tag:LabelName--N--style]

The style parameter is optional and defaults to simplelist. Available styles: list, simplelist, course, bloglist, testimonial-grid.

Examples:

[posts--tag:JavaScript--5]              5 posts, simple list (default)
[posts--tag:Courses--3--course]         3 posts as course cards
[posts--tag:News--6--bloglist]          6 posts as blog cards
[posts--tag:Testimonials--3--testimonial-grid]  3 testimonials in grid

This is useful to create course content pages, resource directories, or lesson lists inside any post.

Random Tag

Use randomtag as postsType to fetch posts from a random label. The template first fetches all labels from your blog, picks one at random, then fetches posts from that label. Great for discovery sections or “surprise me” features:

6-randomtag-600px-course

Comments Shortcode

N-comments

Example: 3-comments — displays 3 recent comments with avatars and snippets. Best used in sidebars or footer columns.

CTA Shortcode

cta:url|text|icon-class

Example: cta:#bt-courses|Browse Courses|bi-arrow-right — renders a button linking to the Courses section. The icon class can be any Bootstrap Icon from the full icon reference (e.g., bi-arrow-right, bi-play-circle, bi-book).

To link to an external page: cta:https://example.com|Visit Site|bi-box-arrow-up-right

Features Shortcode

feat:text,icon|text,icon|...

Each text,icon pair is one feature item. The pipe (|) separates items. Icon names follow the bi- prefix from the Bootstrap Icons library.

Example: feat:Expert Teachers,bi-mortarboard-fill|Online Courses,bi-laptop|Certificates,bi-patch-check-fill

This renders a horizontal row of icon + text items in the hero section, each with a staggered fade-in animation.

Stats Shortcode

stat:count,icon,label|count,icon,label|...

Each count,icon,label group is one stat item. Pipe separates items. Icon names follow the bi- prefix from the Bootstrap Icons library.

Example: stat:1500,bi-people-fill,Active Students|45,bi-journal-bookmark-fill,Courses Available|12,bi-award-fill,Expert Teachers|98,bi-globe-americas,% Satisfaction

Numbers count up from 0 to the target value automatically when the section scrolls into view. The animation runs over 50 steps at 30ms intervals for a smooth effect.

Widget Title Markers

You can modify how widget titles behave by appending special markers to the title field in any gadget.

Adding a description (-desc:)

Blogger gadgets don’t natively support descriptions. To add one, append -desc: followed by your description text to the title:

Title-desc:Description text

Example: a Label widget titled Topics-desc:Explore our course categories shows:

• Title: Topics
• Description: Explore our course categories (in a lighter, smaller font below the title)

This works on any gadget type — Labels, PopularPosts, HTML, LinkList, etc.

Activating the labels gallery (-BTLabels)

Append -BTLabels to a Label widget’s title to transform it into a visual card-style label gallery:

Explore Topics-BTLabels

In the Pro version, this auto-generates image cards from your labels. In the Free version, the labels list needs static HTML. The -BTLabels suffix is stripped from the displayed title automatically.

Dark Mode Pro only

The Pro version includes a full dark mode implementation using Bootstrap 5.3’s data-bs-theme attribute. All colors, shadows, and surfaces adapt automatically.

How to enable it

1. Go to Layout → Main Menu section
2. Click Edit on the LinkList gadget
3. Add a new link with Site Name set to theme and any URL
4. Save the gadget

The template replaces the item with a theme switcher dropdown offering three options:

• Light — bi-sun-fill icon
• Dark — bi-moon-stars-fill icon
• Auto — bi-circle-half icon (follows system preference and updates in real time)

Dark Mode Logo

To use a different logo in dark mode:

1. Go to Layout → settings section
2. Add an Image gadget titled Dark Mode Logo (Optional)
3. Upload an alternative logo designed for dark backgrounds (lighter colors, no dark elements)
4. Save

The template swaps logos automatically when dark mode is active and reverts when switching back to light mode.

Persistence

The theme preference is stored in localStorage and persists across sessions. The Auto mode listens for OS-level prefers-color-scheme changes via matchMedia and updates the page in real time without a refresh.

Sidebar Widgets

Footer Widgets

The footer has a 3-column layout (col-md-6 col-lg-4):

The footer bottom bar includes an auto-updating copyright year and a menu for additional links.

Post Features

Breadcrumbs

On single post pages, breadcrumbs show Home · Label · Post Title with a clean transparent design and hover underline effect.

Post Header Card

Every post shows a header card with:

• Post title (with optional first-word accent color when enabled in Template Options)
• Author name with accent icon
• Publish date (configurable via Blogger’s showTimestamp setting)
• Reading time estimate (auto-calculated at 200 words per minute)
• Comment count
• Label pills (terracotta background with gold hover)

Post Pager

Previous and next post navigation with card-style thumbnails appears at the bottom of each post.

Loading Skeletons

CSS-only shimmer placeholders are shown while AJAX post lists load, keeping the experience smooth on slow connections. These skeleton cards match the shape of the actual content being loaded.

Customization

CSS Custom Properties

The template uses CSS custom properties for easy theme overrides. Key variables:

--color-primary: #C65D3E;
--color-secondary: #1A4A5A;
--color-accent: #D4A434;
--color-dark: #3C3028;
--color-light: #F9F3EA;
--font-display: 'DM Serif Display', Georgia, serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;

Blogger Theme Designer

Key customizable variables via Layout → Theme Designer:

• Main color (primary brand, default #C65D3E)
• Body text font and color
• Link colors (default, visited, hover)
• Blog title font and color
• Post title font and color
• Post text font and color
• Footer background color
• Hero subtitle color

Dark Mode Colors Pro only

When [data-bs-theme="dark"] is active, these variables invert automatically for a comfortable dark reading experience:

--color-primary: #D07050;
--color-secondary: #3A8A9A;
--color-accent: #E6BE5A;
--color-dark: #E8E0D5;
--color-light: #1E1A17;
--color-surface: #2A2522;

FAQs

How do I change the hero background?

Go to Layout → Hero Background section → click Edit on the Image gadget and upload a new image (1600px wide recommended).

How do I edit the hero title?

Go to Layout → Hero Content section → edit the Header gadget. The title and subtitle fields control what shows in the hero.

How do I change which posts appear in Featured Courses?

Edit the HTML gadget in the Featured Courses section and change the label in the shortcode. Example: 6-tag:MyLabel-600px-course.

How do I enable dark mode?

Pro only Add a LinkList item with the text theme to the main menu. The template automatically replaces it with the dark mode toggle.

How do I add a dark mode logo?

Pro only Add an Image gadget in the settings section titled Dark Mode Logo (Optional) and upload your alternative logo.

How do I remove the sidebar?

In the Template Options gadget, set Sidebar Location to none.

How do I add a list of posts inside a post?

Use the post-body shortcode: [posts--tag:LabelName--5] anywhere in your post content. Works for course modules, lesson directories, resource lists, etc.

How do I change social media icons?

Edit the LinkList gadget in the navSocial section. Add your profile URLs as links — the template detects each network automatically.

How do I update the logo?

Go to Layout → Page Header section → click Edit and upload your logo image.

How do I customize the labels gallery in Free?

Edit the HTML widget in the Labels Gallery section to update card links and images. For automatic generation, upgrade to Pro.

Changelog

• 17-05-2026 — Initial release of LMS Education Tlalli. Bootstrap 5.3, full-bleed animated hero, 9 homepage sections, shortcode system (10 display styles), Template Options widget (6 settings), widget title markers, RTL support. Pro: dark mode with logo swap, auto-generated labels gallery, random tag shortcode, credit removal.

Citlali Blogger Template Documentation

After some time, I decided to dust off VIM (my preferred code editor) and continue working on a template I had started a few months ago. Citlali, which means “star” in Nahuatl, is a common female name in Mexico.

Built on the latest version of the Bootstrap framework, Citlali is designed to be simple yet capable of displaying a substantial amount of content on the homepage. The design aims to convey a fresh image while remaining easy to read and compatible with a wide range of screen resolutions. One of the standout features is the inclusion of a dark mode and a toggle switch to select the preferred theme.

Citlali is available in its original CSS version and for Blogger in both a regular version (fully functional) and a Pro version, which offers additional customization features.

Content

Documentation

Template Options

This template includes a small options gadget that allows you to customize certain elements. The available options are:

• Display Particles effect on Header – Toggles the display of white particles floating in the header. In the URL field, enter true or false.
• Top menu always visible (sticky menu) – Choose whether to keep the top menu visible at all times. In the URL field, enter true or false.
• Force uppercase in titles – Converts post titles, sidebar titles, etc., to uppercase. In the URL field, enter true or false.

Main Drop-Down Menu

The main menu supports drop-down items and is based on a Link List gadget. To add a regular link (without a sub-menu), simply add it as you would in any Link List gadget.

One Level Drop-Down Menu

To add an item with a one-level drop-down sub-menu:

1. Create a regular link (the URL is not relevant for this step).



2. Create a second link, but add a dash at the beginning of the New Site Name field and include the corresponding URL. This will be the first element of your drop-down menu.



3. Add as many elements as needed, ensuring each Site Name begins with a dash.

Full gadget example:

Result:

Two Levels Drop-Down Menu

To add an item with a two-level drop-down sub-menu:

1. Create a regular link (the URL is not relevant for this step).



2. Create a second link, but add one dash at the beginning of the New Site Name field and include the corresponding URL. This will be the first element of your drop-down menu.



3. Create a third link, but this time add two dashes at the beginning of the New Site Name field and include the corresponding URL.

Full gadget example:

Result:

Blog Title or Logo

You can change, delete, or add a logo to your blog by navigating to your Blogger panel, then Layout, and locating the Page Header Gadget. Click on Edit to make changes.

You can also edit your blog title and description using this option.

Gadget Descriptions

Most gadgets in Blogger do not allow you to add a text description. However, you can add a description under the title of any gadget by formatting the title as follows:

Title-desc:Description

Where:

• Title is the title you want for the widget.
• Description is the text description to display under the title.

Example: To add a description to the Follow by Email widget, write the following in the title field:

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

The gadget will look like this:

Result:

Note: The email subscription gadget was removed by Blogger, but the description format for gadgets remains the same.

Blockquotes

To display blockquotes correctly within a post, use the HTML mode in the post editor:

Use the following HTML structure:

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

Code

To display code correctly within a post, use the HTML mode in the post editor (see Blockquotes). Use the following HTML structure:

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

Lists of Posts on Main Page

The main page features two sections with lists of posts (in the demo, these are labeled “Featured posts” and “Latest news”) and a slider (labeled “Slider” in the demo). These sections use an HTML gadget and display the latest blog posts by default. However, they can be configured to show posts from specific labels. The content of the HTML gadget must follow this structure:

NumberOfPosts-TypeOfPosts-ThumbnailSize-FormatStyle

Where:

• NumberOfPosts is the number of posts to display.
• TypeOfPosts can be:
  • latestposts to display the latest blog posts regardless of labels.
  • tag:Label to display the latest posts from a specific label. Replace “Label” with the exact name of the desired label.
• ThumbnailSize is the size in pixels of the thumbnail image.
• FormatStyle can be:
  • slider to display posts as a slider.
  • composition1 to display a gallery of posts. This format is used in the “Featured posts” section of the demo. The ideal NumberOfPosts value is 5, but you can use 9 or 13 for more content.
  • bloglist to display a list of posts, as seen in the “Latest news” section of the demo.

Example 1: To display 5 posts from the “Travel” label in the “Featured posts” section:

5-Tag:Travel-800px-composition1

Example 2: To display 5 posts from the “Languages” label in the slider:

5-tag:Languages-800px-slider

Example 3: To display the latest 4 blog posts in the “Latest news” section:

4-latest-400px-bloglist

Note: To display the latest blog posts, you do not need to include the tag: prefix.

List of Posts Inside a Post

To list posts under a specific label within a post (e.g., to display all content related to an event or person), use the following shortcode:

[posts--tag:Travel--50]

This will display the latest 50 posts under the “Travel” label.

Lists of Posts in a Gadget (Footer)

Similar to the slider, you can create lists of the latest blog posts or posts from specific labels in the sidebar or footer. To create a new list:

1. Go to Blogger/Layout and create a new HTML gadget. Use any title you prefer.
2. In the gadget’s content, use the following structure to display the latest blog posts:

3-latest-65px

To display posts from a specific label, use:

3-tag:Label name-65px

Replace “Label name” with the exact name of the desired label. You can also adjust the number of posts displayed by changing the number “3”.

Labels’ Galleries

Labels’ galleries are available in the Pro version of the template. These galleries use the Labels gadget to display a visually appealing list of labels with preview images. The preview image corresponds to the image of the latest post within that label.

In the demo, this feature is used in the “Sections” section on the homepage and as a gadget in the footer.

In the free version, the “Sections” section is replaced with an HTML gadget. You can manually create a gallery by editing the HTML code for each element:

<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

You can easily add social icons to the sidebar or footer by editing or creating a Links List gadget. Add your social media links, and they will automatically be displayed as icons.

The same applies to the social icons bar in the header:

For Mastodon, which uses various servers and domain names, append ?icon=mastodon to your profile link:

https://fosstodon.org/fcovicente?icon=mastodon

Latest Comments Widget

To add a Latest Comments widget, create a new HTML gadget with the following content:

NumberOfComments-comments

Where NumberOfComments is the number of comments to display. For example, to display the latest 3 comments:

3-comments

Dark Mode

Dark mode is available in the Pro version. This feature uses JavaScript to detect the user’s preference for light (default) or dark mode and applies it to the layout. Users can toggle their preference using the switch in the main menu, and their choice will be remembered for future visits.

Related Posts

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

404 Error Page

You can customize the 404 error page from the Blogger panel. Locate the corresponding section in the Design tab, where you will find an image gadget and an HTML gadget.

Main Font Family and Colors

To edit the main font family and colors of certain elements, go to Layout in your Blogger dashboard and click on the link to the Theme Designer. Under Adjust widths, you can change the font and colors.

RTL Support

The template offers partial support for RTL (right-to-left) alignment, used in languages like Arabic. To enable RTL support:

1. Locate the following line in your template’s code:

<html b:css='false'

2. Replace it with:

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

Here, ar stands for Arabic.

3. Find the following line:

bootstrap.min.css

4. Replace it with:

bootstrap.rtl.min.css

Changelog

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

Theme options

Cihuatl uses the custimizer to set up the slider, some colors, logo and some general settings:

Widgets

Cihuatl also incorporate 2 widgets, one for the latest posts with post thumbnails and one for the latest comments with avatars.

Changelog

• Version 1.0.1 – Initial release.

Content

Documentation

Templates options

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

• Sidebar location. You can choose to display the sidebar on the right (default), on the left or hide it. So, in the URL field you could write: right, left or none.
• 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.

Main drop down menu

The main menu support drop down elements. It works based on a Links List gadget. So, to add a regular menu item (without drop down sub items) you just add a normal link, example: To add a menu item with ONE level drop down sub items:

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:

Result:

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: Result:

Slider

The slider uses a HTML gadget to work, it creates a list of posts: The latest posts in the blog (default) or the latest posts under a specific label. To edit the slider, go to Blogger / Layout and look for the Slider gadget, click edit and you’ll see this content:

4-latest-1110px-slider

Here you can replace “4” is the number of posts you want to display. “latest” indicates that the latest blog posts are going to be displayed; to display posts under a particular label replace “latest” with: tag:Name of the tag.

Example: To display the latest 3 posts under the label Women, the line will look like:

3-tag:Women-1110px-slider

Blog title or Logo

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.

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-desc:Description

Where:

• 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:

Blockquotes

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

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>

List of posts inside a post

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 “Women”, you just need to add inside you post this line: [posts--tag:Women--50]

Lists of posts in a gadget (sidebar or footer)

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:

3-latest-65px

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”.

To make any regular Labels gadget work as a Label’s gallery you need to add the text:

-BTLabels

at the end of the gadget’s title. Example: If the title is Sections, the final title will be Sections-BTLabels.

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

Social icons in sidebar and footer

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.

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-comments

Where:

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:

3-comments

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.

Changelog

• Version 1.1.3 – 20-12-2022 – Added social icons for Tiktok and Mastodon on Pro version. Minor Javascript bug fixed due to format change in image URLs. Minor CSS fixes.
• Version 1.1.2 – 19-02-2022 – Scripts fixed due to format change in image URLs
• Version 1.1.1 – 21-09-2021 – Mail subscription gadget removed due to Google’s questionable decision to discontinue it.
• Version 1.1 – 16-03-2021 – Fixed bug on dropdown menu when showing a second level item.
• Version 1.0 – 16-07-2020 – Initial release.

Template Options Widget

The Template Options gadget (LinkList46) sits in your Layout’s settings section. It lets you control core layout and styling without touching code.

Navbar & Menu

Top Menu

The Top Menu is based on a Links List Gadget/Widget, it automatically shows icons for a telephone number, email and location.

The menu will identify email address and phone number and add the corresponding icon, for the location icon you just need to be sure it includes the word “map” in any place inside the URL. If your URL doesn’t have this word, you can add #map at the end of you URL. Example:

https://miblog.blogspot.com/p/about/#map

Full gadget example:

Top Social Media Menu

The Top Social Media Menu is also based on a Links List gadget. This menu will turn your social media links into the correspondent icons.

Full gadget example:

Main drop down menu

The Main Menu support drop down sub items. It works based on a Links List gadget. So, to add a regular menu item (without drop down sub items) you just add a normal link, example:

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

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:

Result:

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.

If you want to add a list of posts with a specific Label, add a new link following the next format:

tag:TagName-NumberOfPost-DisplayImage

Example: To show 5 posts from the label called ‘Photos’ with thumbnail, you should write:

The result is going to be something like:

Dark mode switcher Pro only

To add the dark mode toggle to your navbar, create a link with Site Name set to theme and any URL. The template replaces it with a dropdown offering Light (sun icon), Dark (moon-stars icon), and Auto (half-circle icon, follows system preference).

Header

Header background image

The header background image works using an Image gadget, to change it, go to your Blogger panel, then Layout and look for Header Background, click edit and add your new image.

To better results, use an image at least 1600px wide.

Blog title or Logo

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.

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

Homepage Sections

All homepage sections appear only on the homepage. Each is powered by an HTML widget that contains a single shortcode line.

To edit which posts appear in a section:

1. Go to Layout and find the section on the homepage
2. Click the Edit icon
3. Change the shortcode to point to your label. For example, to show 6 posts from a label called “Courses” in course card style: 6-tag:Courses-350px-course
4. To show the latest posts regardless of label, use latest: 6-latest-350px-course
5. Save the gadget

Blocks menu

Displayed only on the home page, the blocks menu uses a Links List gadget. Since it doesn’t support drop down item, you can, delete or edit item as normal Links List gadget and these will be turn into blocks.

Home page Posts list 1: Courses

Both, the Pro and Free version has the first list of posts displayed in the home page. You can edit this area to show the latest posts or posts under a specific label.

To edit this area, click the edit icon . To display the 6 latest posts (default) use this line:

6-latest-350px-course

To display the 6 latest posts under the tag “Courses”, for example, use this line:

6-tag:Courses-350px-course

Labels gallery Pro

In the Pro version of the template we added an new and easy way to display your blog’s labels, it’s a gallery that display the labels you want. In the Free version you also has this section, but you need to use HTML code to add name, link and thumbnail for each label.

To choose which labels to show, you just need to click on the Edit icon on the gadget . Click on Selected Labels, then edit, then click on the labels you want to display, click Done and Save the changes.

Testimonials slider

This section is perfect to add Testimonials about your services or products, but since this is also a list of posts, you can add any content here. You just need to specify the label name you want to use.

For example, to display the 3 latest posts under the label “Testimonials”, click on the edit icon and you use this line:

3-tag:Testimonials-250px-testimonial

Widget Title Markers

Adding a description (-desc:)

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-desc:Description

Where:

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

Example: The Search Box gadget doesn’t have a field to add a description, to add one, we can write the following in the title field:

SEARCH-desc:Find courses, lessons and tutorials.

The gadget would look like:

And the result would looks like:

Home page Posts list 2: Blog Pro only

This section is only available in the Pro version. Here you can display the latest posts in your blog or the latest posts under a specific label.

For example, you display the latest 6 posts under the label “Blog”, click on the edit icon and use this line:

6-tag:Blog-350px-bloglist

Latest video Section

In this section you can display the video inside the latest post of a specific label.

For example, to display the video in the latest post published under the label “Videos”, click the edit icon in this area and use this line:

1-tag:Videos-800px-video

Shortcodes Reference

Post List Shortcode (in HTML widgets)

{N}-{postsType}-{size}px-{style}

Parameters:

• N — number of posts to show
• postsType — latest (most recent) or tag:LabelName (posts under a specific label)
• size — thumbnail width in pixels
• style — display style (see table below)

Available styles:

Real-world examples:

6-latest-350px-course             Latest 6 posts as course cards
3-tag:Testimonials-250px-testimonial  3 testimonials in slider
1-tag:Videos-800px-video          Latest video from "Videos" label
4-tag:Campus-500px-mosaic         Campus gallery in 4-column mosaic
3-latest-65px                     Latest 3 posts, sidebar list
6-tag:Blog-350px-bloglist         Latest 6 blog posts as cards

Comments Shortcode

N-comments

Example: 3-comments — displays 3 recent comments with avatars and snippets. Best used in sidebars or footer columns.

Shortcodes Inside Posts

In a education website, sometimes is very useful to display the of post under a specific label, for example to display the content of online course. In this template you can create this list with just one line.

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

[posts--tag:Open Source--50]

Dark Mode Pro only

The Pro version includes a full dark mode implementation using Bootstrap 5.3’s data-bs-theme attribute. All colors, shadows, and surfaces adapt automatically.

How to enable it

1. In Template Options, set Dark Mode to true.
2. Add a LinkList item with Site Name set to theme to your Main Drop Down Menu gadget (LinkList78).

The template replaces the theme item with a dropdown offering three options:

• Light — sun icon (bi-sun-fill)
• Dark — moon-stars icon (bi-moon-stars-fill)
• Auto — half-circle icon (bi-circle-half, follows system preference and updates in real time)

Dark Mode Logo

To use a different logo in dark mode:

1. Go to Layout → settings section
2. Add an Image gadget titled Dark Mode Logo (Optional)
3. Upload an alternative logo designed for dark backgrounds (lighter colors, no dark elements)

The template swaps logos automatically when dark mode is active and reverts when switching back to light mode.

Persistence

The theme preference is stored in localStorage and persists across sessions. The Auto mode listens for OS-level prefers-color-scheme changes via matchMedia and updates the page in real time without a refresh.

Sidebar & Footer Widgets

Social icons in sidebar and footer Pro only

In this template you can add social icons to the sidebar or footer in a very easy way (Pro version), 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.

Example:

Sidebar Widgets

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-comments

Where:

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:

3-comments

Footer Widgets

The footer has a 3-column layout:

The footer bottom bar includes an auto-updating copyright year and a menu.

Post Features

Every post includes:

• Breadcrumbs — Home · Label · Post Title navigation on single post pages
• Author Box — Profile image, name, and description below each post
• Related Posts — Auto-generated based on post labels with thumbnail previews
• Post Pager — Previous and next post navigation with card-style thumbnails
• Share Buttons — Email, Facebook, Twitter, Pinterest, and WhatsApp sharing

Customization

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.

Avatar/Profile Image

The template uses Blogger’s built-in profile image system. To update your avatar/profile image that appears in the template, you need to update your Blogger profile picture. Once you change it there, it will automatically update throughout the template.

Quick steps: Go to blogger.com/edit-profile.g → scroll down to Profile Photo → Remove image (if needed) → upload your new avatar → Save profile.

FAQs

How do I change the header background?

Go to Layout → find the Header Background Image gadget → click Edit and upload a new image (1600px wide recommended).

How do I edit the blog title or logo?

Go to Layout → Page Header section → click Edit on the Header gadget. You can change the title, description, and upload a logo image.

How do I change which posts appear in the Courses section?

Edit the HTML gadget in the Courses List section and change the shortcode. Example: 6-tag:MyLabel-350px-course.

How do I remove the sidebar?

In the Template Options gadget, set Sidebar Location to none.

How do I make the menu sticky?

In the Template Options gadget, set Top Menu Is Always Visible to true.

How do I add a list of posts inside a post?

Use the post-body shortcode: [posts--tag:LabelName--NumberOfPosts] anywhere in your post content. Example: [posts--tag:Course 1--10].

How do I change social media icons?

Edit the LinkList gadget in the Top Links Menu section (for top menu icons) or the FOLLOW ME gadget (for sidebar/footer icons). Add your profile URLs as links — the template detects each network automatically.

How do I add a description to a widget?

Append -desc:Your description to the widget’s title field. Example: Courses-desc:Explore our latest courses and tutorials.

How do I update the copyright year?

The template automatically updates the copyright year in the footer — no action needed.

How do I enable dark mode? Pro only

Set Dark Mode to true in Template Options, then add a LinkList item with the text theme to your main menu (LinkList78).

How do I add a dark mode logo? Pro only

Add an Image gadget in the settings section titled Dark Mode Logo (Optional) and upload your alternative logo.

How do I enable RTL direction?

In the Template Options gadget, set RTL Direction to true. The template loads Bootstrap’s RTL CSS and flips the entire layout for right-to-left languages.

Changelog

• 23-05-2026 – Added RTL direction toggle in Template Options. Bootstrap 5.3.3 RTL CSS is loaded when enabled. Works cross all versions (Free, Pro, Demo).
• 23-05-2026 – Added dark mode support to Pro and Demo versions with localStorage persistence, prefers-color-scheme listener, and auto logo swap. Upgraded Bootstrap from 4.3.1 to 5.3.3.
• 22-05-2026 – Migrated icon library from Font Awesome 4.7 to Bootstrap Icons 1.11.3. Added data:view.isPreview conditional for template preview support.
• 20-12-2022 – Added social icons for Tiktok and Mastodon on Pro version. Minor Javascript bug fixed due to format change in image URLs.
• 19-02-2022 – Scripts fixed due to format change in image URLs
• 21-09-2021 – Mail subscription gadget removed due to Google’s questionable decision to discontinue it.
• 16-03-2021 – Fixed bug on dropdown menu when showing a second level item.
• 23-08-2020 – Added Template options gadget. Fixed: Sidebar gadgets visible from Layout section.
• 17-07-2020 – Fixed thumbnails from YouTube with low quality. Added third level of item in drop down menu.
• 28-06-2020 – Fixed: post thumbnails are more compatible with the new Blogger.
• 24-06-2020 – Fixed pages’ “read more”.
• 08-06-2020 – Initial release.

Content:

• Main features.
• Documentation.
  • Enable responsive mobile version.
  • Top Menu.
  • Top Social Media Menu.
  • Main drop down menu.
  • Labels gallery.
  • Header background image.
  • Blog title or Logo.
  • Icons Menu.
  • Lists of posts: latest or by label.
  • Posts gallery.
  • Gadget descriptions.
  • Latest comments gadget.
  • Main font family and colors.
• Changelog.

Main Features:

– Full responsive

Maya uses Bootstrap 4 as CSS framework and jQuery to make an consistent experience across different devices. Even you YouTube videos are fully responsive.

– Display posts anywhere.

Thanks to the Blogger’s feed json api adding lists, galleries and even menu items containing your latest post, posts by Label or latest comments never was so easy.

– Labels gallery (Pro version only).

We invented a new way to display your Labels(tags), using the image of the last post in every label and the best part is that you can customize it without coding.

– Related posts (Pro version only).

Automatically generated related posts base on Labels and without repeating the current post.

– Icons Menu.

You have a menu based on the travel icon set created by Laura Reen to give more personality to your design. You can edit without writing a line of code on the pro version or editing some simple HTML on the free one.

– Social Icons.

You can add, edit or delete social icons at different locations just editing a standard List of Links on the pro version or some HTML in the free one.

– SEO Friendly.

We have focused on create a friendly design, firstly for human but also to search engines. Using post summaries, breadcrumbs, cdn’s, asynchronous javascript, etc.

Documentation

Enable responsive mobile version

In order to get advantage of the full responsive version, you must to disable the Blogger’s default mobile version, to do it, go to Theme, then look for ‘Mobile version’ and click on the configuration icon . Then choose: “No. Show desktop theme on mobile devices.”

Top Menu

The Top Menu is based on a Links List Gadget/Widget, it automatically shows icons for a telephone number, email and location.

The menu will identify email address and phone number and add the corresponding icon, for the location icon you just need to be sure it includes the word “map” in any place inside the URL. If your URL doesn’t have this word, you can add #map at the end of you URL. Example:

https://miblog.blogspot.com/p/about/#map

Full gadget example:

Top Social Media Menu

The Top Social Media Menu is also based on a Links List gadget. This menu will turn your social media links into the correspondent icons.

Full gadget example:

Main drop down menu

The Main Menu support drop down sub items. It works based on a Links List gadget. So, to add a regular menu item (without drop down sub items) you don’t just add a normal link, example:

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

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:

Result:

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: 

Result:

Labels gallery

In the Pro version of the template we added an innovative way to display your blog’s labels, it’s a modal windows that display all the labels you choose with thumbnails.

To use, you just need to create a link on a menu, text gadget, image gadget or inside a post content with the next anchor:

#bt-tags

Example: On a menu the link would looks like:

On a text gadget or inside a post content it could looks like:

<a href="#bt-tags">Sections</a>

To choose which labels to show, you just need to click on the Edit icon on the gadget . Click on Selected Labels, then edit, then click on the labels you want to display, click Done and Save the changes.

You can also edit the Title for this gadget but you must add:

-BTLabels

At the end of your new title. Example:

Header background image

The header background image works using an Image gadget, to change it, go to your Blogger panel, then Layout and look for Header Background, click edit and add your new image.

To better results, use an image at least 1600px wide.

Blog title or Logo

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.

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

Icons Menu

On this template we incorporated an menu with icons related to travel. It, not surprisingly, works based on a Link List gadget for the Pro version and on code HTML to the free version.

For the Pro version: Edit the gadget adding your own links. To attach an icon, you just need to add an “anchor” at the end of the link, the anchor depends on the icon you want. There are in total 20 different icons, the anchor for each are:

Anchor	Icon
#wallet
#destinations
#stories
#passport
#beach
#photos
#glasses
#medicine
#apps
#watch
#tool
#sleepmask
#haircomb
#toothbrush
#compass
#water
#cometicsbag
#boardingpass
#bag
#ebooks

Example. Let say you want to add the #destinations icon to the next link: https://myblog.blogspot.com/search/label/Travel ; the final link will be:

https://myblog.blogspot.com/search/label/Travel#destinations

And the result:

For the Free version the process is not automatic and you need to edit the HTML directly. Example:

<li><a href="DESTINATION_LINK"><div class="menu-icon"><img src="IMAGE_URL" heigh="64" width="64" /></div> <span>LINK_TEXT</span></a></li>

Where DESTINATION_LINK is the destination url, IMAGE_URL is the icon url and LINK_TEXT is the text you want to display under the icon.

Lists of posts: latest or by label

To display the latest posts in your blog or the latest blog in a specific label, you just to add a new HTML gadget in the place you want to show it and use the next format:

NumberOfPosts-PostsType-ThumbnailSize-DisplayStyle

Where:

• NumberOfPosts is the quantity of posts you want to display.
• PostsType can be either:
  • latestposts – To show the latest posts, regardless of the label.
  • tag:LabelName – To show the latest posts in a specific Label, where LabelName is the name of the label, written exactly as appears in your posts.
• ThumbnailSize – Is the size in pixel of the image.
• DisplayStyle – It can be:
  • slider – To show an slider.
  • list – To show a list of posts. Ideal for the sidebar or the columns in the footer.
  • mosaic – To show as a gallery. Note that the NumberOfPosts must be a multiple of 4.

For example: To show a list of 8 posts, labeled ‘My Recipes’ and a 75px width thumbnail, you should add a HTML gadget with the next content:

8-tag:My Recipes-75px-list

Posts gallery

To edit the gallery gadget or add a new one, you have to follow the same process as the slider or the lists of posts, modify/add a HTML gadget using the format:

NumberOfPosts-PostsType-ThumbnailSize-DisplayStyle

• NumberOfPosts is the quantity of posts you want to display.
• PostsType can be either:
  • latestposts – To show the latest posts, regardless of the label.
  • tag:LabelName – To show the latest posts in a specific Label, where LabelName is the name of the label, written exactly as appears in your posts.
• ThumbnailSize – Is the size in pixel of the image.
• DisplayStyle – It can be:
  • slider – To show an slider.
  • list – To show a list of posts. Ideal for the sidebar or the columns in the footer.
  • mosaic – To show as a gallery. Note that the NumberOfPosts must be a multiple of 4.

For example, to display a gallery of 8 posts (which is a multiple of 4), with image size of 500px and labeled ‘Portfolio’, the format would be:

8-tag:Portfolio-500px-mosaic

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-desc:Description

Where:

• 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 our blog! 1 post per week.

The gadget would look like:

And the result would looks like:

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-comments

Where:

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:

3-comments

Main font family and colors

To edit the current main font family (Playfair Display) 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.

Changelog

• Version 1.0.9 – 20-12-2022 – Added social icons for Tiktok and Mastodon on Pro version. Minor Javascript bug fixed due to format change in image URLs.
• Version 1.0.8 – 19-02-2022 – Scripts fixed due to format change in image URLs
• Version 1.0.7 – 01-05-2021 – Fixed a small Javascript bug affecting the top and main menu.
• Version 1.0.6 – 16-03-2021 – Fixed bug on dropdown menu when showing a second level item.
• Version 1.0.5 – 17-07-2020 -Fixed thumbnails from YouTube with low quality. Added third level of item in drop down menu.
• Version 1.0.4 – 28-06-2020 – Fixed: post thumbnails are more compatible with the new Blogger.
• Version 1.0.3 – 24-06-2020 – Fixed pages’ “read more”.
• Version 1.0.2 – 11-06-2020 – Small CSS and Javascript fixes. Page 404 now can be customized, now is using gadgets in Pro version.
• Version 1.0.1 – 09-01-2020 – Small CSS fixes. Avatar size fixed for not rectangular images.
• Version 1.0 – 09-07-2019 – Initial release.

En español: Plantilla Blogger: Mandarin.

Download Mandarin

DOWNLOAD NOW

Main Features

– Full responsive

Mandarin uses Bootstrap 4 as CSS framework.

– Display posts anywhere.

Thanks to the Blogger’s feed json api it is very easy to add lists, galleries and even menu items containing your latest post, posts by Label or latest comments.

– Slider, drop down menu and gallery.

Responsive drop down menu, slider/carousel and gallery without coding.

Documentation

Enable responsive mobile version.

In order to get advantage of the full responsive version, you need to disable Blogger’s default mobile version, to do it go to Theme, then look for the Mobile version and click on the configuration icon . Then choose:

Templates options

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

• Sidebar location. You can choose to display the sidebar on the right (default), on the left or hide it. So, in the URL field you could write: right, left or none.
• 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.
• Slider height in pixels (number). You can change the maximum height (in pixels) of the slider here. In the URL field you need to write a number.

Social media icons.

In this template you can add social icons to the top menu, 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.

Drop down Menu.

This template has 2 navigation bars that work as drop down menus. Both of them use an Links List widget. To add a normal link to the menu, you just need to add a link to the list as usual:

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

1. Crate a link, the URL is not important.

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

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

For example, this list:

Will result on the next 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: Result:

If you want to add a list of posts with a specific Label, add a new link following the next format:

tag:TagName-NumberOfPost-DisplayImage

Example: To show 5 posts from the label called ‘Photos’ with thumbnail, you should write:

The result is going to be something like:

Slider / carousel

You can modify/add a slider simply with a HTML widget. Simple add/modify a HTML widget with the next content:

NumberOfPosts-PostsType-ThumbnailSize-DisplayStyle

Where:

• NumberOfPosts is the quantity of posts you want to display.
• PostsType can be either:
  • latestposts – To show the latest posts, regardless of the label.
  • tag:LabelName – To show the latest posts in a specific Label, where LabelName is the name of the label, written exactly as appears in your posts.
• ThumbnailSize – Is the size in pixel of the image.
• DisplayStyle – It can be:
  • slider – To show an slider.
  • list – To show a list of posts. Ideal for the sidebar or the columns in the footer.
  • mosaic – To show as a gallery. Note that the NumberOfPosts must be a multiple of 4.

For example, to set a Slider with 5 posts, using the latest published entries, image size of 1110px your HTML widget should have the next content:

5-latestposts-1110px-slider

The same example, but using the posts in a label called ‘People around the world’ would be:

5-tag:People around the world-1110px-slider

You can also change the slider maximum height. See: Theme options.

Lists of posts: latest or by label.

To display the latest posts in your blog or the latest blog in a specific label, you just to add a new HTML widget in the place you want to show it and use the next format:

NumberOfPosts-PostsType-ThumbnailSize-DisplayStyle

Where:

• NumberOfPosts is the quantity of posts you want to display.
• PostsType can be either:
  • latestposts – To show the latest posts, regardless of the label.
  • tag:LabelName – To show the latest posts in a specific Label, where LabelName is the name of the label, written exactly as appears in your posts.
• ThumbnailSize – Is the size in pixel of the image.
• DisplayStyle – It can be:
  • slider – To show an slider.
  • list – To show a list of posts. Ideal for the sidebar or the columns in the footer.
  • mosaic – To show as a gallery. Note that the NumberOfPosts must be a multiple of 4.

For example: To show a list of 8 posts, labeled ‘My Recipes’ and a 75px width thumbnail, you should add a HTML widget with the next content:

8-tag:My Recipes-75px-list

Posts gallery.

To edit the gallery widget or add a new one, you have to follow the same process as the slider or the lists of posts, modify/add a HTML widget using the format:

NumberOfPosts-PostsType-ThumbnailSize-DisplayStyle

Where:

• NumberOfPosts is the quantity of posts you want to display.
• PostsType can be either:
  • latestposts – To show the latest posts, regardless of the label.
  • tag:LabelName – To show the latest posts in a specific Label, where LabelName is the name of the label, written exactly as appears in your posts.
• ThumbnailSize – Is the size in pixel of the image.
• DisplayStyle – It can be:
  • slider – To show an slider.
  • list – To show a list of posts. Ideal for the sidebar or the columns in the footer.
  • mosaic – To show as a gallery. Note that the NumberOfPosts must be a multiple of 4.

For example, to display a gallery of 8 posts (which is a multiple of 4), with image size of 500px and labeled ‘Portfolio’, the format would be:

8-tag:Portfolio-500px-mosaic

Widget descriptions.

Most widgets 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 widget, change the title of the widget following this format:

Title-desc:Description

Where:

• 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 our blog! 1 post per week.

The widget would look like:

And the result is like:

Latest comments widget.

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

NumberOfComments-comments

Where:

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 widget would be:

3-comments

Main font family and colors.

To edit the current main font family (Playfair Display) 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.

Feedback

If you have any feedback or question about this template, please a comment in the respective template download page.

Changelog

• Version 1.0.5 – 20-12-2022 – Added social icons for Tiktok and Mastodon on Pro version. Minor Javascript bug fixed due to format change in image URLs.
• Version 1.0.4 – 19-02-2022 – Scripts fixed due to format change in image URLs
• Version 1.0.3 – 16-03-2021 – Fixed bug on dropdown menu when showing a second level item.
• Version 1.0.2 – Added a Pro version. Added third level of item in drop down menu. Added a theme options gadget. 404 error page now works with gadgets. Updated javascript plugins.
• Version 1.0.1 – Minor JavaScript fixes.
• Version 1.0 – Initial release.

License

This template is under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International license.

In the words of its author:

The theme features an elegant design that uses a dark (brown) content area against a light page background accented by a spiffy floral pattern reminiscent perhaps of libraries of old estate manors in the movies (or if you own one),

Features

• 1 and 2 Columns.
• Menu with static pages.
• Color Settings from the panel.
• Social menu.

Download

Blogger: Download | Demo
WordPress: Download | Demo

Installation

You can read our FAQ section to see how to install a blogger template.

Settings

Social menu

In the template code (Home → Design → Edit HTML) seeks the following code:

<div class='social'>
  <ul>
   <li><a class='s1' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='RSS'><em>RSS Feed</em></a></li>
   <li><a class='s3' href='http://twitter.com/username' title='Twitter'><em>Twitter</em></a></li>
   <li><a class='s4' href='http://facebook.com/username' title='FaceBook'><em>FaceBook</em></a></li>
   <li><a class='s2' href='#' title='Share'><em>Share</em></a></li>
  </ul>
</div>

And replace each url with yours.

Menu

To add links to the menu simply create a new static page from the Dashboard.

Date

Change the format of Date Header Format (Dashboard → Settings → Formatting → Date Header Format) for the penultimate option.

License

This work is licensed Creative Commons Attribution-Share Alike 3.0 License. This means you may use it, and make any changes you like. Just leave the credits on footer to respect the designer’s work.

Features

• 3 Columns.
• Menu with static pages.
• Color Settings from the panel.
• Comments in the footer completely adapted.
• Form on the same page and great support for avatars.

Download

Blogger: Download | Demo
WordPress: Download | Demo

Settings

1. Twitter

Search within your template code (Home → Design → Edit HTML) the following url:

http://twitter.com/btemplates

And replace it with your own twitter URL.

2. Menu

To add links to the menu, simply create a new static page from the Dashboard.

Lisence

This work is licensed Creative Commons Attribution-Share Alike 3.0 License. This means you may use it, and make any changes you like. Just leave the credits on footer to respect the designer’s work.

Features

• Two main columns, but sidebar with one or two columns.
• Three areas for gadgets / widgets.
• Twitter status box.
• Menu with static pages.
• Social Bookmarks on individual pages.
• Typography Lacuna Regular in titles (with javascript).
• Color Settings from the panel.
• Not compatible with the new Template designer.
• Borders rounded with images (compatible with IE).

Download

Blogger: Download | Demo

Installation

You can read our FAQ section to see how to install a blogger template.

Settigns

Twitter

Search within your template code (Home → Design → Edit HTML) the following url:

http://twitter.com/btemplates

And replace it with your own twitter URL.

Now find:

btemplates.json

Replace “btemplates” with your own username.

Menu

To add links to the menu, simply create a new static page from the Dashboard.

Lisence

Licensed under GPL. Permitted use on personal or commercial sites (without removing or adding links in the credits).