Widget Tabel Harga di Postingan Blogger Responsive

Widget Tabel Harga Blogger Responsive

Widget Tabel Harga Responsive

Widget adalah elemen GUI (Graphical User Interface) yang menampilkan informasi atau memberikan cara khusus bagi user untuk berinteraksi dengan OS atau aplikasi. Sedangkan tabel harga atau pricing table adalah sebuah tabel yang memuat harga dari suatu paket atau produk.

Widget tabel harga dalam ini dibuat dengan bantuan html, css dan tanpa javascript yang tidak akan memengaruhi kecepatan pemuatan situs web blogger Anda.

Tutorial

Bagaimana cara membuat tabel harga ? Cara membuat widget tabel harga di postingan atau homepage blog, ikuti langkah-langkahnya berikut di bawah ini.

Kode Script CSS Tabel Harga

Pertama masuk ke Dashboard Blogger.
Pilih Tema.
Pilih Edit HTML.
Langkah #1 - cari kode </head> , kemudian salin script CSS berikut di bawah ini dan tempelkan di atas kode </head>.

<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' integrity='sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==' referrerpolicy='no-referrer' rel='stylesheet'/>

<style type='text/css'>
/* This Pricing Table */
:root {
--yellow-color: #ffd861;
--green-color: #43ef8b;
--ribbon-color: #a26bfa;
--basic-background: #ffecb3;
--premium-background: #d0b3ff;
--ultimate-background: #baf8d4;
}
.stmWrapper{
  max-width: 1090px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.stmWrapper .stmTable{
  background: #fff;
  width: calc(33% - 20px);
  padding: 30px 30px;
  position: relative;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.stmTable .price-section{
  display: flex;
  justify-content: center;
}
.stmTable .stm-Price-area{
  height: 120px;
  width: 120px;
  border-radius: 50%;
  padding: 2px;
}
.stm-Price-area .inner-area{
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 3px solid #fff;
  line-height: 117px;
  text-align: center;
  color: #fff;
  position: relative;
}
.stm-Price-area .inner-area .text{
  font-size: 25px;
  font-weight: 400;
  position: absolute;
  top: -10px;
  left: 17px;
}
.stm-Price-area .inner-area .price{
  font-size: 45px;
  font-weight: 500;
  margin-left: 16px;
}
.stmTable .stm-Package-name{
  width: 100%;
  height: 2px;
  margin: 35px 0;
  position: relative;
}
.stmTable .stm-Package-name::before{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 25px;
  font-weight: 500;
  background: #fff;
  padding: 0 15px;
  transform: translate(-50%, -50%);
}
.stmTable .features li{
  margin-bottom: 15px;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.features li .list-name{
  font-size: 17px;
  font-weight: 400;
}
.features li .icon{
  font-size: 15px;
}
.features li .icon.check{
  color: #2db94d;
}
.features li .icon.cross{
  color: #cd3241;
}
.stmTable .btn{
  width: 100%;
  display: flex;
  margin-top: 35px;
  justify-content: center;
}
.stmTable .btn button{
  width: 80%;
  height: 50px;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  border: none;
  outline: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.stmTable .btn button:hover{
  border-radius: 5px;
}
.stm-Basic .features li::selection{
  background: var(--yellow-color);
}
.stm-Basic ::selection,
.stm-Basic .stm-Price-area,
.stm-Basic .inner-area{
  background: var(--yellow-color);
}
.stm-Basic .btn button{
  border: 2px solid var(--yellow-color);
  background: #fff;
  color: var(--yellow-color);
}
.stm-Basic .btn button:hover{
  background: var(--yellow-color);
  color: #fff;
}
.stm-Premium ::selection,
.stm-Premium .stm-Price-area,
.stm-Premium .inner-area,
.stm-Premium .btn button{
  background: var(--ribbon-color);
}
.stm-Premium .btn button:hover{
  background: #833af8;
}
.stm-Ultimate ::selection,
.stm-Ultimate .stm-Price-area,
.stm-Ultimate .inner-area{
  background: var(--green-color);
}
.stm-Ultimate .btn button{
  border: 2px solid var(--green-color);
  color: var(--green-color);
  background: #fff;
}
.stm-Ultimate .btn button:hover{
  background: var(--green-color);
  color: #fff;
}
.stm-Basic .stm-Package-name{
  background: var(--basic-background);
}
.stm-Premium .stm-Package-name{
  background: var(--premium-background);
}
.stm-Ultimate .stm-Package-name{
  background: var(--ultimate-background);
}
.stm-Basic .stm-Package-name::before{
  content: "Basic";
}
.stm-Premium .stm-Package-name::before{
  content: "Premium";
  font-size: 24px;
}
.stm-Ultimate .stm-Package-name::before{
  content: "Ultimate";
  font-size: 24px;
}
@media (max-width: 1020px) {
  .stmWrapper .stmTable{
    width: calc(50% - 20px);
    margin-bottom: 40px;
  }
}
@media (max-width: 698px) {
  .stmWrapper .stmTable{
    width: 100%;
  }
}
::selection{
  color: #fff;
}
.stmTable .ribbon{
  width: 150px;
  height: 150px;
  position: absolute;
  top: -10px;
  left: -10px;
  overflow: hidden;
}
.stmTable .ribbon::before,
.stmTable .ribbon::after{
  position: absolute;
  content: "";
  z-index: -1;
  display: block;
  border: 7px solid #4606ac;
  border-top-color: transparent;
  border-left-color: transparent;
}
.stmTable .ribbon::before{
  top: 0px;
  right: 15px;
}
.stmTable .ribbon::after{
  bottom: 15px;
  left: 0px;
}
.stmTable .ribbon span{
  position: absolute;
  top: 30px;
  right: 0;
  transform: rotate(-45deg);
  width: 200px;
  background: var(--ribbon-color);
  padding: 10px 0;
  color: #fff;
  text-align: center;
  font-size: 17px;
  text-transform: uppercase;
  box-shadow: 0 5px 10px rgba(0,0,0,0.12);
}</style>

Kemudian - Pratinjau dan Simpan

Kode Script HTML Tabel Harga

Langkah #2 - salin kode HTML di bawah ini, dan letakkan di halaman postingan blogger dengan mode editor Tampilan HTML atau terserah anda mau di letakkan dimana.

<div class="stmWrapper">
    <div class="stmTable stm-Basic">
      <div class="price-section">
        <div class="stm-Price-area">
          <div class="inner-area">
            <span class="text">$</span>
            <span class="price">29</span>
          </div>
        </div>
      </div>
      <div class="stm-Package-name"></div>
      <ul class="features">
        <li>
          <span class="list-name">One Selected Template</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">100% Responsive Design</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Credit Remove Permission</span>
          <span class="icon cross"><i class="fas fa-times"></i></span>
        </li>
        <li>
          <span class="list-name">Lifetime Template Updates</span>
          <span class="icon cross"><i class="fas fa-times"></i></span>
        </li>
      </ul>
      <div class="btn"><button>Purchase</button></div>
    </div>
    <div class="stmTable stm-Premium">
      <div class="ribbon"><span>Recommend</span></div>
      <div class="price-section">
        <div class="stm-Price-area">
          <div class="inner-area">
            <span class="text">$</span>
            <span class="price">59</span>
          </div>
        </div>
      </div>
      <div class="stm-Package-name"></div>
      <ul class="features">
        <li>
          <span class="list-name">Five Existing Templates</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">100% Responsive Design</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Credit Remove Permission</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Lifetime Template Updates</span>
          <span class="icon cross"><i class="fas fa-times"></i></span>
        </li>
      </ul>
      <div class="btn"><button>Purchase</button></div>
    </div> 
    <div class="stmTable stm-Ultimate">
      <div class="price-section">
        <div class="stm-Price-area">
          <div class="inner-area">
            <span class="text">$</span>
            <span class="price">99</span>
          </div>
        </div>
      </div>
      <div class="stm-Package-name"></div>
      <ul class="features">
        <li>
          <span class="list-name">All Existing Templates</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">100% Responsive Design</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Credit Remove Permission</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Lifetime Template Updates</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
      </ul>
      <div class="btn"><button>Purchase</button></div>
    </div>
  </div>

Langkah #3 - Terakhir : Pratinjau dan Simpan.

Demo

Contoh demo tampilan widget tabel harga di blog.

$ 29

One Selected Template
100% Responsive Design
Credit Remove Permission
Lifetime Template Updates

Recommend

$ 59

Five Existing Templates
100% Responsive Design
Credit Remove Permission
Lifetime Template Updates

$ 99

All Existing Templates
100% Responsive Design
Credit Remove Permission
Lifetime Template Updates

Demikian cara membuat widget tabel harga di postingan atau homepage blogger, semoga bermanfaat.

Go to Link

Sentra Bloggers

Membuat Widget Tabel Harga di Postingan Blogger

Widget Tabel Harga Responsive

Tutorial

Kode Script CSS Tabel Harga

Kode Script HTML Tabel Harga

Demo

إرسال تعليق

Tutorial Bootstrap 5 platform Blogger - Bagian #1 Modal

Kode Icon SVG

Template Blogger Plus UI + Bootstrap

Sentra Bloggers