ListMode Theme Documentation

Theme Installation

After purchasing the ListMode Blogger template, you’ll receive a download link via email. Follow the steps below to download, extract, and install the template on your blog.

How to Download After Purchase

  1. Check your email inbox (or spam folder) for the product delivery email.
  2. Click the provided download link to download the .zip file to your computer.
  3. Right-click the ZIP file and choose "Extract All", or use a tool like WinRAR or 7-Zip to unzip the package.
  4. Inside the extracted folder, you’ll find the template file named listmode-blogger-template.xml.

Method 1: Copy-Paste XML into Edit HTML (Recommended)

This is the best method to install this custom-developed Blogger template. It ensures all formatting, widgets, and structure remain intact and helps prevent Blogger’s XML parser from trimming essential code.

  1. Open the listmode-blogger-template.xml file using a text or code editor (e.g., Notepad, Notepad++, VS Code, Sublime Text).
    Important: Avoid using MS Word or rich text editors, as they may alter or corrupt the code.
  2. Select all code using Ctrl + A (Cmd + A on Mac) and copy it with Ctrl + C (Cmd + C on Mac).
  3. Go to your Blogger Dashboard and choose your blog.
  4. Click Theme on the sidebar.
  5. Click the dropdown arrow ▼ next to Customize and select Edit HTML.
  6. Inside the code editor:
    • Press Ctrl + A (Cmd + A on Mac) to select all existing code.
    • Press Delete or Backspace to clear the editor.
    • Paste the copied template code using Ctrl + V (Cmd + V on Mac).
  7. Click the Save icon in the top-right corner.
Why we recommend this method:
  • Avoids Blogger’s automatic code filtering during file upload.
  • Preserves custom structure and advanced layout elements.
  • Ensures best compatibility for this premium template.

Method 2: Uploading the XML File

This method is easier for beginners and involves uploading the full XML template file without manual editing.

  1. Go to your Blogger Dashboard and select your blog.
  2. From the sidebar, click Theme.
  3. Click the dropdown arrow ▼ next to Customize and select Restore.
  4. Click Upload, browse your extracted folder, and select the listmode-blogger-template.xml file.
  5. Click Open to upload and install the template.

Troubleshooting Tips

  • Didn’t receive the download email? Wait 5–10 minutes or check your spam/junk folder.
  • Template not saving? Make sure you copied the entire XML code from the .xml file without missing any part.
  • Layout broken or widgets missing? Re-add or configure them via the Layout section.
  • Changes not showing? Clear browser cache with Ctrl + F5 (Cmd + F5 on Mac).
  • Want to revert? Restore your old template via Theme → Backup & Restore.
  • Still can’t install the theme? Contact us for help.

How to Configure Meta Tags

This tutorial will guide you through editing specific values within your Blogger meta tags by accessing the Edit HTML section. Meta tags provide information about your blog's content to search engines and social media platforms. Editing these values can improve your blog's visibility and sharing capabilities.

1 Access the Theme's XML Code

  1. Log in to Blogger.com and open your blog.
  2. From the left-hand menu, click Theme.
  3. Click the dropdown arrow ▼ beside the Customize button.
  4. Select Edit HTML to open the theme’s source code.

2 Locate the Meta Tags Code

Inside the HTML editor, look for the meta tags area located at the top of the theme’s source code.

If you unable to find it, click inside the HTML Editor and press Ctrl + F (Cmd + F on Mac) to open the search box and look for:

<meta expr:content='data:view.title.escaped' name='title'/>

This will take you to the meta tags area inside the <head> section of your theme.

3 Edit the Values

Carefully edit the values within the content attribute of the following meta tags:

Homepage Keywords

Locate the line:

<meta content='ADD COMMA SEPARATED KEYWORDS HERE' name='keywords'/>

Replace the text ADD COMMA SEPARATED KEYWORDS HERE with relevant keywords for your blog's homepage, separated by commas.

For example:

<meta content='woodworking projects, DIY furniture, woodworking tutorials, beginner woodworking' name='keywords'/>

Default Open Graph and Twitter Image

Find this image URL (appears in 4 places):

https://yourdomain.com/path-to-default-og-image.jpg

Replace all instances of https://yourdomain.com/path-to-default-og-image.jpg with the actual URL of the default image you want to use when sharing your blog posts or homepage on social media—this image will appear when a specific post image is not available.

For example:

