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.

Content Delivery Network (CDN) Resource

This setting is useful for enabling or disabling Content Delivery Network (CDN) Resources. This CDN resource is in the form of the main CSS and JavaScript files from the Materia X2 Theme.

There are still real benefits from using CDNs (for example: files are served from a location in close physical proximity to the consuming end-user - on large, globally distributed CDNs).

Here are some steps to set up and their explanation:

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

Cookie Consent

This feature is useful for enabling or disabling Cookie Consent Information. Cookie consent is the process of obtaining user permission before using cookies on their device. It's important to comply with privacy regulations and respect user privacy.

Here are some steps to set up and their explanation:

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

Ad Blocker Detector

This feature is useful for enabling or disabling Ad Blocker Detector. Ad Blocker Detector is useful for detecting Ad Blockers in Browsers.

Here are some steps to set up and their explanation:

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

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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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.
5. 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, select the Layout menu.
2. Look for the section titled Theme Panel Bottom.
3. Click the edit button (pencil icon) on the Custom jQuery Script (HTML/JavaScript Gadget).
4. A HTML Configuration Popup will appear.
5. You can skip the Title input.
6. Enter your jQuery code into the content input.
7. 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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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.
5. 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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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.
5. Click the Save button (diskette icon) in the lower right corner.

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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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.
5. Click the Save button (diskette icon) in the lower right corner.

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

Adding AdSenseID

This setting is only useful on Materia X2 v3.3 and above and if you enable Lazy Loading AdSense feature.

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

Adding AdSense Delay Duration (Optional)

This setting is useful for delaying loading of AdSense ads. Follow these steps:

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

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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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).
5. 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.

Color Mode Dark/Light Logo

This setting is useful for setting a Light Logo or Dark Logo for the Color Mode feature. Here are some steps to customize it:

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

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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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.
5. Click the Save button (diskette icon) in the lower right corner.

Google Doodle

This setting is useful for enabling or disabling the Google Doodle feature based on annual and monthly events. Here are some steps to customize it:

1. Go to Blogger Dashboard, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. Look for the Slider setting named Google Doodle (Disable | Enable), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Google Doodles will be disabled.
   • 2px: Enable - Google Doodles will be enabled.
5. 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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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.
5. 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, select the Layout menu.
2. Look for the section titled Theme Panel Top.
3. Click the edit button (pencil icon) on the JavaScript Variables (Link List Gadget).
4. A Link List Configuration Popup will appear.
5. You can skip the Title and Number of items to show in list input.
6. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
7. Click the ADD A NEW ITEM button.
8. 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.
9. If you want to finish the configuration, click the SAVE button at the bottom.

OneSignal Notification

This setting is useful for adding the OneSignal notification feature to the Materia X2. Here are some steps to customize it:

1. Go to the OneSignal page and Login with your account.
2. If you have added a website, please edit it. If you don't have one, click the New App/Website button.
3. In the Name input of your app or website, enter the name of your application or website.
4. In the input Set up web push or mobile push..., Select Web.
5. If so, click the Next: Configure Your Platform button.
6. In the Choose Integration, select Wordpress Plugin or Website Builder option.
7. In the Select your Website Builder / CMS option, select Blogger.
8. In the Blogger Site Setup option, please fill in the Site Name, Site URL, etc.
9. You can also set things like Permission Prompt Setup, Welcome Notification (Optional), Advanced Push Settings (Optional).
10. If so, click the Save button.
11. On the next screen, you will find a code (Add Code to Site). Please copy your appID. For example:

    bxxxexxx-1xxx-4xxx-8xxx-bxxxxebxxxxe

12. Next, click the Finish button.

Finally, you need to set the OneSignal ID into your blog. Follow these steps:

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

Collapsible Tabbed Menu

This setting is useful for enabling or disabling the Collapsible Tabbed Menu feature. If you use and have set the Tabbed Menu and if this feature is enabled, the tabbed menu will be hidden when scrolled down and will reappear when scrolled up. Here are some steps to customize it:

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

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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. Look for the Slider setting named Ajax Search (Disable | Enable), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Ajax Search will be disabled.
   • 2px: Enable - Ajax Search will be enabled.
5. Click the Save button (diskette icon) in the lower right corner.

Ajax Search Corner Radius

