Post Shortcodes
Cards

Cards

Prime offers 2 types of cards:

  1. Blog Cards
  2. Product Cards

Blog Cards

You can manually insert a blog card in your post.

<div class="tb-card bk-card" style="text-align: left;">
  <a class="bk-container" href="https://www.twistblogg.com/2023/10/sort-blogger-comments-newest-to-oldest.html" rel="nofollow noopener noreferrer external">
    <div class="bk-content">
      <div class="bk-title">Reverse the order of Comments in Blogger - Display Newest to Oldest - TwistBlogg</div>
      <div class="bk-description">By default, Blogger displays older comments first and new ones at the end. Let us reverse the order of blogger comments - show newest to oldest.</div>
      <div class="bk-metadata">
        <img alt="www.twistblogg.com" class="lazy bk-icon loaded gpglc" data-src="//www.google.com/s2/favicons?domain=https://www.twistblogg.com/2023/10/sort-blogger-comments-newest-to-oldest.html" loading="lazy" src="//www.google.com/s2/favicons?domain=https://www.twistblogg.com/2023/10/sort-blogger-comments-newest-to-oldest.html">
        <span class="bk-link">www.twistblogg.com</span>
      </div>
    </div>
    <div class="bk-thumbnail">
      <img alt="Reverse the order of Comments in Blogger - Display Newest to Oldest - TwistBlogg - Premium Blogger Tutorials and Widgets" class="lazy loaded gpglc" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUf3XCtFrTtbbvRPkkJgm9T4llEPEpaMqVvE__NpFGerEsbELhKKSzsno16Bw4J6oG2ndz4ZXMCHnKaAcfqyjC_m-7-1NW4jon9EYlJntTL4AkLKC8v7LxWMQZy9G0pP7_4j5iCGEpaEyw-pWebBZvHS9vBQvMtrIVN8m7aiW7w_9bMSBXaI9szU4oeSHx/w0/display%20newest%20to%20oldest%20comments%20in%20blogger(1).jpg" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUf3XCtFrTtbbvRPkkJgm9T4llEPEpaMqVvE__NpFGerEsbELhKKSzsno16Bw4J6oG2ndz4ZXMCHnKaAcfqyjC_m-7-1NW4jon9EYlJntTL4AkLKC8v7LxWMQZy9G0pP7_4j5iCGEpaEyw-pWebBZvHS9vBQvMtrIVN8m7aiW7w_9bMSBXaI9szU4oeSHx/w0/display%20newest%20to%20oldest%20comments%20in%20blogger(1).jpg">
    </div>
  </a>
</div>

Or, you can follow this article to auto generate blog cards for you (opens in a new tab).

Product Cards

You can showcase your products with this plugin.

Product Card
<div class="tb-card pd-card" style="text-align: left;">
  <div class="pd-card-container">
    <img alt="Prime - Bold Blogger theme" class="pd-card-image lazy" data-src="#" title="Prime - Bold Blogger theme">
    <div class="pd-card-title-container">
      <h4 class="pd-card-title" id="writer">Prime</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>Prime 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="#" rel="noopener noreferrer nofollow" target="_blank">
      <span>Download Theme</span>
    </a>
  </div>
</div>
ButtonsImages