Cara Membuat Table Pricing Responsive

Pada kesempatan kali ini calondesain akan berbagi informasi tentang Cara Membuat Table Pricing Responsive. Tutorial ini khusus untuk pengguna blogger/blogspot yang memiliki tema tentang penjualan, jasa dan lainnya yang berkaitan dengan harga suatu produk dan jasa.
Keunggulaan menggunakan table pricing agar pengunjung atau para pencari jasa dan produk bisa meliha detail jasa dan harga yang ditawarkan secara jelas dan mudah di pahami.

Bagi anda pengguna Wordpress, untuk membuat table pricing tentu sangat mudah, dengan banyaknya plugin yang akan membantu anda dalam merancang dan mendesain table pricing sesuai dengan yang anda diinginkan, baik itu secara free atau berbayar.

Baiklah langsung saja menuju ke tutorial Cara Membuat Table Pricing Responsive:
1. Seperti biasa, anda login ke akun blogger anda.
2.Pilih Halaman atau pages pada sidebar sebelah kiri. Lihat gambar dibawah ini:
3. Silahkan anda buat halaman baru atau new pages. Lihat gambar dibawa ini supaya jelas:
3. Silahkan anda ubah mode penulisan dari compose ke html, di sudut kiri atas seperti gambar dibawah ini:
4. Silahkan anda salin kode HTML dibawah ini dan letakan di kolom editor blog seperti gambar dibawah ini:

<div class="sundaku-pricing">
   <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="su-order"><a href="">Pesan Sekarang</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="su-order"><a href="">Pesan Sekarang</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="su-order"><a href="">Pesan Sekarang</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="su-order"><a href="">Pesan Sekarang</a></div>
   </div>
</div>

5. Silahkan anda edit sesuai kebutuhan dan simpan terlebih dahulu halaman baru anda. Selanjutnya pada sidebar kiri pilih theme/tema > edit html, lalu cari kode </head>. Setelah ketemu, silahkan anda salin kode CSS dibawah ini dan letakan tepat diatas kode </head> lalu simpan tema.

<style type="text/css">
#sidebar-wrapper{display:none}#post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.sundaku-pricing{font-family:'Source Sans Pro',Arial,sans-serif;color:#ffffff;text-align:left;font-size:16px;width:100%;max-width:1000px;margin:30px 10px}
.sundaku-pricing img{position:absolute;left:0;top:0;height:100%;z-index:-1}
.sundaku-pricing .daftar-paket{margin:0 0.5%;width:24%;padding-top:10px;position:relative;float:left;overflow:hidden;background-color:#222f3d;border-radius:8px}
.sundaku-pricing .daftar-paket:hover i,.sundaku-pricing .daftar-paket.hover i{-webkit-transform:scale(1.2);transform:scale(1.2)}
.sundaku-pricing *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.25s ease-out;transition:all 0.25s ease-out}
.sundaku-pricing header{color:#ffffff}
.sundaku-pricing .nama-paket{line-height:60px;position:relative;margin:0;padding:0 20px;font-size:1.6em;letter-spacing:2px;font-weight:700}
.sundaku-pricing .nama-paket:after{position:absolute;content:'';top:100%;left:20px;width:30px;height:3px;background-color:#fff}
.sundaku-pricing .harga-paket{padding:0 20px;margin:0}
.sundaku-pricing .biaya-paket{font-weight:400;font-size:2.8em;margin:10px 0;display:inline-block}
.sundaku-pricing .tipe-paket{opacity:0.8;font-size:0.7em;text-transform:uppercase}
.sundaku-pricing .fitur-paket{padding:0 0 20px;margin:0;list-style:outside none none;font-size:0.9em}
.sundaku-pricing .fitur-paket li{padding:8px 20px}
.sundaku-pricing .fitur-paket i{margin-right:8px;color:rgba(255,255,255,0.5)}
.sundaku-pricing .su-order{border-top:1px solid rgba(0,0,0,0.2);padding:20px;text-align:center}
.sundaku-pricing .su-order a{background-color:linear-gradient(to right);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}
.sundaku-pricing .su-order a:hover{background-color:#1b8ad8!important}
.sundaku-pricing .featured{margin-top:-10px;z-index:1;border-radius:8px;border:2px solid #156dab;background-color:#156dab}
.sundaku-pricing .featured .su-order{padding:30px 20px}
.sundaku-pricing .featured .su-order a{background-color:#10507e}
@media only screen and (max-width:767px){.sundaku-pricing .daftar-paket{width:49%;margin:0.5%}.sundaku-pricing .nama-paket,.sundaku-pricing .su-order a{-webkit-transform:translateY(0);transform:translateY(0)}.sundaku-pricing .su-order,.sundaku-pricing .featured .su-order{padding:20px}.sundaku-pricing .featured{margin-top:0}.sundaku-pricing .featured header{line-height:70px}}
@media only screen and (max-width:440px){.sundaku-pricing .daftar-paket{margin:0.5% 0;width:100%}}
  .su-order a{background:

linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size: 320% 200%;-webkit-animation:

Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation:

Gradient 15s ease infinite;}@-webkit-keyframes

Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes

Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes

Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}</style>
  </style>
</head>

6. Jika didalam template anda belum menambahkan Font-Awesome, silahkan anda salin kode link dibawah ini dan letakan diatas kode </head> atau dibawah kode <head>.
FONTAWESOME

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

Anda bisa lihat demonya dibawah ini:



Semoga bisa bermanfaat dan jangan lupa untuk selalu berbagi informasi.

Terima kasih