This setting is useful for setting the rounded corner radius for the Ajax Search Result container. Here are some steps to customize it:

1. Go to Blogger Dashboard, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. Look for the Slider setting named Ajax Search Corner Radius, drag the slider right or left until you find the number of Post Results you want.
5. Click the Save button (diskette icon) in the lower right corner.

Ajax Search Max Results

This setting is useful for adjusting the number of post results that appear on Ajax Search. Here are some steps to customize it:

1. Go to Blogger Dashboard, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. Look for the Slider setting named Ajax Search Max Results, drag the slider right or left until you find the number of Post Results you want.
5. Click the Save button (diskette icon) in the lower right corner.

Ajax Search Result Icon

This setting is useful for enabling or disabling the icon in the ajax search results. Here are some steps to customize it:

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

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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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.
5. 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, select the Layout menu.
2. Look for the section titled Navigation Drawer and More Menu.
3. Click the edit button (pencil icon) on the Navigation Drawer Menu (Link List Gadget).
4. A Link List Configuration Popup will appear.
5. You can skip the Title and Number of items to show in list input.
6. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
7. 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:
8. 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

Navigation Drawer Sub-Menu Item Auto Collapse

This setting is useful for adjusting the item visibility in the Navigation Drawer Menu. If enabled, when a sub-menu is clicked, the sub-menu will open and the other sub-menus will close (Auto-Collapse). Here are some steps to set it up and an explanation:

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

Navigation Drawer Sub-Menu Item Visibility

This setting is useful for adjusting the item visibility in the Navigation Drawer Menu. If enabled, when the page is loaded for the first time, all sub-menu items will be visible. Here are some steps to set it up and an explanation:

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

Random Post Thumbnail

This setting is useful for enabling or disabling the Random Thumbnail feature. Here are some setup steps and their explanations:

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

Save Posts or Bookmark

This setting is useful for enabling or disabling the Save Posts feature or commonly known as Bookmarks. Here are some steps to set up and explanations:

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

Save Posts or Bookmark More Menu Icon

This setting is useful for enabling or disabling the Save Posts or Bookmark Menu Icon on More Menu. Here are some steps to set up and explanations:

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

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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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.
5. Click the Save button (diskette icon) in the lower right corner.

Post Datetime Time Ago

This setting is useful for enabling or disabling Datetime Time Ago for post publication date. If this feature is enabled, the publication date will be automatically converted to Past Time formats such as XX Week(s) ago, XX Month(s) ago, etc. Here are some steps to set up and their explanations:

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

Post Read Time

This setting is useful for enabling or disabling the time to read the entire post, especially for the Items page (Posts). Here are some steps to set up and their explanations:

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

Post Anti Copy

This setting is useful for enabling or disabling the Right Click and Copy function the entire post. Here are some steps to set up and their explanations:

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

Adding Table of Contents into Posts (Manual Placement)

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, select the Layout menu.
2. Look for the section titled Theme Panel Top.
3. Click the edit button (pencil icon) on the CSS Options (Link List Gadget).
4. A Link List Configuration Popup will appear.
5. You can skip the Title and Number of items to show in list input or leave it blank.
6. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
7. Click the ADD A NEW ITEM button.
8. 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.
9. 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, select the Posts menu.
2. Create a new post or you can also edit old posts.
3. In the Post Editor, switch to HTML mode and paste the following code into it:
   

   <div class='tocHere'></div>

Adding Table of Contents into Posts (Automatic Placement)

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, select the Layout menu.
2. Look for the section titled Theme Panel Top.
3. Click the edit button (pencil icon) on the CSS Options (Link List Gadget).
4. A Link List Configuration Popup will appear.
5. You can skip the Title and Number of items to show in list input or leave it blank.
6. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
7. Click the ADD A NEW ITEM button.
8. 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.
9. If you want to finish the configuration, click the SAVE button at the bottom.

Next, you must enable the Feature. Here are some steps to set up and their explanation:

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

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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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.
5. 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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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.
5. 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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. Look for the Slider setting named Related Posts (Disable | Enable), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Related Posts will be disabled.
   • 2px: Enable - Related Posts will be enabled.
5. 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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. Look for the Slider setting named Related Posts Style (List | List Icon | Grid), drag the slider right or left. Here is the explanation:
   • 1px: List - Related Posts with List style.
   • 2px: List Icon - Related Posts with three List with Icon (Simple) style.
   • 3px: Grid - Related Posts with three column grid on desktop and two column grid on mobile.
