Materia X2 - Post Shortcode

Buttons

This shortcode allows you to add buttons:

Default ButtonOutline ButtonUnelevated ButtonRaised Button
Default Rounded ButtonOutline Rounded ButtonUnelevated Rounded ButtonRaised 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]

• 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). If you create buttons manually (with HTML tags), of course, you can.
• You can try it directly on the Shortcode Playground page.

Alerts

This shortcode allows you to add alerts:

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

Default Shortcode:

[alert style= text=Insert your content here]

Attributes:

• style - Alert style: empty, warning, error, info and success.

The shortcode used in the example above:

[alert style= text=Alert message. This is a <a href="#">sample link</a>]
[alert style=warning text=Warning message. This is a <a href="#">sample link</a>]
[alert style=error text=Error message. This is a <a href="#">sample link</a>]
[alert style=info text=Info message. This is a <a href="#">sample link</a>]
[alert style=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, warning, error, info or 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]

• 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

Messages

Default Shortcode:

[contact-form]

• 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 blogger default gadgets that require this script will only work on Static pages.
• You can try it directly on the Shortcode Playground page.

Accordion

This shortcode allows you to add Single or Multiple Accordion (Collapsible):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus odio, vitae faucibus dui tempor in. Duis vitae luctus mi. Phasellus ultrices rhoncus lectus, non vehicula tortor sodales id.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus odio, vitae faucibus dui tempor in. Duis vitae luctus mi. Phasellus ultrices rhoncus lectus, non vehicula tortor sodales id.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus odio, vitae faucibus dui tempor in. Duis vitae luctus mi. Phasellus ultrices rhoncus lectus, non vehicula tortor sodales id.

Default Shortcode:

[accordion id=accordion_id text=Accordion Title]Accordion Content.[/accordion]

Attributes:

• id - Unique id for each Accordion. Note: Must be unique and don't use spaces.
• text - The title of the Accordion.

The shortcode used in the example above:

[accordion id=1 text=Accordion 1]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus odio, vitae faucibus dui tempor in. Duis vitae luctus mi. Phasellus ultrices rhoncus lectus, non vehicula tortor sodales id.[/accordion]

[accordion id=2 text=Accordion 1] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus odio, vitae faucibus dui tempor in. Duis vitae luctus mi. Phasellus ultrices rhoncus lectus, non vehicula tortor sodales id. [/accordion]

[accordion id=3 text=Accordion 1] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus odio, vitae faucibus dui tempor in. Duis vitae luctus mi. Phasellus ultrices rhoncus lectus, non vehicula tortor sodales id. [/accordion]

You can try it directly on the Shortcode Playground page.

Habibi

Tulis Komentar Anda

SHARE