Configuring Index Pages in Materia X2 Theme

Index (Homepage) Page, an Archive Page, a Search Page and a Label Page configuration in the Materia X2 theme.
Yasya El Hakim

Index Pages (Multiple Items) is a listing page or a list of posts consisting of an Index Page (Homepage), Archive Page, Search Page, Label Page and Error Page.

Elements on the Index Page also vary; consists of Post Label or Category, Post Title, Post Author Name, Post Published and Updated Date, Post Share, Post Summary, Post Image/Thumbnail, Post Jumplink, Post Comment Link, etc.

You can customize it and adjust the elements to be displayed on the Index Pages easily.

Blog Posts Configuration

There are several things that can be set on the index pages. Here are some steps and their explanations:

  1. Go to Blogger Dashboard and select the Layout menu.
  2. Look for the section titled Main Section.
  3. Click the edit button (pencil icon) on the Blog Posts (Blog Posts Gadget).
  4. A Blog Posts Configuration Popup will appear.
  5. Here are a few things that can be set:
    • In the Number of posts on main page input, fill it the number of posts you want to display on the index pages. Example: 4.
    • In the Post page link text input, fill it with the jumplink text. Example: View Full Coverage.
    • You can skip the Show date header as this feature can't be used on the Materia X2 Theme.
    • The Show author setting is useful for displaying the Author name. If enabled, the Author format input will appear. You can fill it with text Written by, By or leave it blank.
    • The Show publish time setting is useful for displaying the post's publication date. If enabled, the Publish time prefix input will appear, you can fill it with text Published at, At or leave it blank. A dropdown for the date/time format will also appear, please select it according to your wishes.
    • The Show comment count setting is useful for displaying the comments. If enabled, the Comment format input will appear. Just skip it, because the input is not used.
    • The Show labels setting is useful for displaying the posts label. If enabled, the Labels prefix input will appear. You can fill it with text Labels: or leave it blank.
    • Just skip the Show email post link setting as it's not being used.
    • The Show share buttons setting is useful for displaying sharing buttons and share links to social media.
    • Just skip the Show location setting as it's not being used.
    • The Show author profile setting is useful for displaying post Author Profile.
    • The Show ads between posts setting is useful for displaying Ads. If enabled, Ad settings from AdSense like Number of posts between ads and Format will appear. Here are the options you can use:
      • Number of posts between ads - For the location of placing ads per post item. We recommend placing an ad in every half of the post that is displayed. For example, if the post item on the index page is set to 4, then you can set the Number of posts between ads to 2.
      • Format - To select the ad size. We recommend using Ad Units - Responsive.
  6. If you want to finish the configuration, click the SAVE button at the bottom.

Attention!

  • Disabling the Show author, Show publish time, Show comment count, Show labels, Show share buttons, Show author profile and Show ads between posts settings will also impact the Item Page (Single Page).
  • In the Post page link text input, make sure not to use Jumplink/Readmore text which is identical to Click Here, Click This, Go, Here, This, Start, Right Here , Learn More or Read More. Some SEO Audit services like Lighthouse flag it as error: 'Link has no descriptive text'.
Information:
  • We recommend displaying a minimum number of posts of 4 in the Number of posts on the main page input.
  • If you enable the Show author, Show publish time and Show labels settings, you can also leave the input blank.
  • The Show author profile setting will only appear on the Item Page.
  • If you enable the Show labels setting, make sure your posts have labels/tags/categories that can be set via a post editor. The text in the Label prefix input will only appear on the Item Page. Full documentation can be found on the Post Configuration page.

Custom Posts Label Icon

This feature is useful for adding custom label icon. In short, if you have a label or post category called Documentation, then you can add a custom icon for documentation label, as well as other labels.

This setting will be further explained in the Customizer Settings.

Posts Pagination Type

This feature is useful for changing the pagination type, you can choose between Next/Previous, Load More, Infinite Scroll or Numbered types.

More documentation will be explained in a separate section in the Configuring Features.

Customizer Settings

There are several Options and Color settings for all elements in the Index Pages.

Options for Index Pages

There are several Options for the Index Pages that can be customized, namely:

Posts Recent Headline Title

This setting is useful for displaying the title text of the Recent Posts specifically on the main page (Homepage). Here are some steps to customize and some explanations:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
  4. Look for the Slider setting named Posts Recent Headline Title (Disable | Enable), drag the slider right or left. Here is the explanation:

    Posts Recent Headline Title

    • 1px: Disable - Recent Title will be disabled.
    • 2px: Enabled - Recent Title will be enabled.
  5. Click the Save button (diskette icon) in the lower right corner.
