Official Post Documentation for Probha Template

The Probha Blogger template comes packed with a variety of built-in design components to elevate the look and feel of your blog posts. Below, you will find a complete guide to these components, including live previews and the exact code you need to use them. Note: All examples shown are for demonstration purposes—feel free to swap out the text and images with your own!

Let's dive into the default styles and elements you can easily add to your articles.

Paragraph Tags

We’ve included several custom paragraph styles to help your text stand out, including Normal, Drop Cap, and Indent.

Normal Paragraph

This is a standard paragraph without any additional classes or styling. The padding and margin are applied automatically by default. Standard text written in your post editor will display like this.

Drop Cap Paragraph

A Drop Cap paragraph enlarges the very first letter of your text for a classic, editorial look. To use this format, simply add the dropcap class to your <p> tag.

For example, you can apply this style by following the structure below:

<p class="dropcap">...Some paragraph text here...</p>
<p class="dropcap">...Another paragraph text here...</p>

Indent Paragraph

An indented paragraph adds a subtle space before the first word, perfect for starting new thoughts or quoting text.

<p class="indent">...Some paragraph text here...</p>
<p class="indent">...Another paragraph text here...</p>

Buttons

Buttons are a great way to drive user action. Probha offers several visual variations—like rounded or outlined styles—so you can match the design to the specific action (like downloading, purchasing, or sharing) to instantly grab your reader's attention.

<button class="button">Download</button>
<button class="button btn--outline">Download</button>
<button class="button btn--rounded">Download</button>
<button class="button btn--rounded btn--outline">Download</button>
<button class="button btn--download">Download</button>
<button class="button btn--purchase">Purchase</button>
<button class="button btn--preview">Preview</button>
<button class="button btn--copy">Copy</button>
<button class="button btn--upload">Upload</button>
<button class="button btn--share">Share</button>
<a href="#" class="button">Download</a>

Tip: You can easily apply these button designs to standard hyperlinks by simply adding the button class to the <a> tag.

Tables

Tables are perfect for organizing data, comparing products, or listing specifications. We’ve styled the default HTML tables to look clean, modern, and easy to read on any device.

<div class="table">
<table>
  <tr>
    <th>ID</th>
    <th>Product</th>
    <th>Category</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>001</td>
    <td>Apples</td>
    <td>Fruit</td>
    <td>120</td>
    <td>$1.20</td>
  </tr>
  <tr>
    <td>002</td>
    <td>Bananas</td>
    <td>Fruit</td>
    <td>200</td>
    <td>$0.80</td>
  </tr>
  <tr>
    <td>003</td>
    <td>Carrots</td>
    <td>Vegetable</td>
    <td>150</td>
    <td>$0.60</td>
  </tr>
  <tr>
    <td>004</td>
    <td>Potatoes</td>
    <td>Vegetable</td>
    <td>300</td>
    <td>$0.40</td>
  </tr>
</table>
</div>

Codebox

If you write coding tutorials, you'll love our custom codebox. It's designed to be robust and professional, featuring automatic line numbers and a handy "click-to-copy" button for the best user experience.

You can easily display your code by wrapping it inside a <pre><code> tag. We utilize the Highlight.js JavaScript library to provide beautiful syntax highlighting automatically.

Important: Before adding HTML code to a codebox, you must escape the HTML syntax (for example, change < to <). Otherwise, the browser may try to render the code instead of safely displaying it.

<pre><code class="language-html">
<!-- Enter your code here -->
</code></pre>

You can define the specific programming language by adding a class to the <code> tag, such as class="language-html", language-css", or language-javascript". If you don't specify a language, Highlight.js will attempt to auto-detect it for you. The detected language will neatly appear in the codebox header. You can also manually set this header title by adding a data-label="Your Title" attribute to the <pre> tag.

Post and Download Cards

We’ve designed beautiful, box-style cards for your download links and internal post references. These cards instantly make your content look more professional and clickable.

