Post Shortcodes in Prime UI Blogger Theme

Buttons

The "Buttons" section in the Prime Theme Documentation provides various button styles that can be incorporated into your posts. Below is a summary of the available buttons along with their corresponding code snippets:

You can create a button using <button> tag. We use .global-button to style our buttons.

Default Button

<button class="global-button">Default Button</button>

Download Button

<a class="button1" href="#" rel="nofollow noopener noreferrer">
  <i class="Icon dl"></i> Download File
</a>

Demo Button

<a class="button2" href="#" rel="nofollow noopener noreferrer">
  <i class="Icon demo"></i> Live Demo
</a>

Two Buttons

<div class="button-container" style="text-align: left;">
  <a class="button2" href="#" rel="nofollow noopener noreferrer">
    <i class="Icon demo"></i> Demo
  </a>
  <a class="button1" href="#" rel="nofollow noopener noreferrer">
    <i class="Icon dl"></i> Download File
  </a>
</div>

Youtube Button

<a class="button2" href="#" rel="nofollow noopener noreferrer external"
   style="background: rgb(214, 0, 0); border: 1px solid rgb(214, 0, 0);" target="_blank">
  <svg class="feather feather-youtube" fill="none" stroke-linecap="round"
       stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
    <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2
             A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88
             0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path>
    <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>
  </svg>
  Watch on YouTube
</a>

Cards in the Prime UI

Prime UI offers two types of cards:

Blog Cards
Product Cards

Blog Cards

You can manually Insert Blog card in your article.


<div class="tb-card bk-card no-lightense" style="text-align: left;">
  <a class="bk-container" href="https://www.notedup.in/2024/11/gsoc-roadmap.html" rel="nofollow noopener noreferrer external">
    <div class="bk-content">
      <div class="bk-title">
        GSOC 2025 Roadmap - Notedup.in
      </div>
      <div class="bk-description">
        Plan your path to success with our GSoC Roadmap 2025. Learn how to prepare, select projects, and ace your application as a student contributor.
      </div>
      <div class="bk-metadata">
        <img alt="www.notedup.in" class="lazy bk-icon no-lightense" data-src="//www.google.com/s2/favicons?domain=https://www.notedup.in/2024/11/gsoc-roadmap.html" loading="lazy" src="//www.google.com/s2/favicons?domain=https://www.notedup.in/2024/11/gsoc-roadmap.html" />
        <span class="bk-link">www.notedup.in</span>
      </div>
    </div>
    <div class="bk-thumbnail">
      <img alt="GSOC 2025 Roadmap" class="lazy no-lightense loaded" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbFPOImzTeJBeo-8z4yvmo4GsgMI7IcH91x16H9_ts6O7fgZz2j_hGOz7xPg2Ydi9QP6opRtVXc82vYz3KDmN2mNqqp3jf2K6U2xuRWusUgh0TffRIKntno7SPRXIHLYYxAmjgyrIk8_0n2PicPLWYe76KxPDPSEO1hNDLXEMwb2u_qnhBAaxrBrDhJg/w640-h360-rw/gsoc.webp" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbFPOImzTeJBeo-8z4yvmo4GsgMI7IcH91x16H9_ts6O7fgZz2j_hGOz7xPg2Ydi9QP6opRtVXc82vYz3KDmN2mNqqp3jf2K6U2xuRWusUgh0TffRIKntno7SPRXIHLYYxAmjgyrIk8_0n2PicPLWYe76KxPDPSEO1hNDLXEMwb2u_qnhBAaxrBrDhJg/w640-h360-rw/gsoc.webp" />
    </div>
  </a>
</div>

Product Cards

You can showcase your products using this code


<div class="tb-card pd-card no-lightense" style="text-align: left;">
  <div class="pd-card-container">
    <img alt="Writer - Minimal Personal Blogger theme" class="pd-card-image lazy loaded unblur no-lightense gpglc" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCZjqYNa-ArzLt1_Q3apLvSqo771PWk5ELFm_JUfDTFPkTXH2A_RIOV2FK1PdXnnVWUgXexkATSXu6Acc6wXseczQi7FLby90uzzorgLbDIzF_HB90dYL04cVV_QERRQrM8N2Au_ivZYIext4Jm-MoDIGdpibi-A9E5BljXhanqnFkiE0PtRi1YSh6xNwV/s590/writer%20premium%20blogger%20theme.jpg" lazied="" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCZjqYNa-ArzLt1_Q3apLvSqo771PWk5ELFm_JUfDTFPkTXH2A_RIOV2FK1PdXnnVWUgXexkATSXu6Acc6wXseczQi7FLby90uzzorgLbDIzF_HB90dYL04cVV_QERRQrM8N2Au_ivZYIext4Jm-MoDIGdpibi-A9E5BljXhanqnFkiE0PtRi1YSh6xNwV/s590/writer%20premium%20blogger%20theme.jpg" title="Writer - Minimal Personal Blogger theme" />
    <div class="pd-card-title-container">
      <h4 class="pd-card-title" id="writer">Writer</h4>
    </div>
    <div class="pd-card-rating">
      <span class="pd-card-rating-active pd-card-rating-star"><span class="star"></span></span>
      <span class="pd-card-rating-active pd-card-rating-star"><span class="star"></span></span>
      <span class="pd-card-rating-active pd-card-rating-star"><span class="star"></span></span>
      <span class="pd-card-rating-active pd-card-rating-star"><span class="star"></span></span>
      <span class="pd-card-rating-active pd-card-rating-star"><span class="star"></span></span>
    </div>
    <div class="pd-card-description">
      <p>
        Writer is a minimalist personal blog theme for Blogger. It is responsive
        and loads very fast. The theme is designed in a way that it doesn’t
        require posts to have images in them. It works perfectly well without
        images.
      </p>
    </div>
    <a class="pd-card-button" href="https://themeforest.net/item/writer-minimal-personal-blogger-theme/33643939" rel="noopener noreferrer nofollow" target="_blank">
      <span>Download Theme</span>
    </a>
  </div>
