Configuring Features in Materia X2 Theme

Features configuration in the Materia X2 theme.
Yasya El Hakim

Configuring Features in Materia X2 Theme

The Materia X2 theme has several built-in features that can be easily customized. Basically, those features are anything that includes functionality in the theme.

jQuery Script

This feature is useful for enabling or disabling jQuery scripts and very useful if you want to use Custom Scripts or Additional Scripts that require jQuery. Here are some steps to set up and their explanation:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named jQuery Script (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - jQuery Script will be disabled.
    • 2px: Enable - jQuery Script will be enabled and will be placed in the Bottom of Body.
  6. Click the Save button (diskette icon) in the lower right corner.

Next, if you want to add a jQuery script, please enter it in the provided Widget. Follow these instructions:

  1. Go to Blogger Dashboard.
  2. Select the Layout menu.
  3. Look for the section titled Theme Panel Bottom.
  4. Click the edit button (pencil icon) on the Custom jQuery Script (HTML/JavaScript Gadget).
  5. A HTML Configuration Popup will appear.
  6. You can skip the Title input.
  7. Enter your jQuery code into the content input.
  8. Click the SAVE button at the bottom.

jQuery script loading uses Asynchronous, each operation starts only after the previous operation is completed.

Progress Bar

This feature is useful for displaying the Progress Bar as a indicator that the page has been fully loaded or not. Here are some steps to set it up and an explanation:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Progress Bar (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Progress Bar will be disabled.
    • 2px: Enable - Progress Bar will be enabled.
  6. Click the Save button (diskette icon) in the lower right corner.

Progress Bar Style

This feature is useful for changing the style of the Progress Bar. Here are some steps to set it up and an explanation:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Progress Bar Style (Default | Indeterminate), drag the slider right or left. Here is the explanation:
    • 1px: Default - Progress Bar with Default style.
    • 2px: Indeterminate - Progress Bar with Indeterminate style.
  6. Click the Save button (diskette icon) in the lower right corner.
This setting is only useful if you have set the Progress Bar feature to 2px (Enable).

Lazy Loading AdSense

This setting is useful for delaying the loading of the AdSense script which of course will affect the speed or performance of the page.  Here are some steps to customize it:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Lazy Loading AdSense (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Lazy Loading AdSense will be disabled.
    • 2px: Enable - Lazy Loading AdSense will be enabled.
  6. Click the Save button (diskette icon) in the lower right corner.

One of the advantages of this feature is that it speeds up page loading. We don't know exactly how this feature will impact your AdSense earnings. So, it all depends on your wishes.

AdSense Ad Code Installation Guide

If you want to place AdSense ads using the script provided by Google AdSense. Make sure you don't include tags into your HTML/JavaScript widget. Here is an example:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxx"
     crossorigin="anonymous"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxx"
     data-ad-slot="xxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Copy and paste only the following code:

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxx"
     data-ad-slot="xxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

It is highly recommended to install the AdSense ad code through the AdSense Widget provided by Blogger.

Color Mode

This setting is useful for enabling or disabling the Color Mode (Dark/Light Mode) Features on Materia X2 Theme. Here are some steps to customize it:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Color Mode (Disable | Single State | Multiple State), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Color Mode will be disabled.
    • 2px: Single State - Color Mode will be enabled and only have single state (Dark and Light Toggle).
    • 3px: Multiple State - Color Mode will be enabled and will have multiple state (Dark, Light and System Mode).
  6. Click the Save button (diskette icon) in the lower right corner.

If you set the Color Mode feature to 3px (Multiple State), then the colors and dropdown options will follow the More Menu settings.

Ripple Effect

This setting is useful for enabling or disabling the Material Design Ripple effect on some elements. Here are some steps to customize it:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Ripple Effect (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Ripple Effect will be disabled.
    • 2px: Enable - Ripple Effect will be enabled.
  6. Click the Save button (diskette icon) in the lower right corner.

Custom Search Engine

This feature is useful for enabling or disabling Google Custom Search Engine (CSE) for the search bar. Here are some steps to set it up and an explanation:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Custom Search Engine (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Custom Search Engine will be disabled.
    • 2px: Enable - Custom Search Engine will be enabled.
  6. Click the Save button (diskette icon) in the lower right corner.

Next, you need to create a Custom Search Engine. Follow these steps:

  1. Go to the Google Custom Search Engine page.
  2. Click Add Button.
  3. In the Name your search engine input, enter the name of your Search Engine.
  4. In the What to search? option, choose between Search specific sites or pages or Search the entire web. It is recommended to use Search specific sites or pages.
  5. If you select Search specific sites or pages, an input URL will appear. Enter your Blog URL. If so, click the Add button.
  6. In the Search settings option, you can enable or disable Image search and SafeSearch.
  7. When everything is set, click the Create button.
  8. On the next screen, you will get a CSE code. Here is an example:
    <script async src="https://cse.google.com/cse.js?cx=b173877412988434b"></script>
    <div class="gcse-search"></div>

    In the code above, you only need to copy the id, namely: b1738774412988434b.

  9. Click the Customize Button.
  10. On the left side panel, select Look And Feel.
  11. Here, we recommend selecting Result Only Layout.
  12. Once selected, click the Save button.

Finally, you need to set the ID of the Search Engine you created and paste it into the settings. Follow these steps:

  1. Go to Blogger Dashboard.
  2. Select the Layout menu.
  3. Look for the section titled Theme Panel Top.
  4. Click the edit button (pencil icon) on the JavaScript Variables (Link List Gadget).
  5. A Link List Configuration Popup will appear.
  6. You can skip the Title and Number of items to show in list input.
  7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
  8. Click the ADD A NEW ITEM button.
  9. Here are a few things that can be set:
    • In the Site name input, type cseID.
    • In the Site URL input, enter your Custom Search Engine ID which you have copied before. Example: b1738774412988434b.
    • If both inputs are set, click the SAVE button next to them.
  10. If you want to finish the configuration, click the SAVE button at the bottom.

Ajax Search

This setting is useful for enabling or disabling the Ajax Search. Here are some steps to customize it:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Ajax Search (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1pxDisable - Ajax Search will be disabled.
    • 2pxEnable - Ajax Search will be enabled.
  6. Click the Save button (diskette icon) in the lower right corner.
Attention:
  • This setting is only available on Materia X2 version 3.0 and above.
  • This setting only works on Home, Post and Static pages.

Navigation Drawer Sub-Menu

This feature is useful for enabling Multi Level Sub-Menu on Navigation Drawer Menu. Here are some steps to set it up and an explanation:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Navigation Drawer Sub-Menu (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Navigation Drawer Sub-Menu will be disabled.
    • 2px: Enable - Navigation Drawer Sub-Menu will be enabled.
  6. Click the Save button (diskette icon) in the lower right corner.

After that, you can create and manage Sub-Menu. Follow these steps:

  1. Go to Blogger Dashboard.
  2. Select the Layout menu.
  3. Look for the section titled Navigation Drawer and More Menu.
  4. Click the edit button (pencil icon) on the Navigation Drawer Menu (Link List Gadget).
  5. A Link List Configuration Popup will appear.
  6. You can skip the Title and Number of items to show in list input.
  7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
  8. You can edit an existing Menu Item by clicking the Edit button (Pencil Icon) or create a new menu item by clicking the ADD A NEW ITEM button. Here are some steps to set it up:
  9. Here are a few things that can be set:
    • To create a second Sub-Menu, you can enter one Underscore character "_" in the Site name input before the Name of the menu. Example: _Your Menu.
    • In the Site URL input, enter your menu URL URL.
    • If all inputs are set, click the SAVE button next to them.

    The menu structure could look like this:

    Menu 1
    _Menu 1.1
    _Menu 1.2
    _Menu 1.3
    Menu 2
    _Menu 2.1
    _Menu 2.2
    Menu 3
    _Menu 3.1
Information:
  • Make sure the Menu that has an Underscore character is at the bottom of the menu where there is no Underscore character.
  • The sub menu will automatically have an arrow icon.
  • You can also add Icons to the Sub-Menu. Please check Adding Icons to Menu Items documentation.
  • Sub Menu can only be up to level 2.

Pagination Type

This setting is useful for changing the pagination type. You can choose between Next or Previous, Load More, Infinite Scroll or Numbered. Here are some steps to set up and their explanations:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Pagination Type (Next-Prev | Load More | Infinite Scroll | Numbered), drag the slider right or left. Here is the explanation:
    • 1px: Next/Previous - Pagination with Previous and Next buttons.
    • 2px: Load More - Pagination with Load More button.
    • 3px: Infinite Scroll - Pagination will automatically load when scrolled.
    • 4px: Numbered - Pagination by number.
  6. Click the Save button (diskette icon) in the lower right corner.

Native Sharer

Native Sharer is useful for calling the native sharing mechanism of each different device to share data such as text, URLs or files. The available sharing targets depend on the device, but may include clipboard, contacts and email apps, websites, bluetooth, etc. If you want to use it, then follow these steps:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Native Sharer (Disable | Standalone | Combined), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Native Sharer will be disabled.
    • 2px: Standalone - Native Sharer will be enabled and will be standalone (All social share link will be removed).
    • 3px: Combined - Native Sharer will be enabled and will be combined with default social share link.
  6. Click the Save button (diskette icon) in the lower right corner.

For now, Native Share only supports some browsers. Among others, Desktop: Google Chrome 99+, Microsoft Edge 96+ and Apple Safari 12.1+. Mobile: Google Chrome 96+, Mozilla Firefox 94+, Apple Safari 12.2.12.5+.

Post Image Zoom Lightbox

This setting is useful for enabling or disabling post Image Lightbox or Image Zooming when clicked. Here are some steps to set up and their explanations:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Post Image Zoom Lightbox (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Post Image Zoom will be disabled.
    • 2px: Enable - Post Image Zoom will be enabled.
  6. Click the Save button (diskette icon) in the lower right corner.

Post Table of Contents

This setting is useful for enabling or disabling the Table of Contents which will be created automatically in the Pop-Up Dialog (Modal).

If enabled, the Table of Contents button on the Floating Action Button (FAB) will appear. Here are some steps to set up and their explanation:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Post Table of Contents (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Post Table of Contents will be disabled.
    • 2px: Enable - Post Table of Contents will be enabled.
  6. Click the Save button (diskette icon) in the lower right corner.
Table of Contents will only be created automatically if your post has heading tags (H2, H3, H4, H5 and H6).
If you set the Table of Contents feature to 2px (Enable) and Post Split to Post Split (Enable), then this feature cannot be used because it will conflict with the feature.

Adding Automatic Table of Contents into Posts

You can also insert a Table of Content that will be created automatically into the post.

Previously, you had to set a title for the Table of Contents. Here are some steps to set up and their explanation:

  1. Go to Blogger Dashboard.
  2. Select the Layout menu.
  3. Look for the section titled Theme Panel Top.
  4. Click the edit button (pencil icon) on the CSS Options (Link List Gadget).
  5. A Link List Configuration Popup will appear.
  6. You can skip the Title and Number of items to show in list input or leave it blank.
  7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
  8. Click the ADD A NEW ITEM button.
  9. Here are a few things that can be set:
    • In the Site name input, type tocTitle.
    • In the Site URL input, enter the title of the Table of Content you want.. Example: Table of Contents.
    • If both inputs are set, click the SAVE button next to them.
  10. If you want to finish the configuration, click the SAVE button at the bottom.

Next, you can add it to the post. Here are some steps to set up and their explanation:

  1. Go to Blogger Dashboard.
  2. Select the Posts menu.
  3. Create a new post or you can also edit old posts.
  4. In the Post Editor, switch to HTML mode and paste the following code into it:
    <div class='tocHere'></div>
Information:
  • This setting only works if you have set the Post Table of Contents to 2px (Enable).
  • Table of Contents will only be created automatically if your post has heading tags (H2, H3, H4, H5 and H6).

Post Code Syntax Highlighter

This setting is useful for enabling or disabling the Syntax Highlighter feature. Here are some steps to set up and their explanations:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Post Code Syntax Highlighter (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Post Syntax Highlighter will be disabled.
    • 2px: Enable - Post Syntax Highlighter will be enabled.
  6. Click the Save button (diskette icon) in the lower right corner.

Post Scroll Indicator

This setting is useful for enabling or disabling the Scroll Indicator feature on Floating Action Button (FAB). Here are some steps to set up and their explanations:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Post Scroll Indicator (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Post Scroll Indicator will be disabled.
    • 2px: Enable - Post Scroll Indicator will be enabled.
  6. Click the Save button (diskette icon) in the lower right corner.

Related Posts

This setting is useful for enabling or disabling the automatic Related Posts on the Posts page. Here are some steps to set up and their explanations:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Related Posts (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Related Posts is Disable.
    • 2px: Enable - Related Posts is Enable.
  6. Click the Save button (diskette icon) in the lower right corner.

Related Posts Style

This setting is useful for changing the style of Related Posts on the Posts page. Here are some steps to set up and their explanations:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Related Posts Style (List | Grid), drag the slider right or left. Here is the explanation:
    • 1px: List - Related Posts with List style.
    • 2px: Grid - Related Posts with three column grid on desktop and two column grid on mobile.
  6. Click the Save button (diskette icon) in the lower right corner.
This setting is only useful if you have set the Related Posts feature to 2px (Enable).

Related Posts Count

This setting is useful for changing the number of Related Posts on the Posts page. Here are some steps to set up and their explanations:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Option named Related Posts Count, drag the slider right or left until you find the number of Related Posts you want.
  6. Click the Save button (diskette icon) in the lower right corner.
This setting is only useful if you have set the Related Posts feature to 2px (Enable).

Post Split

This setting is useful for enabling or disabling the Split Post feature. Here are some steps to set up and their explanations:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Post Split (Disable| Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Post split will be disabled.
    • 2px: Enable - Post split will be enabled.
  6. Click the Save button (diskette icon) in the lower right corner.

Furthermore, you can split the post wherever you want. Here are some steps to set up and their explanation:

  1. Go to Blogger Dashboard.
  2. Select the Posts menu.
  3. Create a new post or you can also edit old posts.
  4. In the Post Editor, Within the post, you can click the Insert jump break button.
  5. In addition to using the Insert jump break button, you can also enter it manually by switching Post Editor to HTML mode and paste the following code into the part of the post you want to split:
    <a name='more'>
    
    or
    
    <!--more--->
  6. Click the Publish or Update button.
If you set the Post Split feature to 2px (Enable), then the Table of Contents feature cannot be used (if you enable it) because it will conflict.

Post Split Button Style

This setting is useful for changing the style of the Post Split button. Here are some steps to customize it:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Post Split Button Style (Default | Raised | Unelevated | Outline), drag the slider right or left. Here is the explanation:
    • 1px: Default - Default Post Split Button.
    • 2px: Raised - Normal Post Split Button with shadow.
    • 3px: Unelevated - Normal Post Split Button without shadow.
    • 4px: Outline - Outlined Post Split Button.
  6. Click the Save button (diskette icon) in the lower right corner.
This feature is only useful if you have set the Post Split feature to 2px (Enable).

Post Comment System

This setting is useful for selecting the comment system you want to use. You can choose between Blogger's comment system or a third-party comment system like Disqus. Here are some steps to set up and their explanations:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Post Comment System (Blogger | Disqus), drag the slider right or left. Here is the explanation:
    • 1px: Blogger - Using Blogger's comment system.
    • 2px: Disqus - Using Disqus comment system.
  6. Click the Save button (diskette icon) in the lower right corner.

If you are using the Disqus comment system, then you will need to set a Disqus Shortname. Follow these steps:

  1. Go to Blogger Dashboard.
  2. Select the Layout menu.
  3. Look for the section titled Theme Panel Top.
  4. Click the edit button (pencil icon) on the JavaScript Variables (Link List Gadget).
  5. A Link List Configuration Popup will appear.
  6. You can skip the Title and Number of items to show in list input.
  7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
  8. Click the ADD A NEW ITEM button.
  9. Here are a few things that can be set:
    • In the Site name input, type disqusShortname.
    • In the Site URL input, enter your Disqus Shortname.
    • If both inputs are set, click the SAVE button next to them.
  10. If you want to finish the configuration, click the SAVE button at the bottom.

Post Shortcode

This setting is useful for enabling or disabling Shortcode. Here are some steps to set up and their explanations:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Post Shortcode (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Post Shortcode will be disabled.
    • 2px: Enable - Post Shortcode will be enabled.
  6. Click the Save button (diskette icon) in the lower right corner.

You can see how to use Shortcodes in the Materia X2 Post Shortcode documentation.

Post Sitemap

This setting is useful for enabling or disabling the Post Sitemap. Here are some steps to set up and their explanations:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Post Sitemap (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Post Sitemap will be disabled.
    • 2px: Enable - Post Sitemap will be enabled.
  6. Click the Save button (diskette icon) in the lower right corner.

Adding Sitemap Page

Next, you have to create and publish a static page on Blogger. Static pages on Blogger are pages that have a URL like the following: https://www.domain.com/p/static-page.html.

Example: We have created a static page with the following URL: https://materialax.elcreativeacademy.com/p/sitemap.html. Here, you just need to copy the page name, which is sitemap.html.

Finally, you must enter a page name for the Sitemap. Follow these steps:

  1. Go to Blogger Dashboard.
  2. Select the Layout menu.
  3. Look for the section titled Theme Panel Top.
  4. Click the edit button (pencil icon) on the JavaScript Variables (Link List Gadget).
  5. A Link List Configuration Popup will appear.
  6. You can skip the Title and Number of items to show in list input.
  7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
  8. Click the ADD A NEW ITEM button.
  9. Here are a few things that can be set:
    • In the Site name input, type sitemapPage.
    • In the Site URL input, enter the name of the sitemap page that you copied earlier. Example: sitemap.html.
    • If both inputs are set, click the SAVE button next to them.
  10. If you want to finish the configuration, click the SAVE button at the bottom.
The Sitemap feature is only available on Materia X2 version 2.9 and above.
Sitemap only works on Static pages.

Safelink

Safelink is a website created to redirect users from the initial site to the destination website. Safelink can make it easier for you because you don't have to always create a new URL for each destination link.

This setting is useful for enabling or disabling the Safelink. Here are some steps to set up and their explanations:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Safelink (Disable | Manual | Auto), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Safelink will be disabled.
    • 2px: Manual - Safelink will be enabled and the link href attribute value must be created and changed manually (Recommended).
    • 3px: Auto - Safelink will be activated and all existing link href attribute values on the page will be generated automatically.
  6. Click the Save button (diskette icon) in the lower right corner.
The Safelink feature is only available on Materia X2 version 2.9 and above.
If you set the Safelink feature to 3px (Auto), then all links on the blog will be encrypted automatically. You can set an exclusion link via the Safelink URL Exclusion step below.

Adding Safelink URL Generator Page

Next, you have to create and publish a static page on Blogger. Static pages on Blogger are pages that have a URL like the following: https://www.domain.com/p/static-page.html.

Example: We have created a static page with the following URL: https://materialax.elcreativeacademy.com/p/safelink.html. Here, you just need to copy the page name, which is safelink.html.

Finally, you must enter a page name for the Safelink. Follow these steps:

  1. Go to Blogger Dashboard.
  2. Select the Layout menu.
  3. Look for the section titled Theme Panel Top.
  4. Click the edit button (pencil icon) on the JavaScript Variables (Link List Gadget).
  5. A Link List Configuration Popup will appear.
  6. You can skip the Title and Number of items to show in list input.
  7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
  8. Click the ADD A NEW ITEM button.
  9. Here are a few things that can be set:
    • In the Site name input, type safelinkPage.
    • In the Site URL input, enter the name of the safelink page that you copied earlier. Example: safelink.html.
    • If both inputs are set, click the SAVE button next to them.
  10. If you want to finish the configuration, click the SAVE button at the bottom.
Safelink URL Generator Page only works on Static pages.

Safelink Duration/Countdown

This setting is useful for setting the duration or countdown on Safelink. Follow these steps:

  1. Go to Blogger Dashboard.
  2. Select the Layout menu.
  3. Look for the section titled Theme Panel Top.
  4. Click the edit button (pencil icon) on the JavaScript Variables (Link List Gadget).
  5. A Link List Configuration Popup will appear.
  6. You can skip the Title and Number of items to show in list input.
  7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
  8. Click the ADD A NEW ITEM button.
  9. Here are a few things that can be set:
    • In the Site name input, type safelinkDuration.
    • In the Site URL input, enter the Safelink duration in seconds. For example, if you want to set the duration to 50 seconds, then fill it with 50.
    • If both inputs are set, click the SAVE button next to them.
  10. If you want to finish the configuration, click the SAVE button at the bottom.

Exclude Safelink URLs

This setting is useful if you have set Safelink to 3px (Auto) which means it will change all links on the blog automatically.

Here, you can exclude some links that you don't want to change. Follow these steps:

  1. Go to Blogger Dashboard.
  2. Select the Layout menu.
  3. Look for the section titled Theme Panel Top.
  4. Click the edit button (pencil icon) on the JavaScript Variables (Link List Gadget).
  5. A Link List Configuration Popup will appear.
  6. You can skip the Title and Number of items to show in list input.
  7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
  8. Click the ADD A NEW ITEM button.
  9. Here are a few things that can be set:
    • In the Site name input, type safelinkExclude.
    • In the Site URL input, enter multiple URLs you want to exclude surrounded by single or double quotes and separated by commas without http:// or https:// and trailing slashes. Example: "www.elcreativeacademy.com", "materiax.elcreativeacademy.com", "www.yourblog.com".
    • If both inputs are set, click the SAVE button next to them.
  10. If you want to finish the configuration, click the SAVE button at the bottom.
This setting is useless if the a tag has the target="_blank" attribute.

Safelink Button Tab

This setting is useful for enabling or disabling the Safelink New Tab Button. Here are some steps to set up and their explanations:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Look for the Slider setting named Safelink Button Tab (Same Tab | New Tab), drag the slider right or left. Here is the explanation:
    • 1px: Same Tab - If the Open URL button is clicked, it will open in the Same Tab.
    • 2px: New Tab - If the Open URL button is clicked, it will open in the New Tab.
  6. Click the Save button (diskette icon) in the lower right corner.

Customizer Settings

There are several Color settings for all Materia X2 Feature.

Color Settings

There are several color settings for Features on Materia X2 that can be customized, namely:

  • Progress Bar Color - To set the Progress Bar color.
  • Dark Mode Key Color - To set the Main Dark Mode color.
  • Dark Mode Background Color - To set the Dark Mode background color.
  • Dark Mode Background Color (2nd) - To set the Dark Mode secondary background color.
  • Dark Mode Text Color - To set the Dark Mode text color.
  • Dark Mode Meta Color - To set the Dark Mode Meta/text color.
  • Dark Mode Border Color - To set the Dark Mode border color.
  • Ripple Effect Color - To set the Material Design Ripple Effect color/background.
  • Post Scroll Indicator Color - To set the Scroll Indicator Stroke color.

Here are some steps to customize it:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
  5. Find a color setting and select the color you want to change.
  6. Click the Save button (diskette icon) in the lower right corner.

Those are some steps to configure the Features in the Materia X2 Theme. If you have any questions, please write them in the comments section.

If you want to report some bugs, you can write them in the comments section on the Bug Report page and if you want to request new features or want to provide feedback, please write them in the comments section on the Request and Feedback page.

Yasya El Hakim
404 Not Found!
Comments
To add an image:
[image] image_url [/image]

To add a code block:
[code] your_code [/code]

To add a quote:
[quote] your_quote [/quote]

To add a link:
[link] your_link_text | link_url [/link]
Lekturin Comment Poster
Apa template ini juga support untuk blog edukasi ya mas? Yang bisa untuk buat soal dengan pilihan ganda begitu?
Cocok aja mas, multipurpose.
Tehnosia Web Comment Poster
Untuk versi Terbaru ini tidak ada slot iklan khusus seperti versi sebelumnya
Gimana Cara Pasang code Adsense untuk Ads di Atas, Dalam dan Bawah artikel
Bisa diletakkan di Main Top Section, Main Bottom Section dan Main Sidebar Section mas.

Sedangkan untuk iklan ditengah artikel 'Alangkah Baiknya' menggunakan Auto Ads melalui pengaturan Blog Posts Widget karena dari AdSense juga sudahotomatis membagi artikel sehingga iklannya akan berada ditengahnya.
Oke Thanks Mas Yasya 👌🙏🙏🙏
Sama-sama mas.
drg vlogs Comment Poster
Hi Yasya,
The ads for 'Main Sidebar Section' is not working for the homepage but its working for the posts. https://www.dhanraj.com.np

Also, contact form shortcode isn't applicable for this new version updates. Please suggest.

BTW, huge thanks for the new version. 🙏
Hello,

[Ads]
Make sure not to include the <script... element. If you use the Lazyload AdSense feature, by default the script has been added.

[Contact Form]
Make sure you already have a Contact Form Widget.

Please also note that the Contact Form will only appear and work on Static pages.
Tehnosia Web Comment Poster
Bagaimana Sort Code Untuk
"Syntac Highlighter" Pada Postingan
Untuk membuat code block harus manual mas. Menggunakan elemen pre. Sedangkan untuk Highlighting nya perlu mengaktifkan fitur Syntax Highlighter di Customizer.