Download Box

You can choose from Download, Folder, File, and Default designs. They all share the same clean structure but feature different icons to perfectly match your content.

To use these cards, simply copy and paste the code below into your post editor. You can easily update the link, title, and extra text. Feel free to swap the main wrapper class to buy, download, or folder to change the icon.

<div class="btn-card buy">
  <div class="head">
    <div class="icon"></div>
    <div class="info">
      <div class="title">Probha v1</div>
      <div class="extra">$9.9</div>
    </div>
  </div>
  <a class="action" href="#">Purchase</a>
</div>

<div class="btn-card download">
  <div class="head">
    <div class="icon"></div>
    <div class="info">
      <div class="title">Probha v1.zip</div>
      <div class="extra">40kb</div>
    </div>
  </div>
  <a class="action" href="#">Download</a>
</div>

<div class="btn-card folder">
  <div class="head">
    <div class="icon"></div>
    <div class="info">
      <div class="title">Probha v1</div>
      <div class="extra">99 files</div>
    </div>
  </div>
  <a class="action" href="#">Open</a>
</div>

<div class="btn-card">
  <div class="head">
    <div class="icon"></div>
    <div class="info">
      <div class="title">Probha v1</div>
      <div class="extra">How to setup?</div>
    </div>
  </div>
  <a class="action" href="#">Learn</a>
</div>

Post Card

For internal Blogger post links, just create a standard hyperlink and add the post-card class. The template will automatically work its magic and generate a gorgeous card featuring the post's thumbnail, title, and publish date! (Note: This automatic feature works exclusively with internal Blogger posts, not standalone pages or external sites).

<a href="#link" class="post-card">Post title here for SEO</a>

If you want to link to an external site or a standalone page, you can easily build the card manually using the structure below:

<div class="post-card">
  <div class="thumbnail">
    <a href="#link">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhExLsZ4KH8CiDsVWA_Fd3zJD6d4UIfjoLKXd--CvTK74XMA7FhqX-oxe3iFhRFUSwzid1TaUwYuhL9qewuipu5jTCmKvl22ms_tvaqAQ2gFyjWeFg4Qk2Wx11uuDg-XQ-B-ahU46ZSD1Z0tCYiZMczW7tdhc9dZVuS-N0uejBGoTGc-hbtzr5xIg2pYXg/w200-h160-rw-c/%E0%A6%AA%E0%A6%BF%E0%A6%8F%E0%A6%B8%E0%A6%8F%E0%A6%B2-%E0%A6%B8%E0%A6%AE%E0%A6%AF%E0%A6%BC%E0%A6%B8%E0%A7%82%E0%A6%9A%E0%A7%80-%E0%A6%AD%E0%A7%87%E0%A6%A8%E0%A7%8D%E0%A6%AF%E0%A7%81.webp" class="no-wk no-lightbox"/>
    </a>
  </div>

  <div class="title-date">
    <a href="#link" class="title">Post title here</a>
    <div class="date">
      <i class="icon-clock"></i>April 17, 2025
    </div>
  </div>
</div>

Image Carousel

Showcase your photos with a responsive image carousel that smoothly cycles through your images. It’s built entirely with pure CSS for lightning-fast performance, delivering a highly interactive experience across all devices.