You cannot set the Recent Post Title text, the text will automatically exist according to the Blogger language you are using (Multilingual).

Posts Animations

This setting is useful for adding Fade In Up animation effects to each item in the list of posts on the index pages. Here are some steps to set it up:

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

Posts Layout on Desktop

This setting is useful for changing the layout of post items on the desktop screen. You can choose between List or Grid with two columns. Here are some steps to customize and some explanations:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
  4. Look for the Slider setting named Posts Layout on Desktop (List | Grid), drag the slider right or left. Here is the explanation:

    Posts Layout on Desktop

    • 1px: List - Post items with a list view.
    • 2px: Grid - Post items with a two-column grid view.
  5. Click the Save button (diskette icon) in the lower right corner.

If you enabled the Posts Layout on Desktop to 1px (List) and enabled the Posts Thumbnail, the image or thumbnail will be resized to 1:1 with a resolution of 100px. Meanwhile, if you set the Posts Layout on Desktop to 2px (Grid) , the image or thumbnail will be resized to 16:9 with a resolution of 600px.

Posts Layout on Mobile

This setting is useful for changing the layout of post items on the mobile screen. You can choose between List or Grid with two columns. Here are some steps to customize and some explanations:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
  4. Look for the Slider setting named Posts Layout on Mobile (List | Grid), drag the slider right or left. Here is the explanation:

    Posts Layout on Mobile

    • 1px: List - Post items with a list view.
    • 2px: Grid - Post items with a two-column grid view.
  5. Click the Save button (diskette icon) in the lower right corner.

If you enabled the Posts Layout on Mobile to 1px (List) and enabled the Posts Thumbnail, the image or thumbnail will be resized to 1:1 with a resolution of 100px. Meanwhile, if you set the Posts Layout on Mobile to 2px (Grid) , the image or thumbnail will be resized to 16:9 with a resolution of 600px.

Posts Edge Style on Desktop

This setting is useful for setting the edge styles of each post item on the index page on the desktop screen. Here are some steps to customize and some explanations:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
  4. Look for the Slider setting named Posts Edge Style on Desktop (None | Border | Border Bottom | Shadow) drag the slider right or left. Here is the explanation:
    • 1px: None - Post items without any appearance.
    • 2px: Border - Post items will have a border.
    • 3px: Border Bottom - Post items will have a border at the bottom.
    • 4px: Shadow - Post items will have a shadow.
  5. Click the Save button (diskette icon) in the lower right corner.
If you set the Posts Edge Style on Desktop to 2px (Border) or 3px (Border Bottom), then you can also set the border color. Meanwhile, if you set the Posts Edge Style on Desktop to 4px (Shadow), then you can also set the Shadow Thickness and Shadow color.

Posts Edge Style on Mobile

This setting is useful for setting the edge styles of each post item on the index page on the mobile screen. Here are some steps to customize and some explanations:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
  4. Look for the Slider setting named Posts Edge Style on Mobile (None | Border | Border Bottom | Shadow) drag the slider right or left. Here is the explanation:
    • 1px: None - Post items without any appearance.
    • 2px: Border - Post items will have a border.
    • 3px: Border Bottom - Post items will have a border at the bottom.
    • 4px: Shadow - Post items will have a shadow.
  5. Click the Save button (diskette icon) in the lower right corner.
If you set the Posts Edge Style on Mobile to 2px (Border) or 3px (Border Bottom), then you can also set the border color. Meanwhile, if you set the Posts Edge Style on Mobile to 4px (Shadow), then you can also set the Shadow Thickness and Shadow color.

Posts Edge Shadow Thickness

This setting is useful for adjusting the thickness of the Shadow on the Post Items. Shadow thickness is measured in dp units.

Note that this setting is only useful if you have set the Posts Edge Style on Desktop and Posts Edge Style on Mobile to 2px (Border) or 3px (Shadow).

There are three options that you can choose from, including 2dp (Thin), 4dp (Medium) and 6dp (Thick). Here are some steps to customize and some explanations:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
  4. Look for the Option named Posts Edge Shadow Thickness (Thin | Medium | Thick), drag the slider right or left. Here is the explanation:
    • 1px: Thin - Post items with Shadow Thickness 2dp (Thin).
    • 2px: Medium - Post items with Shadow Thickness 4dp (Medium).
    • 3px: Thick - Post items with Shadow Thickness 6dp (Thick).
  5. Click the Save button (diskette icon) in the lower right corner.

