Membuat Widget Tabel Harga di Postingan Blogger

Widget Tabel Harga

Tabel harga adalah cara dimana kita dapat dengan mudah menampilkan semua jenis harga di tabel. Anda pasti pernah melihat di banyak situs web bahwa selain daftar barang, harganya juga tertulis di tabel. Tabel harga ini dibuat dengan bantuan html dan css. Tidak ada JavaScript yang digunakan dalam hal ini, yang tidak akan memengaruhi kecepatan pemuatan situs blogger Anda.

Tutorial

Cara membuat widget tabel harga di postingan atau homepage blogger

1 :- Masuk ke Dashboard Blogger

2 :- Pilih Menu Tema

3 :- Edit Html.

4 :- Cari kode </head> , kemudian salin kode script di bawah ini dan letakkan di atas nya.


<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'/>

5 :- Salin kode Css dibawah ini dan sama di letakkan di atas kode </head>


<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>

6. Simpan

7. Terakhir , salin kode HTML di bawah ini, dan letakkan di halaman postingan blogger di mode 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>

8. Pratinjau dan Publikasikan

Demo

$
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

Tutorial Blogger

Membuat Widget Tabel Harga di Postingan Blogger

Widget Tabel Harga

Tutorial

Demo

Posting Komentar

Cara Mengaktifkan Default Dark Mode Plus UI

elzeno.id