<div class="image-carousel">
  <div class="slider">
    <div class="slide">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh3GNnRaQEgzw1y9m9KKQX6fdDZeCvrhJWRAKy0MS5B2d3ql3uVln8rR7MfzQeRGqzRNDjzZUCm7gjb2uVSflGfKGgdLqNbzWvjiJzM9QOfrrWmbY9zDrkK-AhiRD5Qf5MMFlV2p6AcqPuNIH2LGEBCYZL86e38nFrRX9jwX_JMIA2HaB2WjbKD9larn0/w800-h457-c/freepik__55294.png">
    </div>
    <div class="slide">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjajf_4DzvD7nJVGHMvt6TW5NWWCC5ppA9cWx1pvSeLZGuUVpi_FeK_lr6cNlxe1HoeURJ3EHiGqUnvB5cTR1kSJG1UydWZ5VOOfhaVLwY7oGfBdUKKP1wWp5o0RcK3Kb3gPllG-ffG7kD7V2aA0sFJgZChv0dd0zgwpoKukXTqr8p_QXd0PkjijR7vSbA/w800-h457-c/freepik__55295.png">
    </div>
    <div class="slide">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYyhJcR82M_5zQFl74eR-fF1qjx1w1F_jywG0YpDT9c7pjmqoFXt_qXrWNAaLHvujgWFpfjXmeryMRW8Agh62WViZSNYZoSk_4VuMxZEzJlU9UEttNjPWRIcX5eIaPJWb87htAGUa8AWmoUoE8p68BpDkBxTdQxS7EFD_StjjP0M5_LWUuutHoMNCDYr0/w800-h457-c/freepik__55296.png">
    </div>
    <div class="slide">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik0HoSdvO3pkl4iqkohOQivc8OuwdtCyQUmbkemGompKwNaJl1QzybTDDZhUxta9WJgoDMRiN8BSfjyrbUNvK2UmQ2sIQplHu30nRORm52MlP6naXHnqAmb7n6gVERtK_XGiQCJr1-cwTZBhYas4GS4kfwCLBcdW_XXqMVHMzsQt72FWTfONZn6vjIuKc/w800-h457-c/freepik__55297.png">
    </div>
    <div class="slide">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTGv3Q12iiWn7ojvgMnEobtE2bKf2qO6DGoBmPc0hyNxP3jBBq3gXe4E83qabKTvnDhGNyDyx2aIkD4l4_PC8sBAOZFqb_SGMZGdZGz2AtvV8EQnWlsJ_8StyG5e7dA1fabdKR5a8bmL4Jir8yzTiAKFbw6rBk9oJYY1HNWiRIq4LMbZw2E0w9SzkYCjk/w800-h457-c/freepik__55298.png">
    </div>
  </div>
</div>

Image Gallery

Create a beautiful, uniform masonry-style gallery to display your favorite pictures in a compact space.

<div class="image-gallery">
  <img alt="" src="#image-url" />
  <img alt="" src="#image-url" />
  <img alt="" src="#image-url" />
  <img alt="" src="#image-url" />
  <img alt="" src="#image-url" />
  <img alt="" src="#image-url" />
  <img alt="" src="#image-url" />
  <img alt="" src="#image-url" />
  <img alt="" src="#image-url" />
</div>

Post Tabs

Organize multiple sections of information natively inside your post without cluttering the page using this interactive tab system.

<div class="tabs-container">
  <input type="radio" name="tabs" id="tab1" checked>
  <input type="radio" name="tabs" id="tab2">
  <input type="radio" name="tabs" id="tab3">
  <input type="radio" name="tabs" id="tab4">
  <input type="radio" name="tabs" id="tab5">
  <div class="tab-header">
    <label for="tab1">Overview</label>
    <label for="tab2">Features</label>
    <label for="tab3">Pricing</label>
    <label for="tab4">FAQ</label>
    <label for="tab5">Contact</label>
  </div>
  <div class="tab-contents">
    <div class="tab-content tab1">
      <p>Example overview text goes here.</p>
    </div>
    <div class="tab-content tab2">
      <ul>
        <li>Example feature 1</li>
        <li>Example feature 2</li>
        <li>Example feature 3</li>
      </ul>
    </div>
    <div class="tab-content tab3">
      <p>Example pricing details.</p>
    </div>
    <div class="tab-content tab4">
      <p>Q: Example question?<br>A: Example answer.</p>
    </div>
    <div class="tab-content tab5">
      <p>Email: example@example.com</p>
    </div>
  </div>