<meta content='https://www.example.com/images/default-share-image.jpg' property='og:image'/>
<meta content='https://www.example.com/images/default-share-image.jpg' property='twitter:image'/>
Image Recommendations:
  • Dimensions: 1200×630 pixels (1.91:1 ratio)
  • File type: JPG or PNG with optimized compression.
  • Image URL: Use absolute URL (include https://)

Twitter Handle

Locate the lines:

<meta content='@yourtwitterhandle' name='twitter:site'/>
<meta content='@yourtwitterhandle' name='twitter:creator'/>

Replace '@yourtwitterhandle' with your actual Twitter(X) username (including the '@' symbol).

For example:

<meta content='@newbthemes' name='twitter:site'/>
<meta content='@newbthemes' name='twitter:creator'/>

Facebook App ID

Locate the line:

<meta content='YOUR-FB-APP-ID' property='fb:app_id'/>

Replace 'YOUR-FB-APP-ID' with your Facebook App ID. This is required for Facebook Insights and other Facebook integrations. If you don't have one, you'll need to create one on the Facebook for Developers website.

Facebook Admin ID

Locate the line:

<meta content='YOUR-FB-ADMIN-ID' property='fb:admins'/>

Replace 'YOUR-FB-ADMIN-ID' with your Facebook User ID. This can also be helpful for Facebook Insights. You can find your Facebook User ID using online tools.

4 Save Your Changes

  1. Once you have edited the necessary values, click the Save icon () at the top right corner of the HTML Editor.
  2. Blogger will display a message indicating that the theme has been saved.
  3. You can now close the HTML Editor and view your blog to ensure the changes are reflected (though meta tags are not directly visible on the page, search engines and social media will use them).

Important Notes

  • Be careful when editing HTML. Incorrect modifications can break your blog's layout or functionality. If you are unsure about any changes, it's best to leave them as they are or consult a professional.
  • Back up your theme before making changes. Before editing the HTML, you can download a backup of your current theme in the "Theme" section (click the dropdown next to "Customize" and select "Backup"). This allows you to restore your blog if something goes wrong.
  • Changes may not be immediately visible. It might take some time for search engines and social media platforms to recrawl your blog and recognize the updated meta tag information.

How to Add a Header Image

Your theme includes a dedicated Header Image section at the top of your blog. Follow these simple steps to add or update your header image using the built-in Image gadget.

1 Access the Header Image Settings

  1. Log in to Blogger.com and select your blog.
  2. From the left sidebar, click Layout.
  3. Locate the Header Image section in your layout.
    This contains a pre-configured Image gadget (named 'Header Image') that is locked to maintain your theme's design.
  4. Click Edit on the Header Image gadget to open settings.

2 Configure Your Header Image

The image configuration popup contains these options:

Image

  • Upload an image from your computer
  • Or paste an image URL if hosted elsewhere.

Image Link (Optional)

Make your header clickable by entering a destination URL.

Caption (Optional)

This text will appear as your header image title.

Image Recommendations:
  • Ideal width: 1200px or wider (for high-resolution displays).
  • Height: Adjust according to your design needs.
  • File type: JPG or PNG with optimized compression.
  • File size: Under 500KB for faster loading.

3 Save and Publish

  1. Click on the Save of the Image gadget popup.
  2. Click on the Save button of the Layout page.
  3. View your blog to see the changes.

Troubleshooting Tips

  • Image not appearing? Check if you clicked both Save buttons.
  • Image looks distorted? Try using a different aspect ratio.
  • Slow loading? Compress images before uploading (aim for under 500KB)
  • Changes not visible? Clear your browser cache (Ctrl+F5)

How to Set Up the Primary Menu

Your Blogger theme includes a Primary Menu powered by a built-in "Link List" gadget. This lets you create dropdowns and multi-level navigation without writing any code — just by editing items in the Layout section.

Step 1: Go to the Layout Page

  1. Log in to Blogger.com and select your blog.
  2. From the left sidebar, click Layout.
  3. Locate the Primary Menu section in your layout.
    This contains a pre-configured LinkList gadget (named 'Primary Menu') that is locked to maintain your theme's design.
  4. Click Edit on the Primary Menu gadget to open settings.

Step 2: Add or Edit Menu Items

You'll now see a screen titled Configure Link List. This is where you manage your navigation.

  • Click Add a New Item to insert a new link.
  • In the Site name field, type the name of the menu item.
  • In the Site URL field, add the link (or use # as a placeholder).
  • Use the / arrows to reorder items.
  • Click Save when you're done.

Step 3: Create Dropdown Menus Using Hyphens

The Primary Menu supports up to 10 levels of nested dropdowns using hyphens. You control the structure by adding hyphens (-) in front of the "Site name":

Menu Type What to Enter in "Site name" Field
Top-Level Menu Item Business
First-Level Submenu - Internet
Second-Level Submenu -- Sub Child Category 1

No hyphen : Top-level menu item.
One hyphen (-) : First-level submenu
Two hyphens (--) : Second-level submenu (nested under first-level)
And so on...

Example Menu Structure

Home
Business
- Internet
- Market
- Stock
Downloads
- DVD
- Games
- Software
-- Office
Parent Category
- Child Category 1
-- Sub Child Category 1
-- Sub Child Category 2
-- Sub Child Category 3
- Child Category 2
- Child Category 3
Featured
Health
- Childcare
- Doctors
Uncategorized

This is how your Link List gadget should look when you configure it for the above menu structure:

ListMode Primary Menu Link List Structure

Extra Tips

  • Use # for items without a final link.
  • Keep the Sorting option set to Don't sort.
  • Don't change the widget title – it should stay Primary Menu.
  • The theme script will automatically build dropdowns based on the hyphen structure.

Step 4: Save and View

  1. Click Save in the widget popup.
  2. Reload your blog homepage.
  3. Hover over menu items like Business or Parent Category to see dropdowns.

That's it! You've successfully created a structured primary menu for your blog using the Layout page.

How to Set Up the Secondary Menu

Your Blogger theme includes a Secondary Menu that appears above the header of your site. Like the Primary Menu, it uses a "Link List" gadget with a similar hyphen-based structure for creating dropdown menus.

Step 1: Access the Secondary Menu Settings

  1. Log in to Blogger.com and select your blog.
  2. From the left sidebar, click Layout.
  3. Locate the Secondary Menu section in your layout.
    This contains a pre-configured LinkList gadget (named 'Secondary Menu') that is locked to maintain your theme's design.
  4. Click Edit on the Secondary Menu gadget to open settings.

Step 2: Add or Edit Menu Items

You'll now see a screen titled Configure Link List. This is where you manage your navigation.

  • Click Add a New Item to insert a new link.
  • In the Site name field, type the name of the menu item.
  • In the Site URL field, add the link (or use # as a placeholder).
  • Use the / arrows to reorder items.
  • Click Save when you're done.

Step 3: Create Dropdown Menus Using Hyphens

The Secondary Menu supports up to 10 levels of nested dropdowns using hyphens. You control the structure by adding hyphens (-) in front of the "Site name":

Menu Type What to Enter in "Site name" Field
Top-Level Menu Item Business
First-Level Submenu - Internet
Second-Level Submenu -- Sub Child Category 1

No hyphen : Top-level menu item.
One hyphen (-) : First-level submenu
Two hyphens (--) : Second-level submenu (nested under first-level)
And so on...

Example Menu Structure

Home
Business
- Internet
- Market
- Stock
Downloads
- DVD
- Games
- Software
-- Office
Parent Category
- Child Category 1
-- Sub Child Category 1
- Child Category 2
- Child Category 3
Featured
Depth
- Level 01
-- Level 02
--- Level 03
---- Level 04
----- Level 05
------ Level 06
------- Level 07
-------- Level 08
--------- Level 09
---------- Level 10
Health
- Childcare
- Doctors
Uncategorized

This is how your Link List gadget should look when you configure it for the above menu structure:

ListMode Secondary Menu Link List Structure

Extra Tips

  • Use # for items without a final link.
  • Keep the Sorting option set to Don't sort.
  • Don't change the widget title – it should stay Secondary Menu.
  • The theme script will automatically build dropdowns based on the hyphen structure.

Step 4: Save and View

  1. Click Save in the widget popup.
  2. Reload your blog homepage.
  3. Hover over menu items like Business or Parent Category to see dropdowns.

That's it! You've successfully created a structured Secondary menu for your blog using the Layout page.

How to Add a News Ticker

Quick Start Guide

If you're using the Listmode Blogger theme, you can easily add multiple news tickers to different sections of your website using the code provided below. You can insert the news ticker code using any of the following methods:

  1. Use an "HTML/JavaScript" gadget by going to the Blogger Dashboard → Layout.
  2. Use the "HTML view" of the post editor by editing any post or page.
  3. Add it directly into the theme by going to Blogger Dashboard → Theme → "Edit HTML".

To display the news ticker in the theme's default location, follow these steps:

  1. Go to your Blogger Dashboard → Layout.
  2. Click the edit icon of the "News Ticker" HTML/JavaScript gadget.
  3. Add the code snippet given below.
  4. Customize the data-* attributes as needed.

5.1. News Ticker Code

<div class="listmode-news-ticker-widget"
    data-heading="Breaking News"
    data-url="https://listmode-nbt.blogspot.com"
    data-featured-label="Sports" 
    data-max-results="5"
    data-title-length="0"
    data-show-dates="true"
    data-date-type="published"
    data-date-format="Y-m-d"
    data-orderby="published"
    data-order="desc"
    data-pause-on-hover="true"
    data-duration="60000"
    data-open-in-new-tab="false"
    data-add-nofollow="false"
    data-display-locations="home"
    data-display-location-url=""
    data-custom-colors="false"
    data-main-background-color="#b8b8b8"
    data-heading-text-color="#ffffff"
    data-heading-background-color="#409bd4"
    data-title-text-color="#000000"
    data-title-hover-text-color="#555555"
    data-date-text-color="#ffffff"
    data-date-background-color="#222222">
</div>

The class="listmode-news-ticker-widget" is the required CSS class that tells the news ticker script to initialize. The ticker will not function without this class, so make sure it's included in your HTML.

5.2. News Ticker Settings

This news ticker supports a total of 24 settings, which are controlled via data-* attributes within the ticker code. Below is a complete list of all 24 data attributes, along with their expected value types and default values.

Note: Some attributes are boolean (true/false), while others accept text or numeric values. If an attribute is missing or contains an invalid value, the default value will be used automatically.

Feel free to omit any data attributes you don't need. The news ticker will fall back to defaults.

5.2.1. Blog Settings

Attribute Description Accepted Values Default
data-url Blogspot URL or custom domain of a Blogger site.
(Uses to build the feed URL)		 Examples:
https://yourblog.blogspot.com
https://yourcustomdomain.com		 Your current Blogger site URL
data-featured-label A label name to filter posts.
(Only posts with this label will be displayed).

If the label name is empty or if this data attribute is not present, posts from all labels will be displayed.		 Examples:
Sports, Web Design		 Empty
data-max-results Number of posts to fetch. Examples: 5, 10, 20 5

5.2.2. Content Settings

Attribute Description Accepted Values Default
data-heading The heading text displayed at the beginning of the ticker. Any text Breaking News

5.2.3. Post Title Settings

Attribute Description Accepted Values Default
data-title-length Maximum character limit for the post title. (0 = no limit) Examples: 0, 50 0

5.2.4. Post Meta Settings

Attribute Description Accepted Values Default
data-show-dates Show or hide post dates. true / false true
data-date-type Which date to display: published or updated? published / updated published
data-date-format Date format of published or updated date. Check available date formats Y-m-d

5.2.5. Ordering Settings

Attribute Description Accepted Values Default
data-orderby Sort posts by published or updated date. published / updated published
data-order Sort posts in ASC (oldest first) or DESC (newest first) order. asc / desc desc

5.2.6. Behavior Settings

Attribute Description Accepted Values Default
data-pause-on-hover Pause the ticker when hovered. true / false true
data-duration Duration of each ticker item display (in milliseconds). Examples: 5000, 10000 60000

5.2.7. SEO & Link Settings

Attribute Description Accepted Values Default
data-open-in-new-tab Open post links in a new browser tab? true / false false
data-add-nofollow Add rel="nofollow" to post links? true / false false

5.2.8. Visibility Settings

Attribute Description Accepted Values Default
data-display-locations Where the ticker is displayed.
Use a single value or a comma-separated list (e.g. home,post).

If the data-display-locations attribute contains custom—either alone or with other comma separated values—you must also specify a custom URL using the data-display-location-url attribute.		 Examples:
home
post,page
home,post
home,archive,label
custom
Check available display locations		 home
data-display-location-url If you use custom as a data-display-locations value, specify the relative or absolute URL where the ticker should appear. Example:
https://yourblog.blogspot.com/p/about.html
/p/about.html
/2024/12/awesome-blog-post-with-everything-with.html		 Empty string

5.2.9. Color Settings

If you want to use your own color scheme, set data-custom-colors="true" and add these attributes:

Attribute Description Accepted Values Default
data-custom-colors Enable custom color overrides? true / false false
data-main-background-color Background color of the ticker area. Hex code (e.g. #b8b8b8) #b8b8b8
data-heading-text-color Text color for the ticker heading. Hex code (e.g. #ffffff) #ffffff
data-heading-background-color Background color for the ticker heading. Hex code (e.g. #409bd4) #409bd4
data-title-text-color Text color for post titles. Hex code (e.g. #000000) #000000
data-title-hover-text-color Hover text color for post titles. Hex code (e.g. #555555) #555555
data-date-text-color Text color for post dates. Hex code (e.g. #ffffff) #ffffff
data-date-background-color Background color for post dates. Hex code (e.g. #222222) #222222

How to Add a Slider

Quick Start Guide

If you're using the Listmode Blogger theme, you can easily add multiple sliders to different sections of your website using the code provided below. You can insert the slider code using any of the following methods:

  1. Use an "HTML/JavaScript" gadget by going to the Blogger Dashboard → Layout.
  2. Use the "HTML view" of the post editor by editing any post or page.
  3. Add it directly into the theme by going to Blogger Dashboard → Theme → "Edit HTML".

To display the slider in the theme's default location (below the website's header), follow these steps:

  1. Go to your Blogger Dashboard → Layout.
  2. Click the edit icon of the "Slider" HTML/JavaScript gadget.
  3. Add the code snippet given below.
  4. Customize the data-* attributes as needed.

6.1. Slider Code

Slider - ListMode Blogger Template 
<div class="listmode-slider-widget" 
    data-url="https://listmode-nbt.blogspot.com" 
    data-featured-label="Sports" 
    data-max-results="10"
    data-show-thumbnails="true"
    data-float-thumbnails="true"
    data-round-thumbnails="false"
    data-thumbnail-width="100"
    data-thumbnail-height="100"
    data-thumbnail-link="true"
    data-show-titles="true"
    data-title-link="true"
    data-title-length="0"
    data-show-authors="true"
    data-author-link="true"
    data-show-dates="true"
    data-date-type="published"
    data-date-format="Y-m-d"
    data-show-comments="false"
    data-comment-link="true"
    data-show-labels="true"
    data-label-link="true"
    data-show-snippets="true"
    data-snippet-length="180"
    data-orderby="published"
    data-order="desc"
    data-autoplay="true"
    data-loop="true"
    data-dots="false"
    data-nav="true"
    data-auto-height="false"
    data-mouse-drag="true"
    data-touch-drag="true"
    data-autoplay-hover-pause="true"
    data-margin="15"
    data-dots-speed="100"
    data-nav-speed="100"
    data-autoplay-timeout="3000"
    data-autoplay-speed="200"
    data-slider-breakpoints="0:1, 320:1, 412:1, 680:2, 890:3, 1024:3, 1113:3, 1277:3"
    data-open-in-new-tab="false"
    data-add-nofollow="false"
    data-display-locations="home"
    data-display-location-url=""
    data-custom-colors="false"
    data-main-background-color="#f5f5f5"
    data-main-border-color="#dddddd"
    data-title-text-color="#000000"
    data-title-hover-text-color="#222222"
    data-meta-text-color="#555555"
    data-meta-link-color="#ff9800"
    data-meta-link-hover-color="#000000"
    data-label-text-color="#555555"
    data-label-link-color="#666666"
    data-label-link-hover-color="#000000"
    data-snippet-text-color="#444444"
    data-nav-text-color="#ffffff"
    data-nav-background-color="#000000"
    data-nav-border-color="#555555"
    data-nav-hover-text-color="#ffffff"
    data-nav-hover-background-color="#257abd"
    data-nav-hover-border-color="#000000"
    data-dots-background-color="#aaaaaa"
    data-dots-hover-background-color="#257abd">
</div>

The class="listmode-slider-widget" is the required CSS class that tells the slider script to initialize. The slider will not function without this class, so make sure it's included in your HTML.

6.2. Slider Settings

This slider supports a total of 63 settings, which are controlled via data-* attributes within the slider code. Below is a complete list of all 63 data attributes, along with their expected value types and default values.

Note: Some attributes are boolean (true/false), while others accept text or numeric values. If an attribute is missing or contains an invalid value, the default value will be used automatically.

Feel free to omit any data attributes you don't need. The slider will fall back to defaults.

6.2.1. Blog Settings

Attribute Description Accepted Values Default
data-url Blogspot URL or custom domain of a Blogger site.
(Uses to build the feed URL)		 Examples:
https://yourblog.blogspot.com
https://yourcustomdomain.com		 Your current Blogger site URL
data-featured-label A label name to filter posts.
(Only posts with this label will be displayed).

If the label name is empty or if this data attribute is not present, posts from all labels will be displayed.		 Examples:
Sports, Web Design		 Empty
data-max-results Number of posts to fetch. Examples: 5, 10, 20 10

6.2.2. Thumbnail & Image Settings

Attribute Description Accepted Values Default
data-show-thumbnails Show or hide post thumbnails. true / false true
data-float-thumbnails Float thumbnails with text wrapping. true / false true
data-round-thumbnails Make thumbnails circular. true / false false
data-thumbnail-width Width of thumbnail (px). Examples: 100, 150 100
data-thumbnail-height Height of thumbnail (px). Examples: 100, 150 100
data-thumbnail-link Make thumbnail clickable to the post. true / false true

6.2.3. Post Title Settings

Attribute Description Accepted Values Default
data-show-titles Show or hide post titles. true / false true
data-title-link Make post title clickable. true / false true
data-title-length Maximum character limit for the post title. (0 = no limit) Examples: 0, 50 0

6.2.4. Post Meta Settings

Attribute Description Accepted Values Default
data-show-authors Show or hide author names. true / false true
data-author-link Make author name clickable. true / false true
data-show-dates Show or hide date. true / false true
data-date-type Which date to display: published or updated? published / updated published
data-date-format Date format of published or updated date. Check available date formats Y-m-d
data-show-comments Show or hide comment count. true / false false
data-comment-link Make comment count clickable. true / false true
data-show-labels Show or hide post labels. true / false true
data-label-link Make labels clickable. true / false true

6.2.5. Post Snippet Settings

Attribute Description Accepted Values Default
data-show-snippets Show or hide post snippet. true / false true
data-snippet-length Maximum character limit for the snippet text. Examples: 100, 180 180

6.2.6. Post Ordering Settings

Attribute Description Accepted Values Default
data-orderby Sort posts by published or updated date. published / updated published
data-order Sort posts in ASC (oldest first) or DESC (newest first) order. asc / desc desc

6.2.7. Slider Behavior Settings

Attribute Description Accepted Values Default
data-autoplay Enable auto-sliding. true / false true
data-loop Loop the slides continuously. true / false true
data-dots Show dot navigation. true / false false
data-nav Show next/prev arrows. true / false true
data-auto-height Adjust height automatically per slide. true / false false
data-mouse-drag Enable mouse drag on desktop. true / false true
data-touch-drag Enable touch drag on mobile. true / false true
data-autoplay-hover-pause Pause autoplay on hover. true / false true
data-margin Space between slides.
(enter number only, in pixels)		 Examples: 15, 20 15
data-dots-speed Transition speed for dots.
(enter number only, in milliseconds)		 Examples: 100, 300 100
data-nav-speed Transition speed for arrow nav.
(enter number only, in milliseconds)		 Examples: 100, 300 100
data-autoplay-timeout Delay between slides for autoplay.
(enter number only, in milliseconds)		 Examples: 3000, 5000 3000
data-autoplay-speed Animation speed of slides in autoplay.
(enter number only, in milliseconds)		 Examples: 200, 500 200
data-slider-breakpoints Responsive breakpoints.
(Format: width:items pairs, comma-separated)		 Example:
0:1, 680:2, 1024:3		 0:1, 320:1, 412:1, 680:2, 890:3, 1024:3, 1113:3, 1277:3

6.2.8. SEO & Link Settings

Attribute Description Accepted Values Default
data-open-in-new-tab Open post links in a new browser tab? true / false false
data-add-nofollow Add rel="nofollow" to post links? true / false false

6.2.9. Visibility Settings

Attribute Description Accepted Values Default
data-display-locations Where the slider is displayed.
Use a single value or a comma-separated list (e.g. home,post).

If the data-display-locations attribute contains custom—either alone or with other comma separated values—you must also specify a custom URL using the data-display-location-url attribute.		 Examples:
home
post,page
home,post
home,archive,label
custom
Check available display locations		 home
data-display-location-url If you use custom as a data-display-locations value, specify the relative or absolute URL where the slider should appear. Example:
https://yourblog.blogspot.com/p/about.html
/p/about.html
/2024/12/awesome-blog-post-with-everything-with.html		 Empty string

6.2.10. Color Settings

If you want to use your own color scheme, set data-custom-colors="true" and add these attributes:

Attribute Description Accepted Values Default
data-custom-colors Enable custom color overrides? true / false false
data-main-background-color Background color of the slider area. Hex code (e.g. #f5f5f5) #f5f5f5
data-main-border-color Border color of the slider area. Hex code (e.g. #dddddd) #dddddd
data-title-text-color Text/link color for post titles. Hex code (e.g. #000000) #000000
data-title-hover-text-color Hover link color for post titles. Hex code (e.g. #222222) #222222
data-meta-text-color Text color for meta elements. Hex code (e.g. #555555) #555555
data-meta-link-color Link color for meta elements. Hex code (e.g. #ff9800) #ff9800
data-meta-link-hover-color Hover link color for meta elements. Hex code (e.g. #000000) #000000
data-label-text-color Text color for post labels. Hex code (e.g. #555555) #555555
data-label-link-color Link color for post labels. Hex code (e.g. #666666) #666666
data-label-link-hover-color Hover link color for post labels. Hex code (e.g. #000000) #000000
data-snippet-text-color Text color for post snippet. Hex code (e.g. #444444) #444444
data-nav-text-color Text color for nav arrows. Hex code (e.g. #ffffff) #ffffff
data-nav-background-color Background color for nav arrows. Hex code (e.g. #000000) #000000
data-nav-border-color Border color for nav arrows. Hex code (e.g. #555555) #555555
data-nav-hover-text-color Hover text color for nav arrows. Hex code (e.g. #ffffff) #ffffff
data-nav-hover-background-color Hover background for nav arrows. Hex code (e.g. #257abd) #257abd
data-nav-hover-border-color Hover border color for nav arrows. Hex code (e.g. #000000) #000000
data-dots-background-color Text color navigation dots. Hex code (e.g. #aaaaaa) #aaaaaa
data-dots-hover-background-color Hover text color for navigation dots. Hex code (e.g. #257abd) #257abd

How to Add Social Buttons

Your Blogger theme includes a built-in Social Buttons section powered by a "Link List" gadget. This allows you to add icons for your social media profiles, email, and more — directly from the Layout page, without touching any code.

Step 1: Go to the Layout Page

  1. Log in to Blogger.com and select your blog.
  2. From the left sidebar, click Layout.
  3. Locate the Social Buttons section in your layout.
    This contains a pre-configured LinkList gadget (named 'Social Buttons') that is locked to maintain your theme's design.
  4. Click Edit on the Social Buttons gadget to open settings.

Step 2: Add Your Social Links

You'll now see a screen titled Configure Link List. This is where you can add or update your social profiles.

  • Click Add a New Item to add a new social button.
  • In the Site name field, enter the name of the platform (e.g. Facebook, Twitter, Email).
  • In the Site URL field, add the corresponding link. Use mailto:your@email.com for email buttons.
  • Use the / arrows to reorder the items.
  • Click Save when you're done.

Step 3: Icon Mapping Guide

The theme uses Font Awesome icons to display your social media buttons. The icon is automatically detected based on the Site name you provide. Below are a few examples:

Site Name Example URL Displayed Icon
Facebook https://facebook.com/yourname
Twitter https://twitter.com/yourname
X https://x.com/yourname
Threads https://threads.com/yourname
Pinterest https://pinterest.com/yourname
Linkedin https://linkedin.com/in/yourname/yourname
Instagram https://instagram.com/yourname
Flickr https://flickr.com/yourname
Youtube https://youtube.com/yourname
Vimeo https://vimeo.com/yourname
Soundcloud https://soundcloud.com/yourname
Messenger https://messenger.com/yourname
Whatsapp https://whatsapp.com/yourname
Tiktok https://tiktok.com/yourname
Lastfm https://lastfm.com/yourname
Medium https://medium.com/yourname
Github https://github.com/yourname
Bitbucket https://bitbucket.com/yourname
Tumblr https://tumblr.com/yourname
Digg https://digg.com/yourname
Delicious https://delicious.com/yourname
Stumbleupon https://stumbleupon.com/yourname
Mix https://mix.com/yourname
Reddit https://reddit.com/yourname
Dribbble https://dribbble.com/yourname
Flipboard https://flipboard.com/yourname
Blogger https://blogger.com/yourname
Etsy https://etsy.com/yourname
Behance https://behance.com/yourname
Amazon https://amazon.com/yourname
Meetup https://meetup.com/yourname
Mixcloud https://mixcloud.com/yourname
Slack https://slack.com/yourname
Snapchat https://snapchat.com/yourname
Spotify https://spotify.com/yourname
Yelp https://yelp.com/yourname
Wordpress https://wordpress.com/yourname
Twitch https://twitch.com/yourname
Telegram https://telegram.com/yourname
Bandcamp https://bandcamp.com/yourname
Quora https://quora.com/yourname
Foursquare https://foursquare.com/yourname
Deviantart https://deviantart.com/yourname
Imdb https://imdb.com/yourname
Vk https://vk.com/yourname
Codepen https://codepen.com/yourname
Jsfiddle https://jsfiddle.com/yourname
Stackoverflow https://stackoverflow.com/yourname
Stackexchange https://stackexchange.com/yourname
Buysellads https://buysellads.com/yourname
500px https://500px.com/yourname
Ello https://ello.com/yourname
Discord https://discord.com/yourname
Goodreads https://goodreads.com/yourname
Odnoklassniki https://odnoklassniki.com/yourname
Houzz https://houzz.com/yourname
Pocket https://pocket.com/yourname
Xing https://xing.com/yourname
Mastodon https://mastodon.com/yourname
Googleplay https://googleplay.com/yourname
Slideshare https://slideshare.com/yourname
Dropbox https://dropbox.com/yourname
Paypal https://paypal.com/yourname
Viadeo https://viadeo.com/yourname
Wikipedia https://wikipedia.com/yourname
Skype skype:yourname?chat
Email mailto:you@example.com

Notes:

  • The icon will automatically be selected based on the "Site name". Use standard names like Facebook, X, Instagram, etc.
  • If the platform isn't recognized, a generic globe icon () will be shown.
  • Email buttons will use an envelope icon.

Step 4: View the Buttons

  1. After saving the gadget, reload your blog homepage.
  2. Your social icons will appear on the right side of the site's header.

That’s it! You’ve successfully added social buttons to your blog using the Link List gadget — with icons generated automatically based on platform names.

Date Formats

The table below lists the available date format values for the data-date-format attribute.

Format KeyExample Output
H:i00:50
g:i a12:50 am
g:i A12:50 AM
g:i:s a12:50:48 am
g:i:s A12:50:48 AM
d.m.y27.11.10
Y.m.d2010.11.27
Y-m-d2010-11-27
Y/m/d2010/11/27
m.d.Y11.27.2010
m-d-Y11-27-2010
m/d/Y11/27/2010
d.m.Y27.11.2010
d-m-Y27-11-2010
d/m/Y27/11/2010
relative_14 years 8 months 2 days ago
m/d/Y g:i:s a11/27/2010 12:50:48 am
m/d/Y g:i:s A11/27/2010 12:50:48 AM
Y/m/d \a\t g:i a2010/11/27 at 12:50 am
Y/m/d \a\t g:i A2010/11/27 at 12:50 AM
d F27 November
F, YNovember, 2010
F j, YNovember 27, 2010
d M Y27 Nov 2010
M j, YNov 27, 2010
M j, Y @ H:iNov 27, 2010 @ 0:50
l, F j, YSaturday, November 27, 2010
l, F jS, YSaturday, November 27th, 2010

Display Locations

The table below lists the available display location values for the data-display-locations attribute. You can use a single value or a comma-separated list (e.g. home,post).

Value Slider Visibility Example URL
home In homepage of the blog. https://yourblog.blogspot.com/
archive In archive pages showing posts by date. https://yourblog.blogspot.com/2024_12_01_archive.html
https://yourblog.blogspot.com/2024/12/
https://yourblog.blogspot.com/2024/
label In label search pages. https://yourblog.blogspot.com/search/label/Sports
search In search results pages (excluding label searches). https://yourblog.blogspot.com/search?q=woodworking
https://yourblog.blogspot.com/search?updated-max=2024-12-14T17:18:00-07:00&max-results=6
post In individual blog post pages. https://yourblog.blogspot.com/2024/12/how-to-make-tea.html
static_page In standalone static pages. https://yourblog.blogspot.com/p/about-us.html
https://yourblog.blogspot.com/p/contact.html
error_page In 404 error pages. https://yourblog.blogspot.com/404
all In everywhere of the blog. -
custom In a custom location defined using the data-display-location-url attribute. -
↑