Posts Corner Radius

This setting is useful for setting the rounded corner radius for the Post Items. Here are some steps to customize and some explanations:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
  4. Look for the Option named Posts Corner Radius, drag the slider right or left until you find the corner radius you want.
  5. Click the Save button (diskette icon) in the lower right corner.
This setting is only useful if you have set the Posts Edge Style on Desktop and Posts Edge Style on Mobile to 2px (Border) or 3px (Shadow).

Posts Label

This setting is useful for enabling or disabling Label Icon or Label Link on index pages. Here are some steps to customize it:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
  4. Look for the Slider setting named Posts Label (Disable | Label | Label and Icon), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Post Labels will be disabled.
    • 2px: Label - Post Labels will be enabled without icon.
    • 3px: Label and Icon - Post Labels will be enabled with icon.
  5. Click the Save button (diskette icon) in the lower right corner.
This setting will have no effect if you don't enable the Show labels setting in the Index Blog Posts Configuration.

Custom Label SVG Icon

This setting is useful for adding Custom Icon for each Post Labels. Here are some steps to customize it:

YouTube Video: Indonesian Guide (Subtitles/Closed Captions available).
  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
  4. Look for the Slider setting named Custom Label SVG Icon (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Custom Label SVG Icon will be disabled.
    • 2px: Enable - Custom Label SVG Icon will be enabled.
  5. Click the Save button (diskette icon) in the lower right corner.

To add a Custom Label Icons, you can choose to use the Matericons or the Material Design Icon Picker.

Adding Icons Using Matericons

Matericons is an open source and optimized collection of SVG Icons from Materia X2. Here are some steps to use it:

  1. Go to the Matericons page.
  2. In the search bar, find the name of the icon you want to use.
  3. Select the icon. At the bottom.
  4. A popup will appear. Copy all the SVG Path Data in the Code Box by clicking the Copy icon.

Next, you can follow the following steps:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Look for the section titled Theme Panel Top.
  3. Click the edit button (pencil icon) on the Custom SVG Icon (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, enter the label name. Example: Documentation.
    • In the Site URL input, paste the SVG Path that was copied earlier.
    • 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.
If the icon you want doesn't exist, you can request it by writing the name of the icon or image of the icon you want in the comments section.
Adding Icons Using Material Design Icon Picker

Material Design Icons Picker is a Browser Addon that is useful for finding and using Material Design-themed SVG Icons that have thousands of icons.

Before that, you need to use the SVG icon library called Material Design Icons Picker available for Google Chrome or Firefox.

After the addon is installed on the browser you are using, then you can follow these steps:

  1. Click the Material Design Icons Picker Addon.
  2. In the search bar, find the name of the icon you want to use.
  3. Select the icon. At the bottom, click the Copy..., and choose Copy SVG Path.

Next, you can follow the following steps:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Look for the section titled Theme Panel Top.
  3. Click the edit button (pencil icon) on the Custom SVG Icon (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, enter the label name. Example: Documentation.
    • In the Site URL input, paste the SVG Path that was copied earlier.
    • 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.
This setting will have no effect if you don't enable the Show labels setting in the Index Blog Posts Configuration and set the Posts Label to 1px (Disable) or 2px (Label).
Attention!
  • Make sure you DO NOT add any new items into Custom SVG Icons Gadget other than those in the documentation.
  • In configuring a Custom Icon, the text in the Site Name input is Case Sensitive. Example: If you have a label named Documentation (with capital letters at the beginning), then you must also write it the same. Documentation: Is different from documentation, DoCumentation, etc.
  • If you enable this feature, then you must also set each Custom Icon on all Post Labels.

Posts Label Search Description

This setting is useful if you want to add a description especially on the Label search page. Example: If you click on the Documentation label, you will see a description of the Documentation label that was created earlier. Here are some steps to customize it:

YouTube Video: Indonesian Guide (Subtitles/Closed Captions available).
  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
  4. Look for the Slider setting named Posts Label Search Description (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Posts Label Search Description will be disabled.
    • 2px: Enable - Posts Label Search Description will be enabled.
  5. Click the Save button (diskette icon) in the lower right corner.

Next, you need to set each description of the Label by following these steps:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Look for the section titled Main Section.
  3. Click the edit button (pencil icon) on the Posts Label Search Description (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, enter the name of the label for which you want to create a description. Example: Documentation.
    • In the Site URL input, enter a description according to the name of the label you created. Example: Documentation is any communicable material that is used to describe....
    • 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.
In configuring a Label Search Description, the text in the Site Name input is Case Sensitive. Example: If you have a label named Documentation (with capital letters at the beginning), then you must also write it the same. Documentation: Is different from documentation, DoCumentation, etc.
You can also enter a description in the Site URL input in HTML format.

Posts Author

This setting is useful for enable or disable Author Name and/or Author Prefix (Text before Author Name) on Index Pages. Here are some steps to customize it:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the Customize button.
  3. Click Advanced Dropdown, click Default Dropdown and Select Index Options.
  4. Look for the Slider setting named Posts Author (Disable | Name | Prefix and Name), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Post Author will be disabled.
    • 2px: Name - Post Author Name will be enabled.
    • 3px: Prefix and Author - Post Author Prefix and Post Author Name will be enabled.
  5. Click the Save button (diskette icon) in the lower right corner.
Information:
  • Especially for the Posts Author setting with a value of 3px (Prefix and Name). You can also set the Post Author Prefix text by editing it via the Blog Posts Configuration in the Author Format input.
  • This setting will work if you have set Show author and set the text on Author format input in Blog Posts Configuration.

Posts Timestamp

This setting is useful for show or hide the publish date and update date of the post on index pages. Here are some steps to customize it:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the Customize button.
  3. Click Advanced Dropdown, click Default Dropdown and Select Index Options.
  4. Look for the Slider setting named Posts Timestamp (Disable | Published | Published and Updated), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Post Timestamp will be disabled.
    • 2px: Published - Post Published Timestamp will be enabled.
    • 3px: Published and Updated - Post Published and Updated Timestamp will be enabled.
  5. Click the Save button (diskette icon) in the lower right corner.
Information:
  • This setting will have no effect if you don't enable the Show publish time setting in the Blog Post Configuration.
  • The post update date will only appear automatically if you have edited an old post.
  • Updated Timestamp will only appear on the desktop screen.

Posts Timestamp Prefix

This setting is useful for enabling or disabling Prefix (Text before Pubish date). Here are some steps to customize it:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click Advanced Dropdown, click Default Dropdown and Select Index Options.
  3. Look for the Slider setting named Posts Timestamp Prefix (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Timestamp Prefix will be disabled.
    • 2px: Enable - Timestamp Prefix will be enabled.
  4. Click the Save button (diskette icon) in the lower right corner.
Information:
  • This setting will work if you have set Show publish time and set the text on Publish time prefix input in Blog Posts Configuration and set the Posts Timestamp to 2px (Published) or 3px (Published and Updated).
  • Posts Timestamp Prefix will only appear on the desktop screen.

Posts Sharer

This setting is useful for enabling or disabling of the share button on the index pages. Here are some steps to customize it:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click Advanced Dropdown, click Default Dropdown and Select Index Options.
  3. Look for the Slider setting named Posts Sharer (Disable | Visible on Hover | Visible), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Share Button is disabled.
    • 2px: Visible on Hover - Share Button will be visible when hovered.
    • 3px: Visible - Share Button always visible.
  4. Click the Save button (diskette icon) in the lower right corner.
Information:
  • This setting will have no effect if you don't enable the Show share buttons setting in the Blog Posts Configuration.
  • The Posts Sharer will only appear on the desktop screen.

Posts Summary

This setting is useful for enabling or disabling the summary of posts on the index page. Here are some steps to customize it:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click Advanced Dropdown, click Default Dropdown and Select Index Options.
  3. Look for the Slider setting named Posts Summary (Disable | Desktop Only | Desktop and Mobile), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Post Summary is disabled.
    • 2px: Desktop Only - Post Summary will be enabled and only visible on Desktop Screen.
    • 3px: Desktop and Mobile - Post Summary will be enabled and will be visible on both Desktop and Mobile Screen.
  4. Click the Save button (diskette icon) in the lower right corner.

Posts Thumbnail Resolution

This setting is useful for adjusting the resolution of images on Index pages. Here are some steps to customize it:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click Advanced Dropdown, click Default Dropdown and Select Index Options.
  3. Look for the Slider setting named Posts Thumbnail Resolution (Low | Medium | High), drag the slider right or left. Here is the explanation:
    • 1px: Low - Low Resolution Post Thumbnails (Recommended).
    • 2px: Medium - Medium Resolution Post Thumbnails.
    • 3px: High - High Resolution Post Thumbnails.
  4. Click the Save button (diskette icon) in the lower right corner.
This feature is only available in the Materia X2 version 3.8 and above.
To maintain the performance of the Blog/Website, we recommend using Low Resolution.

Posts Thumbnail

This setting is useful for enabling or disabling the post image or thumbnail on the index pages. Here are some steps to customize it:

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

Posts Thumbnail Corner Radius

This setting is useful for setting the rounded corner radius for the Posts Thumbnail. Here are some steps to customize and some explanations:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
  4. Look for the Option named Posts Thumbnail Corner Radius, drag the slider right or left until you find the corner radius you want.
  5. Click the Save button (diskette icon) in the lower right corner.
This setting will have no effect if you set the Posts Thumbnail setting to 1px (Disable).

Posts Jumplink

This setting is useful for enabling or disabling the post jumplink on the index pages. Here are some steps to customize it:

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

You can set Jumplink text by editing it via Blog Post Configuration in Post page link text.

Posts Comment Link

This setting is useful for enabling or disabling the comment link on the index pages. Here are some steps to customize it:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
  4. Look for the Slider setting named Posts Comment Link (Disable | Comment Link | Icon and Comment Link), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Post Comment Link is disabled.
    • 2px: Comment Link - Post Comment Link is enabled without Icon.
    • 3px: Icon and Comment Link - Post Comment Link is enabled with icon.
  5. Click the Save button (diskette icon) in the lower right corner.
This setting will have no effect if you don't enable the Show comment count setting in the Blog Posts Configuration.

Posts Pagination Style

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

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
  4. Look for the Slider setting named Posts Pagination Style (Default | Raised | Unelevated | Outline), drag the slider right or left. Here is the explanation:
    • 1px: Default - Default Pagination Button.
    • 2px: Raised - Normal Pagination Button with shadow.
    • 3px: Unelevated - Normal Pagination Button without shadow.
    • 4px: Outline - Outlined Pagination Button.
  5. Click the Save button (diskette icon) in the lower right corner.

Posts FAB Position

This setting is useful for changing the position of the Floating Action Button (FAB) especially on Index pages. If you want to customize it, you can follow these steps:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown and Select Index Options.
  4. Look for the Slider setting named Posts FAB Position (Left | Center | Right), drag the slider right or left. Here is the explanation:
    • 1px: Left - The FAB position will moved to the left side (In RTL mode, it will moved to the right side).
    • 2px: Center - The FAB position will moved to the center of screen.
    • 3px: Right - The FAB position will moved to the right side (In RTL mode, it will moved to the left side).
  5. Click the Save button (diskette icon) in the lower right corner.
This feature is only available in the Materia X2 version 3.7 and above.
You can also set the Rounded Corner Radius, Bottom Spacing and Left/Right Spacing for the Floating Action Button (FAB), please check the documentation on the Configuring Default Options and Advanced Settings page.

Color Settings for Index Pages

There are several color settings for the Index Pages that can be customized, namely:

  • Posts Recent Headline Title Color - To set Posts Recent Headline Title color.
  • Posts Recent Headline Border Color - To set Posts Recent Headline Border Bottom color.
  • Posts Recent Headline Indicator Color - To set Posts Recent Headline Indicator color.
  • Posts Edge Border Color - To set Posts Edge Border color for each post item.
  • Posts Edge Shadow Color - To set Posts Edge Shadow color for each post item.
  • Posts Background Color - To set Background color for each post item.
  • Posts Label Color - To set Label and its icon color.
  • Posts Label Hover Color - To set Label and its icon color when hovered.
  • Posts Title Color - To set Post title color.
  • Posts Title Hover Color - To set Post title color when hovered.
  • Posts Meta Color - To set Meta text color (Author, Published and Updated Date and Share Button).
  • Posts Summary Color - To set Summary text color.
  • Posts Jumplink Color - To set Jumplink text color.
  • Posts Comment Link Color - To set Comment link color.
  • Posts Pagination Color - To set Pagination Button color/background color.
Information:

Here are some steps to customize it:

  1. Go to Blogger Dashboard and select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown and Select Index 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 Index Pages (Multiple Items) 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!
تعليقات
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]
Comment Poster
[quote] can i get this for free [/quote]
Replied
Sorry, Materia X2 is a Premium (Paid) theme