</div>

Lists

Lists are essential for breaking down steps, features, or instructions. You can easily create clean, readable lists using standard HTML tags: <ul> and <li> for bullet points, or <ol> and <li> for numbered lists.

Unordered Lists

• First item
• Second item
  • Nested item 1
  • Nested item 2
• Third item

<ul>  
  <li>Example item 1</li>  
  <li>Example item 2  
    <ul>  
      <li>Example nested item 1</li>  
      <li>Example nested item 2</li>  
    </ul>  
  </li>  
  <li>Example item 3</li>  
</ul>

Ordered Lists

1. First item
2. Second item
   1. Nested item 1
   2. Nested item 2
3. Third item

<ol>  
  <li>Example item 1</li>  
  <li>Example item 2  
    <ol>  
      <li>Example nested item 1</li>  
      <li>Example nested item 2</li>  
    </ol>  
  </li>  
  <li>Example item 3</li>  
</ol>

Step Lists

Need to write a tutorial? Use our special "Step List" design to clearly number and highlight your instructions!

• Download the Probha Blogger Template XML file from the official ProbhaBD website.
• Open your Blogger dashboard and navigate to the Theme section.
• Click on the arrow button beside the Customize button.
• Select Edit HTML from the dropdown options.
• Remove the existing code, paste the new Probha XML code, and hit the Save icon to install your theme!

<ul class="list-step">
  <li>
    Example step 1 description.
  </li>
  <li>
    Example step 2 description.
  </li>
  <li>
    Example step 3 description.
  </li>
  <li>
    Example step 4 description.
  </li>
  <li>
    Example step 5 description.
  </li>
</ul>

Parallax Ads

Integrate a stylish banner or ad slot using this beautiful parallax wrapper.

<div class="parallax-ads"><div class="parallax-item">
<!-- custom ad code [start] -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- custom ad code [end] -->
</div></div>

Accordions

Accordions are fantastic for organizing large chunks of text—like FAQs or detailed modules—into compact, clickable sections. Users can simply tap a header to expand or collapse the content, making your post much easier to navigate. To create visually distinct, separated accordion boxes, simply add the separate class.

Details Summary (Standard)

With Smooth Animation

Separated Accordions

<!-- Details Summary -->
<details>
  <summary>Overview</summary>
  <p>This section contains a brief description or introduction.</p>
</details>

<!-- With animation -->
<div class="accordion">
  <div class="item">
    <div class="header">Example Header 1</div>
    <div class="content">
      <p>Example content for section 1.</p>
    </div>
  </div>
  <div class="item">
    <div class="header">Example Header 2</div>
    <div class="content">
      <p>Example content for section 2.</p>
    </div>
  </div>
</div>

<!-- Separate -->
<div class="accordion separate">
  <div class="item">
    <div class="header">Example Header 1</div>
    <div class="content">
      <p>Example content for section 1.</p>
    </div>
  </div>
  <div class="item">
    <div class="header">Example Header 2</div>
    <div class="content">
      <p>Example content for section 2.</p>
    </div>
  </div>
</div>

Alert Messages

Need to grab your reader's attention? Use alert boxes to highlight important warnings, success confirmations, or helpful tips. They instantly draw the eye and ensure key information isn't missed by scrollers.

This is a success alert message. Your action was completed successfully.

This is an info alert message. Here is some helpful information for you.

This is a warning alert message. Please pay close attention before proceeding.

This is an error alert message. Something went wrong while processing your request.

<p class="alert alert-success">Some success</p>
<p class="alert alert-info">Some info</p>
<p class="alert alert-warning">Some warning</p>
<p class="alert alert-error">Some error</p>

Final Thoughts: In short, the Probha template equips you with a powerful toolkit of ready-to-use design elements. These features save you time, keep your posts looking flawlessly consistent, and make formatting engaging content completely stress-free. Happy blogging!