5. Click the Save button (diskette icon) in the lower right corner.

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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. Look for the Option named Related Posts Count, drag the slider right or left until you find the number of Related Posts you want.
5. Click the Save button (diskette icon) in the lower right corner.

Related Posts Between

This setting is useful for moving Related Posts into the middle of a post. Here are some steps to set up and their explanations:

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

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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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.
5. 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, select the Posts menu.
2. Create a new post or you can also edit old posts.
3. In the Post Editor, Within the post, you can click the Insert jump break button.
4. 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--->

5. Click the Publish or Update button.

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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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.
5. Click the Save button (diskette icon) in the lower right corner.

Post Comment System

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

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

Disqus Comment Setup

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, select the Theme menu.
2. Look for the section titled Theme Panel Top.
3. Click the edit button (pencil icon) on the JavaScript Variables (Link List Gadget).
4. A Link List Configuration Popup will appear.
5. You can skip the Title and Number of items to show in list input.
6. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
7. Click the ADD A NEW ITEM button.
8. 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.
9. If you want to finish the configuration, click the SAVE button at the bottom.

Facebook Comment Setup

If you are using the Facebook comment system, then you will need to set a Facebook App ID. Follow these steps:

1. Go to Facebook Developer page.
2. If you don't have an application yet, please click the Create Apps button and fill in the data according to the instructions.
3. On the Which use case do you want to add to your app? page, select Other. Then click Next button
4. On the Select an app type page, select None. Then click Next button
5. On the next page, please fill in the Add an app name, App contact email and Business Account (Optional) information. Then click Next button
6. If it is successful, you will get an App ID. Please the App ID.
7. Next, Go to Blogger Dashboard, select the Theme menu.
8. Look for the section titled Theme Panel Top.
9. Click the edit button (pencil icon) on the JavaScript Variables (Link List Gadget).
10. A Link List Configuration Popup will appear.
11. You can skip the Title and Number of items to show in list input.
12. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
13. Click the ADD A NEW ITEM button.
14. Here are a few things that can be set:
    
    • In the Site name input, type facebookAppID.
    • In the Site URL input, enter your Facebook App ID.
    • If both inputs are set, click the SAVE button next to them.
15. 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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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.
5. 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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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.
5. 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, select the Layout menu.
2. Look for the section titled Theme Panel Top.
3. Click the edit button (pencil icon) on the JavaScript Variables (Link List Gadget).
4. A Link List Configuration Popup will appear.
5. You can skip the Title and Number of items to show in list input.
6. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
7. Click the ADD A NEW ITEM button.
8. 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.
9. If you want to finish the configuration, click the SAVE button at the bottom.

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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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 enabled and all existing link href attribute values on the page will be generated automatically.
5. Click the Save button (diskette icon) in the lower right corner.

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, select the Layout menu.
2. Look for the section titled Theme Panel Top.
3. Click the edit button (pencil icon) on the JavaScript Variables (Link List Gadget).
4. A Link List Configuration Popup will appear.
5. You can skip the Title and Number of items to show in list input.
6. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
7. Click the ADD A NEW ITEM button.
8. 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.
9. If you want to finish the configuration, click the SAVE button at the bottom.

Safelink Duration/Countdown

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

1. Go to Blogger Dashboard, select the Layout menu.
2. Look for the section titled Theme Panel Top.
3. Click the edit button (pencil icon) on the JavaScript Variables (Link List Gadget).
4. A Link List Configuration Popup will appear.
5. You can skip the Title and Number of items to show in list input.
6. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
7. Click the ADD A NEW ITEM button.
8. 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.
9. 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, select the Layout menu.
2. Look for the section titled Theme Panel Top.
3. Click the edit button (pencil icon) on the JavaScript Variables (Link List Gadget).
4. A Link List Configuration Popup will appear.
5. You can skip the Title and Number of items to show in list input.
6. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
7. Click the ADD A NEW ITEM button.
8. 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.
9. If you want to finish the configuration, click the SAVE button at the bottom.

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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. 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.
5. 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, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced Dropdown, click Default Options Dropdown and Select Feature Options.
4. Find a color setting and select the color you want to change.
5. 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.