</div>

Toggles

You can create a toggle or accordian using the below code


<div class="tb-toggle" toggle-state="close">
  <div class="toggle-title">
    <h4 id="why-to-use-prime-as-your-next-theme-">
      <b>Why to use Prime UI as your next theme?</b>
    </h4>
    <button aria-label="Toggle icon" class="toggle-icon" role="button">
      <svg
        class="arrow"
        fill="none"
        stroke-width="1.5"
        stroke="currentColor"
        viewbox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="m19.5 8.25-7.5 7.5-7.5-7.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </button>
  </div>
  <div class="toggle-content">
    <p>
      Prime UI is a highly optimized Blogger theme that comes with in-built plugins
      and a beautiful layout. Your content shines with our theme.
    </p>
  </div>
</div>

Blockquotes

Prime UI offers two designs for the blockquotes

Default


<blockquote> This is a default blockquote.</blockquote>

Second Design


<blockquote class='s-1'> This is another design of blockquote.</blockquote>

Tables

Prime UI offers two types of tables

You can create a table using <table> tag


<table>
    <!-- [ Table Headings ] -->
    <thead>
        <tr>
            <th>Heading#1</th>
            <th>Heading#2</th>
            <th>Heading#3</th>
            <th>Heading#4</th>
            <th>Heading#5</th>
            <th>Heading#6</th>
            <th>Heading#7</th>
            <th>Heading#8</th>
        </tr>
    </thead>
    <tbody>
        <!-- [ Table rows: row#1 ] -->  
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <!-- [ Table rows: row#2 ] -->   
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <!-- [ Add more Table rows ] -->   
    </tbody>
</table>

Responsive Table

You can create a responsive table by wrapping <table> tag within a div with class responsive-table.


<div class='responsive-table'>    
    <table>
        <!-- [ Table Headings ] -->
        <thead>
            <tr>
                <th>Heading#1</th>
                <th>Heading#2</th>
                <th>Heading#3</th>
                <th>Heading#4</th>
                <th>Heading#5</th>
                <th>Heading#6</th>
                <th>Heading#7</th>
                <th>Heading#8</th>
            </tr>
        </thead>
        <tbody>
            <!-- [ Table rows: row#1 ] -->  
            <tr>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
            <!-- [ Table rows: row#2 ] -->   
            <tr>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
            <!-- [ Add more Table rows ] -->   
        </tbody>
    </table>
</div>

Lazy Loading Youtube


<div class="lazyYt" data-embed="#">
    <div class="play">
        <svg viewBox="0 0 213.7 213.7">
            <polygon class="t" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon>
            <circle class="c" cx="106.8" cy="106.8" r="103.3"></circle>
        </svg>
    </div>
</div>

How to find code for data-embed?

Lets say you have a youtube link https://www.youtube.com/watch?v=-Ry3Lopyzpg. The value -Ry3Lopyzpg is your data-embed value.

Click To Tweet

Add this code to your post editor and a click to tweet box will appear.


<div class="click-to-tweet">
    <a onclick='window.open("https://twitter.com/share?url=" + 
        document.querySelector("link[rel='canonical']").href + "&text=" + 
        encodeURIComponent(this.innerText) + " - by: @ImRatherAadil", 
        "sharer", "toolbar=0, status=0, width=626, height=436"); return false;' 
        rel="nofollow" 
        title="Share to Twitter">
        Creative Blogger Template Designs For Your Blog #blogthemes #templates #creativedesigns
    </a>
</div>

Images

Images are crucial part of web contents. Images can be loaded normally and they cover set width and height. However, you can make images full width and cover extra width.

It is important to know the first image of your post is featured image and won't be displayed on post body.

Big Images

They cover extra width compared to your post body and extend to left and right.


<div class='big-image'>
    <img src='' />
</div>

Full Images

They cover full body width.


<div class='full-image'>
    <img src='' />
</div>

Images Gallery

You can create a beautiful, fully responsive and lightbox effect image gallery with following code:


<div class="tb-gallery">
 
  <!-- [ Row#1 ] -->
    <div class="tb-rows">
      <!-- [ Row#1 - Image#1 ] -->
      <div class="tb-image">
        <img alt="" height="1300" src="" width="2500" />
      </div>
      <!-- [ Row#1 - Image#2 ] -->
      <div class="tb-image">
        <img alt="" height="600px" src="" width="1200px" />
      </div>
       <!-- [ Row#1 - More images ] -->
    </div>   
 
    <!-- [ Row#2 ] -->
    <div class="tb-rows">
      <!-- [ Row#2 - Image#1 ] -->
      <div class="tb-image">
        <img alt="" height="1300" src="" width="2500px" />
      </div>
      <!-- [ Row#2 - Image#2 ] -->
      <div class="tb-image">
        <img alt="" height="1300px" src="" width="2500px" />
      </div>
       <!-- [ Row#2 - More images ] -->
    </div>   
 
   <!-- [ More Rows ] -->
 
</div>

Lightbox image gallery supports lazy loading too. You can add a class lazy and data-src attribute.

It is a must to specify proper width and height values of tag for our image gallery to function properly.

No comments:

Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

To insert an image, add [img]image_link [/img]
To insert a block of code, add [pre] parsed_code[/pre]
To insert a link, add [link=your_link] link_text[/link]
To insert a quote, add [quote]quote_text [/quote]
To insert a code, add [code]parsed_code [/code]