Cara Membuat Tabel Harga Paket di Blog

Kali ini saya kembali menulis sebuah tutorial membuat tabel harga di blog.

Beberapa bulan lalu saya pernah membuat sebuah tabel harga resposive, tabel ini sangat cocok apabila digunakan untuk blog atau website yang menyediakan jasa atau layanan seperti hosting dan sebagainya.

Untuk tabel kali ini sebenarnya tidak jauh beda dengan tabel yang pernah saya buat pertama, yang bisa Anda lihat pada postingan cara membuat tabel daftar harga responsive di blog.

Yang membedakannya yaitu ada pada desainnya saja.

Untuk tabel harga paket ini memiliki desain yang lebih simpel namun tetap elegan dan bagus jika Anda gunakan di blog.

Perlu saya ingatkan kembali tabel daftar harga paket atau tabel mirip paket hosting ini sangat cocok digunakan pada blog yang tidak memiliki sidebar.

Karena memiliki lebar yang cukup besar apabila template blog Anda minimalis maka tampilannya mungkin akan sedikit berubah.

Untuk mengatasi masalah tersebut silahkan Anda menghapus atau menghilangkan sidebar blog Anda untuk halaman yang menampilkan tabel saja dengan menggunakan tag conditional.

Baca juga: Kumpulan Tag Conditional Blogger dan Fungsinya

Selain itu, jika Anda memiliki pengetahuan tentang penggunaan kode tag HTML dan CSS mungkin Anda masih bisa mengubah sedikit desain dari tabel ini sesuai dengan keinginan Anda.

Namun jika tidak, silahkan gunakan saja desain yang sudah saya siapkan.

Jika Anda tertarik untuk membuat tabel harga paket di blog, silahkan ikuti langkah-langkahnya di bawah ini.

Cara Membuat Tabel Harga Paket di Blog

DEMO

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Copy kode CSS ini kemudian Paste di atas kode ]]></b:skin> atau </style>

/* CSS Tabel Harga */
.tabel-paket {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  color: #ffffff;
  text-align: left;
  font-size: 16px;
  width: 100%;
  max-width: 1000px;
  margin: 30px 10px;
}

.tabel-paket img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: -1;
}

.tabel-paket .daftar-paket {
  margin: 0 0.5%;
  width: 24%;
  padding-top: 10px;
  position: relative;
  float: left;
  overflow: hidden;
  background-color: #222f3d;
  border-radius: 8px;
}

.tabel-paket .daftar-paket:hover i,
.tabel-paket .daftar-paket.hover i {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.tabel-paket * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

.tabel-paket header {
  color: #ffffff;
}

.tabel-paket .nama-paket {
  line-height: 60px;
  position: relative;
  margin: 0;
  padding: 0 20px;
  font-size: 1.6em;
  letter-spacing: 2px;
  font-weight: 700;
}

.tabel-paket .nama-paket:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 20px;
  width: 30px;
  height: 3px;
  background-color: #fff;
}

.tabel-paket .harga-paket {
  padding: 0 20px;
  margin: 0;
}

.tabel-paket .biaya-paket {
  font-weight: 400;
  font-size: 2.8em;
  margin: 10px 0;
  display: inline-block;
}

.tabel-paket .tipe-paket {
  opacity: 0.8;
  font-size: 0.7em;
  text-transform: uppercase;
}

.tabel-paket .fitur-paket {
  padding: 0 0 20px;
  margin: 0;
  list-style: outside none none;
  font-size: 0.9em;
}

.tabel-paket .fitur-paket li {
  padding: 8px 20px;
}

.tabel-paket .fitur-paket i {
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.5);
}

.tabel-paket .pilih-paket {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  padding: 20px;
  text-align: center;
}

.tabel-paket .pilih-paket a {
  background-color: #156dab;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 20px;
  font-size: 0.75em;
  font-weight: 600;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 4px;
  display: inline-block;
}

.tabel-paket .pilih-paket a:hover {
  background-color: #1b8ad8 !important;
}

.tabel-paket .featured {
  margin-top: -10px;
  z-index: 1;
  border-radius: 8px;
  border: 2px solid #156dab;
  background-color: #156dab;
}

.tabel-paket .featured .pilih-paket {
  padding: 30px 20px;
}

.tabel-paket .featured .pilih-paket a {
  background-color: #10507e;
}

@media only screen and (max-width: 767px) {
  .tabel-paket .daftar-paket {
    width: 49%;
    margin: 0.5%;
  }
  .tabel-paket .nama-paket,
  .tabel-paket .pilih-paket a {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  .tabel-paket .pilih-paket,
  .tabel-paket .featured .pilih-paket {
    padding: 20px;
  }
  .tabel-paket .featured {
    margin-top: 0;
  }
  .tabel-paket .featured header {
    line-height: 70px;
  }
}

@media only screen and (max-width: 440px) {
  .tabel-paket .daftar-paket {
    margin: 0.5% 0;
    width: 100%;
  }
}

4. Lalu klik Simpan tema

Catatan:
Untuk mengubah warna tabel Anda bisa menggunakan tool color picker.

Cara Memasang Tabel di Halaman Statis

1. Masuk ke Blogger.com
2. Klik Halaman > Halaman Baru
3. Lalu berikan judul terlebih dahulu
4. Setelah itu masuk ke mode HTML bukan Compose
5. Kemudian masukkan kode HTML berikut ini:

<div class="tabel-paket">
   <div class="daftar-paket">
      <header>
         <h4 class="nama-paket">
            Starter
         </h4>
         <div class="harga-paket"><span class="biaya-paket">$9</span><span class="tipe-paket">/month</span></div>
      </header>
      <ul class="fitur-paket">
         <li><i class="fa fa-check"> </i>5GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>5 MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>250Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-paket"><a href="">Select Plan</a></div>
   </div>
   <div class="daftar-paket">
      <header>
         <h4 class="nama-paket">
            Basic
         </h4>
         <div class="harga-paket"><span class="biaya-paket">$29</span><span class="tipe-paket">/month</span></div>
      </header>
      <ul class="fitur-paket">
         <li><i class="fa fa-check"> </i>10GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>10 MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>500Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-paket"><a href="">Select Plan</a></div>
   </div>
   <div class="daftar-paket featured">
      <header>
         <h4 class="nama-paket">
            Professional
         </h4>
         <div class="harga-paket"><span class="biaya-paket">$49</span><span class="tipe-paket">/month</span></div>
      </header>
      <ul class="fitur-paket">
         <li><i class="fa fa-check"> </i>25GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>25 MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>2000Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-paket"><a href="">Select Plan</a></div>
   </div>
   <div class="daftar-paket">
      <header>
         <h4 class="nama-paket">
            Ultra
         </h4>
         <div class="harga-paket"><span class="biaya-paket">$99</span><span class="tipe-paket">/month</span></div>
      </header>
      <ul class="fitur-paket">
         <li><i class="fa fa-check"> </i>100GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>Unlimited MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>10000Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-paket"><a href="">Select Plan</a></div>
   </div>
</div>

Catatan:
Untuk memilih tabel mana yang paling direkomendasikan silahkan lihat kode <div class="daftar-paket featured"> hasilnya akan seperti pada tabel ke tiga.

6. Silahkan lakukan beberapa perubahan sesuai dengan keinginan Anda
7. Kemudian klik Publikasikan

Jika icon checklist tidak muncul, silahkan tambahkan kode css bundle font awesome ini dan simpan di atas kode </body>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Itulah artikel mengenai cara membuat tabel harga paket di blog, selamat mencoba. Semoga bermanfaat.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini