Dynamic Shortcode Plugin: Documentation and Usage Guide

Dynamic shortcodes are a way to create your own shortcodes and use them very easily with a small piece of code. Many of you may have seen systems on WordPress or other blogs where shortcodes can be used.

For your convenience, we have created a dynamic shortcode plugin for Blogger. From now on, you can create your own shortcodes as per your needs and use them in your posts.

Today I will discuss this wonderful plugin with you and show you how to create shortcodes. So keep reading this documentary post carefully.

What can be done with the Dynamic Shortcode plugin?

Dynamic Shortcodes plugin can be used to shorten any large code. For example, suppose you have created a stylish download button that has a lot of code but you don't want to write the code every time. In that case, Dynamic Shortcodes plugin can come in handy.

If you want to embed YouTube videos on your blog, you will have to write a lot of code. In that case, you can use the Dynamic Shortcode plugin. Below is an example of what can be done.

How to setup the Dynamic Shortcodes plugin

To setup the dynamic shortcode plugin, you need to go to the blogger layout options. There you will see a section called Dynamic shortcode at the end. Here you need to setup the dynamic codes.

Follow the steps below to create a dynamic shortcode:

First, from the Blogger layout, look at the bottom and there is a section called Dynamic Shortcode. Then click on Add a gadget.

Then many gadgets will appear, from here select HTML/Javascript.

Here you will be shown a box like the one below. Here in the title you will give the name of your shortcode and in the content you will give your detailed code.

Then save the gadget. Then you can easily use your shortcode in any post.

Some example code of shortcodes

Below are some example shortcodes that you can use on your blog. In addition to the examples, you can also create your own shortcodes.

Download card shortcode

With the download card shortcode, you can easily create a download button on your blog post along with displaying the file name, file size, and file format. I am giving you the code to create this shortcut very easily. You can copy the code and paste it into your HTML/Javascript gadget.

<div class="box-download">
  <div class="download-info">
    <div class="icon">#{{ext}}</div>
    <div class="name-size">
      <div class="name">#{{file}}</div>
      <div class="size">#{{size}}</div>
    </div>
  </div>
  <div class="download-btn">
    <a href="#{{link}}">Download</a>
  </div>
</div>

In the HTML/Javascript gadget, enter Download in the Title and paste the above code in the Content. Then save the gadget.

How to write the postcode to use the postcode shortcode

[download ext="XML" file="Template.xml" size="50KB" link="#your-file-link"][/download]

Note above: All the #{} in the main code are in the shortcode and are in the attribute, and the download title provided by the gadget is in the shortcode and is tagged.

The code will output something like this:

<div class="box-download">
  <div class="download-info">
    <div class="icon">XML</div>
    <div class="name-size">
      <div class="name">Template.xml</div>
      <div class="size">50KB</div>
    </div>
  </div>
  <div class="download-btn">
    <a href="#your-file-link">Download</a>
  </div>
</div>

Create an alert box

Above I showed you how to create a shortcode for the download box, now I will show you how to create a shortcode for the alert box. For that, you need to take a new HTML gadget, put alert in the Title and put the following code in the content.

<p class="alert alert-#{{name}}">#{{}}</p>

How to write a shortcode:

[alert name="info"]This is an info alert box shortcode to show users how to use it.[/alert]
[alert name="warning"]This is an info alert box shortcode to show users how to use it.[/alert]
[alert name="success"]This is an info alert box shortcode to show users how to use it.[/alert]
[alert name="error"]This is an info alert box shortcode to show users how to use it.[/alert]

For example, the code will output:

<p class="alert alert-info">This is an info alert box shortcode to show users how to use it.</p>
<p class="alert alert-warning">This is an warning alert box shortcode to show users how to use it.</p>
<p class="alert alert-success">This is an success alert box shortcode to show users how to use it.</p>
<p class="alert alert-error">This is an error alert box shortcode to show users how to use it.</p>

This is an info alert box shortcode to show users how to use it.

This is an warning alert box shortcode to show users how to use it.

This is a success alert box shortcode to show users how to use it.

This is an error alert box shortcode to show users how to use it.

Post card shortcode

You can easily create a postcard using a shortcode. The code is given below. Give the gadget title postcard or any other name of your choice. Whatever you give will be the tag of the shortcode.

<div class='post-card'>
  <div class='card-container'>
    <div class='title-date'>
      <a href='#{{link}}'>
        <div class='title'>#{{title}}</div>
      </a>
      <div class='date'>#{{date}}</div>
    </div>
    <div class='thumbnail'>
      <a href='#{{link}}'>
        <img alt='#{{title}}' class='lazy' src='#{{img}}' />
      </a>
    </div>
  </div>
</div>

[postcard title="Dynamic shortcode plugin guide and code example" link="#post-link" date="21 February, 2025" img="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh3GNnRaQEgzw1y9m9KKQX6fdDZeCvrhJWRAKy0MS5B2d3ql3uVln8rR7MfzQeRGqzRNDjzZUCm7gjb2uVSflGfKGgdLqNbzWvjiJzM9QOfrrWmbY9zDrkK-AhiRD5Qf5MMFlV2p6AcqPuNIH2LGEBCYZL86e38nFrRX9jwX_JMIA2HaB2WjbKD9larn0/w800-h457-c/freepik__the-style-is-candid-image-photography-with-natural__55294.png"][/postcard]

The code will output something like:

<div class="post-card">
  <div class="card-container">
    <div class="title-date">
      <a href="#post-link">
        <div class="title">Dynamic shortcode plugin guide and code example</div>
      </a>
      <div class="date">21 February, 2025</div>
    </div>
    <div class="thumbnail">
      <a href="#post-link">
        <img alt="Dynamic shortcode plugin guide and code example" class="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh3GNnRaQEgzw1y9m9KKQX6fdDZeCvrhJWRAKy0MS5B2d3ql3uVln8rR7MfzQeRGqzRNDjzZUCm7gjb2uVSflGfKGgdLqNbzWvjiJzM9QOfrrWmbY9zDrkK-AhiRD5Qf5MMFlV2p6AcqPuNIH2LGEBCYZL86e38nFrRX9jwX_JMIA2HaB2WjbKD9larn0/w800-h457-c/freepik__the-style-is-candid-image-photography-with-natural__55294.png">
      </a>
    </div>
  </div>
</div>

Dynamic shortcode plugin guide and code example

February 21, 2025

Shortcode for creating buttons

If you want, you can create a shortcode to create the button. Write the code to create the button of your choice in advance and save it in a gadget, and later you can show the button in the post with just the shortcode.

Below is a small example of creating a button, you can create it yourself by looking at this example. Below I will also show you how to shortcode a single tag and use it without the closing tag.

Put the following code in the gadget or write your own code. Name the gadget btn or whatever you want. You will have to call the shortcode with the name you give.

<button>Sample Button</button>

Below is how to write the above code in a post.

[btn/]

If you want to create a more advanced button and include a hyperlink, you can write code like the following.

<a href="#{{href}}">
  <button class="#{{class}}">#{{}}</button>
</a>

Below is how to write the above code in a post.

[btn href="#your-link-here" class="my-btn"]Sample Button[/btn]

Apart from the ones I have shown you today, you can create new shortcodes yourself. Due to lack of time, I may not be able to show you everything completely correctly. If you encounter any problems using shortcodes, you can comment and let us know.