production

Theme62
Docs Sign In Sign Up
Dynamic Shortcode Guide
Theme62.com

Table of Contents
Dynamic Shortcode Guide

Dynamic shortcodes are customizable shortcodes, you can freely create shortcodes as you wish, dynamic shortcodes use square brackets [...] as their identification.

An example of a use case for dynamic shortcodes, let's say you have a very long code that is used frequently, instead of using a very long code, you can simply use a dynamic shortcode to make it more concise and fast.

Dynamic shortcodes can be applied to both widgets and posts, except in the dynamic shortcode settings area at the bottom of Blogger Layout.

How to add dynamic shortcode

  1. Go to Blogger.com -> Layout
  2. In the Shortcode settings area, add a new widget
  3. Select HTML/JavaScript
  4. Title :
    Fill in the name of the shortcode (no need for square brackets)
    Content :
    Fill in your code

To get started, let's take a simple example of creating a button using a dynamic shortcode.

Title Content
btn 
	<button>Download</button>

To use the shortcode, use [btn/] it will appear as follows:

	<button>Download</button>

Attribute and Body

To be more dynamic, you can apply attributes and body, identifying them as follows:

Attribute : #{attribute_name}
Body : #{}

Except on the Blade Codes, write the attribute name directly attribute_name

Example

Title Content
btn 
	<a class="button #{style}" href="#{url}">
    #{}
</a>

Shortcode [btn style="rounded" url="//example.com"]Example[/btn] will produce the following :

	<a class="button rounded" href="//example.com">
    Example
</a>

Blade Codes

We also provide a Blade Codes feature similar to the Laravel Template Engine, used to make building complex code easier.

Blade Codes Guide
Blade Codes Guide
https://theme62.com/en/docs/blade

Ready to use shortcode

Here are ready-made shortcodes created by us.

Youtube

Used to install youtube videos with lazyload feature.

Title Content
youtube 
	<iframe width="560" height="315" src="https://www.youtube.com/embed/#{id}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Attribute

Shortcode attribute

id Fill with youtube video ID.
Example: https://www.youtube.com/watch?v=9wMNHyTe03s
Then the ID is 9wMNHyTe03s

Example

Shortcode [youtube id="9wMNHyTe03s"/] will produce the following :

	<iframe width="560" height="315" src="https://www.youtube.com/embed/9wMNHyTe03s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Button

Used to create button-style links.

Title Content
button 
	<a class="button #{style}" href="#{url}">
    #{}
</a>

Attribute

Shortcode attribute

style Fill with button styles, such as: rounded, outlined, icon-download.
url Fill with url.

Example

Shortcode [button style="rounded" url="//example.com"]Example[/button] will produce the following :

	<a class="button rounded" href="//example.com">
    Example
</a>

Download File

Used to create a file download button.

Title Content
download 
	<div class="box-download">
    <div>
        #{ext}
    </div>
    <div>
        <span>#{file}</span>
        <span>#{size}</span>
    </div>
    <div>
        <a href="#{url}" class="button icon-download">Download</a>
    </div>
</div>

Attribute

Shortcode attribute

ext Fill with file extension.
file Fill with file name.
size Fill with file size.
url Fill with file download url.

Example

Shortcode [download file="template.zip" size="150KB" ext="zip" url="#"/] will produce the following :

	<div class="box-download">
    <div>
        zip
    </div>
    <div>
        <span>template.zip</span>
        <span>150KB</span>
    </div>
    <div>
        <a href="#" class="button icon-download">Download</a>
    </div>
</div>

Alert

Used to create alert messages.

Title Content
alert 
	@var type = "info"
<div class="alert alert-#{type}">
    #{}
</div>

Attribute

Shortcode attribute

type Fill in the type of alert, such as: success, info, warning, error.
The default setting contains "info".

Example

Shortcode [alert]Lorem Ipsum is simply dummy text[/alert] will produce the following :

	<div class="alert alert-info">
    Lorem Ipsum is simply dummy text
</div>

Shortcode [alert type="warning"]Lorem Ipsum is simply dummy text[/alert] will produce the following :

	<div class="alert alert-warning">
    Lorem Ipsum is simply dummy text
</div>

Feed Posts

Used to load posts from feed.

You can use this to create related posts (read also) in the middle of posts by applying a static shortcode {post:before} {post:middle} {post:after}

Insert to Post Plugin Guide
Insert to Post Plugin Guide
https://theme62.com/en/docs/insert-to-post-plugin
Title Content
feedposts 
	@var max = 3
<div class="list-container">
    @if text
    <div class="list-header">
        <div class="list-header-label">#{text}</div>
    </div>
    @endif
    <div class="list-content">
        <ul class="FeedPosts">
            @if label
            <div class="data-labels notranslate" hidden>#{label}</div>
            @endif
            <div class="data-maxposts notranslate" hidden>#{max}</div>
            <div class="data-content notranslate" hidden>
                <li>
                    <a href="##{url}">##{title}</a>
                </li>
            </div>
        </ul>
    </div>
</div>

Attribute

Shortcode attribute

text Fill it with feedposts headers, such as: Read Also, Related Posts.
The text attribute is not required, you can delete it if it is not used.
label Fill in the label (case sensitive), the post will only appear according to the specified label.
If you want multiple labels, separate them with , like: Tips,Technology
The label attribute is not mandatory, you can delete it if it is not used, it will appear according to the current label.
max Fill with the maximum posts that appear.
The default setting contains "3".

Example

Shortcode [feedposts text="Read Also"/] will produce the following :

	<div class="list-container">
    <div class="list-header">
        <div class="list-header-label">Read Also</div>
    </div>
    <div class="list-content">
        <ul class="FeedPosts">
            <div class="data-maxposts notranslate" hidden>3</div>
            <div class="data-content notranslate" hidden>
                <li>
                    <a href="#{url}">#{title}</a>
                </li>
            </div>
        </ul>
    </div>
</div>