Pricing Tables in Blogger: 5 Ready Styles for Posts and Pages

Selling a template, a course or a subscription? The Areeb theme has pricing cards built in, in five styles. Paste a few lines of HTML into a post or a static page and they match the theme in light and dark mode, on desktop and phone.

Switch the post editor to HTML view before pasting the code below. In Compose view, Blogger would show it as text.

Cards

The default style: plans side by side. Add hl to the plan you want to push; it turns dark (light in dark mode) and its button turns lime.

<div class="pricing">
  <div class="plan">
    <b>Starter</b>
    <p>For a personal blog.</p>
    <p class="price"><sup>$</sup>0<small>/ forever</small></p>
    <ul><li>1 blog</li><li class="no">Priority support</li></ul>
    <a class="btn outline" href="#">Get started</a>
  </div>
  <div class="plan hl" data-badge="Popular" data-icon="fire">
    <b>Pro</b>
    <p>For creators who earn from ads.</p>
    <p class="price"><sup>$</sup>19<small>/ one-time</small></p>
    <ul><li>3 blogs</li><li>Priority support</li></ul>
    <a class="btn" href="#">Buy Pro</a>
  </div>
</div>

Two or three plans look best in a post. Four fit on a wide static page; on phones the cards stack.

Rows

Add rows for a compact list: name, price and button on one line. Good inside a post and on phones. The feature list is hidden in this style, so keep the description short.

<div class="pricing rows">
  <div class="plan hl">
    <b>Yearly <mark>Save 30%</mark></b>
    <p>Billed $42 once a year</p>
    <p class="price"><sup>$</sup>3.5<small>/mo</small></p>
    <a class="btn" href="#">Choose</a>
  </div>
</div>

Monthly and yearly switch

Add toggle and the theme puts a switch above the plans. Write both prices in each plan: mark the monthly one with month and the yearly one with year. Anything can carry these two classes, not only the price.

<div class="pricing toggle" data-month="Monthly" data-year="Yearly" data-save="−20%" data-default="year">
  <div class="plan">
    <b>Basic</b>
    <p class="price month"><sup>$</sup>10<small>/ mo</small></p>
    <p class="price year"><sup>$</sup>8<small>/ mo</small><s>$10</s></p>
    <ul><li>Everything you need</li></ul>
    <a class="btn outline" href="#">Start Basic</a>
  </div>
</div>

Attribute	Does
data-month / data-year	Switch labels (default Monthly / Yearly)
data-save	Small green note on the yearly button, like −20%
data-default="year"	Opens on yearly prices (default is monthly)

Ticket

Add ticket: the price sits on top, a dashed tear line, then the features. Wrap the name, description and price in a <div>; that's the ticket head. The highlighted plan gets a lime head.

<div class="pricing ticket">
  <div class="plan hl">
    <div>
      <b>Pro</b>
      <p class="price"><sup>$</sup>19<small>once</small></p>
      <p>Most chosen.</p>
    </div>
    <ul><li>Everything</li><li>Support</li></ul>
    <a class="btn" href="#">Buy Pro</a>
  </div>
</div>

Product card

For one item: a template, an ebook, a course. Put an image first, then a <div> with the details. You can insert the image with Blogger's image button; the theme handles Blogger's wrapper. On phones the image goes on top.

<div class="product" data-badge="New" data-icon="new">
  <img src="YOUR-IMAGE.jpg" alt="Product preview">
  <div>
    <b>Areeb Pro Theme</b>
    <p>A fast Blogger theme with 20+ post components.</p>
    <ul><li>Lifetime updates</li><li>Use on 3 blogs</li></ul>
    <p class="price"><sup>$</sup>19<s>$39</s></p>
    <p class="meta">⭐ 4.9 · 1.2k sales</p>
    <div class="btns">
      <a class="btn" href="#">Buy now</a>
      <a class="btn outline" href="#">Live demo</a>
    </div>
  </div>
</div>

Parts you can use in every style

Write	You get
<b> (first in the plan)	Plan name
<p>	Short grey description
<p class="price">	Big price; <sup> currency, <small> period, <s> old price
<li> / <li class="no">	Included (green tick) / not included (crossed out)
<mark>	Small lime tag, like "Save 30%"
class="hl" on a plan	Highlight the plan
data-badge="Popular"	Corner badge; add data-icon for an icon
a.btn / a.btn outline	Filled / outline button (same buttons as the rest of the theme)

Badge icons: fire, sponsored, new, updated, pick, free, premium, video, exclusive, part, the same set as the post card badges.

Put the real link of your store or checkout in each button's href. If it's a paid or affiliate link, add rel="sponsored".

Quick reference

Style	Code	Best for
Cards	div.pricing	A pricing page
Rows	div.pricing.rows	Inside a post, phones
Switch	div.pricing.toggle + .month / .year	Subscriptions
Ticket	div.pricing.ticket, head in a div	A standout look
Product	div.product: image + div	One template, ebook or course