PostCode-2 Material x2

A shortcode feature from Materia X2 that can make it easier to make posts. Thanks to this feature, you don't need to write complex HTML codes to customize web pages and blog content.

Although Materia X2 has this feature, we recommend against using it directly. Don't worry, you can still use this Post Shortcode by converting it via the Shortcode Playground page.

Before using this Post Shortcode, make sure you have enabled the Post Shortcode feature. Documentation can be seen on the Features page.

Table of Contents

• Buttons
  • Default Button
  • Rounded Button
  • Button with Icon
• Alerts
  • Default Alert
  • Outline Alert
• YouTube Embed + Lazyload
• Contact Form

Buttons

Buttons communicate an action a user can take. They are typically placed throughout UI, in places like dialogs, forms, cards, and toolbars.

This shortcode allows you to add buttons:

Default Button

Default Button Outline Button Unelevated Button Raised Button

Rounded Button

Default Rounded Button Outline Rounded Button Unelevated Rounded Button Raised Rounded Button

Button with Icon

Default Button Outline Button Unelevated Button Raised ButtonDefault Rounded Button Outline Rounded Button Unelevated Rounded Button Raised Rounded Button

Default Shortcode:

[button style= link=Button Link URL text=Button Text]

Attributes:

• style - Button style: empty, outline, unelevated, raised, rounded, outline rounded, unelevated rounded and raised rounded .

The shortcode used in the example above:

[button style= link=# text=Default Button]
[button style=outline link=# text=Outline Button]
[button style=unelevated link=# text=Unelevated Button]
[button style=raised link=# text=Raised Button]

[button style=rounded link=# text=Default Rounded Button]
[button style=outline rounded link=# text=Outline Rounded Button]
[button style=unelevated rounded link=# text=Unelevated Rounded Button]
[button style=raised rounded  link=# text=Raised Rounded Button]

Information:

• By default, the Shortcode Button will have a target='_blank' attribute (Will open in a new tab) and a rel='nofollow noopener noreferer' attribute. So, don't worry if you use external links.
• Unfortunately, for now, you can't add an icon to it (if you use a shortcode). Of course you can If you create buttons manually (with HTML tags).
• You can try it directly on the Shortcode Playground page.

Alerts

This shortcode allows you to add alerts:

Default Alert

Alert message. This is a  sample link.

Warning message. This is a  sample link.

Error message. This is a  sample link.

Info message. This is a  sample link.

Success message. This is a  sample link.

Outline Alert

Outline Alert message. This is a  sample link.

Outline Warning message. This is a  sample link.

Outline Error message. This is a  sample link.

Outline Info message. This is a  sample link.

Outline Success message. This is a  sample link.

Default Shortcode:

[alert style= text=Insert your content here]

Attributes:

• style - Alert style: empty, alert_warning, alert_error, alert_info and alert_success. If you want to create an Alert Outline, just add an alert_outline. Example: alert_warning alert_outline.
• text - Alert content/text.

The shortcode used in the example above:

[alert style= text=Alert message. This is a <a href="#">sample link</a>.]
[alert style=alert_warning text=Warning message. This is a <a href="#">sample link</a>.]
[alert style=alert_warning text=Error message. This is a <a href="#">sample link</a>.]
[alert style=alert_warning text=Info message. This is a <a href="#">sample link</a>.]
[alert style=alert_warning text=Success message. This is a <a href="#">sample link</a>.]

[alert style=alert_outline text=Alert message. This is a <a href="#">sample link</a>.]
[alert style=alert_outline alert_warning text=Warning message. This is a <a href="#">sample link</a>.]
[alert style=alert_outline alert_error text=Error message. This is a <a href="#">sample link</a>.]
[alert style=alert_outline alert_info text=Info message. This is a <a href="#">sample link</a>]
[alert style=alert_outline alert_success text=Success message. This is a <a href="#">sample link</a>.]

At the very least, you need to fill in the style attribute with the available values (empty, alert_warning, alert_error, alert_info or alert_success). If not, then Alert will be like a regular paragraph.

You can try it directly on the Shortcode Playground page.

YouTube Embed + Lazyload

This shortcode allows you to video from YouTube with Lazyload:

Default Shortcode:

[youtube url=youtube_url]

The shortcode used in the example above:

[youtube url=https://www.youtube.com/watch?v=Kafe4rl_S_w]

Information:

• YouTube video above will not contain an iframe, but only an image. So don't worry about your blog being slow due to the iframe loading process. The YouTube embed will only work when the user clicks the play button.
• You can try it directly on the Shortcode Playground page.

Contact Form

This shortcode allows you to add Contact Form on Page:

Name

Email

Message

Default Shortcode:

[contact-form]

Before using the Contact Form Shortcode. Make sure you have the Contact Form Widget already in the Blogger Layout.

Information:

• Materia X2 is designed as much as possible to have a standard page speed score. In fact, Blogger loads a default script called widget.js. Here, we're wrapping it so that it doesn't load when the page is rendered. So, some of the blogger's default gadgets that require this script will only work on Static pages, including the Contact Form.
• You can try it directly on the Shortcode Playground page.

Those are some steps to use Post Shortcode in the Materia X2 Theme. If you have any questions, please write them in the comments section below.

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.