Cara Membuat Tabel Daftar Harga Responsive di Blogger

Bagi Anda yang berjualan melalui blog baik itu barang maupun jasa mungkin membutuhkan tabel daftar harga yang bagus dan keren agar pengunjung lebih tertarik dengan apa yang Anda tawarkan.

Tabel ini di desain mirip seperti tabel harga paket hosting website yang biasanya Anda temui pada platform wordpress.

Namun kali ini saya membuatnya khusus untuk platform blogger.

Jadi jika memang Anda sedang mencari tabel untuk menampilkan harga paket seperti hosting web maka Anda bisa mencoba tabel ini.

Tabel daftar harga ini sudah di desain responsive jadi akan menyesuaikan dengan beberapa ukuran layar yang digunakan oleh masing-masing pengunjung blog Anda.

Selain itu, tabel ini juga menggunakan icon dari font awesome yang mungkin akan sedikit mempercantik tampilan dari pricing table ini.

Baca juga: Cara Membuat Tabel Responsive di Postingan Blog

Oh iya, perlu saya informasikan juga kalau tabel ini sangat cocok digunakan pada halaman statis atau halaman yang tidak memiliki sidebar.

Karena tabel ini memiliki ukuran lebar yang cukup besar hingga 1000 pixel, jadi kalau kalian pasang di halaman posting mungkin tampilannya akan sedikit berbeda.

Tapi kalau kalian bisa atau paham mengenai kode CSS mungkin Anda bisa mengedit beberapa bagian kode tabel ini agar bisa sesuai dengan tema blog Anda.

Nah, bagi Anda yang tertarik untuk memasang tabel daftar harga responsive di blogger silahkan untuk mengikuti langkah-langkahnya di bawah ini.

Cara Membuat Tabel Daftar Harga Responsive 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 Pricing Table */
.pricing-table{font-family:'Source Sans Pro',Arial,sans-serif;color:#ffffff;text-align:left;font-size:16px;width:100%;max-width:1000px;margin:50px 10px}
.pricing-table img{position:absolute;left:0;top:0;height:100%;z-index:-1}
.pricing-table .plan{margin:0;width:25%;position:relative;float:left;overflow:hidden;border-top:1px solid #333333;border-bottom:1px solid #333333;box-shadow:0 0 5px rgba(0,0,0,0.3);background-color:#1a1a1a}
.pricing-table .plan:hover i,.pricing-table .plan.hover i{-webkit-transform:scale(1.2);transform:scale(1.2)}
.pricing-table .plan:first-of-type{border-radius:8px 0 0 8px;border-left:1px solid #333333}
.pricing-table .plan:last-of-type{border-radius:0 8px 8px 0;border-right:1px solid #333333}
.pricing-table *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.25s ease-out;transitioan:all 0.25s ease-out}
.titletab{line-height:70px;color:#ffffff}
.pricing-table .plan-title{background-color:#156dab;position:relative;margin:20px 0;padding:0 20px;text-transform:uppercase;letter-spacing:2px}
.pricing-table .plan-title:after{position:absolute;content:'';top:100%;left:20px;width:0;height:0;border-style:solid;border-width:10px 10px 0 10px;border-color:#156dab transparent transparent}
.pricing-table .plan-cost{position:absolute;top:20px;right:0;padding:0 20px;text-align:right}
.pricing-table .plan-price{font-weight:600;font-size:2em}
.pricing-table .plan-type{opacity:0.8;font-size:0.7em;text-transform:uppercase}
.pricing-table .plan-features{padding:0 0 20px;margin:0;list-style:outside none none;font-size:0.9em}
.pricing-table .plan-features li{padding:8px 20px}
.pricing-table .plan-features i{margin-right:8px;color:rgba(255,255,255,0.5)}
.pricing-table .plan-select{border-top:1px solid rgba(0,0,0,0.2);padding:20px;text-align:center}
.pricing-table .plan-select a{background-color:#156dab;color:#ffffff;text-decoration:none;padding:12px 20px;font-size:0.75em;font-weight:600;border-radius:20px;text-transform:uppercase;letter-spacing:4px;display:inline-block}
.pricing-table .plan-select a:hover{background-color:#1b8ad8}
.pricing-table .featured{margin-top:-10px;box-shadow:0 0 25px rgba(0,0,0,0.4);z-index:1;border-radius:8px;border:1px solid #333333}
.pricing-table .featured .titletab{line-height:90px}
.pricing-table .featured .plan-select{padding:30px 20px}
@media only screen and (max-width:767px){.pricing-table .plan{width:50%}.pricing-table .plan-title,.pricing-table .plan-select a{-webkit-transform:translateY(0);transform:translateY(0)}.pricing-table .plan-select,.pricing-table .featured .plan-select{padding:20px}.pricing-table .featured{margin-top:0}.pricing-table .featured .titletab{line-height:70px}}
@media only screen and (max-width:440px){.pricing-table .plan{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="pricing-table">
    <div class="plan">
        <div class="titletab">
            <h4 class="plan-title">
        Starter
      </h4>
            <div class="plan-cost"><span class="plan-price">$19</span><span class="plan-type">/month</span></div>
        </div>
        <ul class="plan-features">
            <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="plan-select"><a href="#" title="Select Plan">Select Plan</a></div>
    </div>
    <div class="plan">
        <div class="titletab">
            <h4 class="plan-title">
        Basic
      </h4>
            <div class="plan-cost"><span class="plan-price">$29</span><span class="plan-type">/month</span></div>
        </div>
        <ul class="plan-features">
            <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="plan-select"><a href="#" title="Select Plan">Select Plan</a></div>
    </div>
    <div class="plan featured">
        <div class="titletab">
            <h4 class="plan-title">
        Pro
      </h4>
            <div class="plan-cost"><span class="plan-price">$49</span><span class="plan-type">/month</span></div>
        </div>
        <ul class="plan-features">
            <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="plan-select"><a href="#" title="Select Plan">Select Plan</a></div>
    </div>
    <div class="plan">
        <div class="titletab">
            <h4 class="plan-title">
        Ultra
      </h4>
            <div class="plan-cost"><span class="plan-price">$99</span><span class="plan-type">/month</span></div>
        </div>
        <ul class="plan-features">
            <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="plan-select"><a href="#" title="Select Plan">Select Plan</a></div>
    </div>
</div>

Hasilnya kurang lebih seperti gambar di bawah ini:

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

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

Cara Memasang Tabel di Halaman Posting

Langkah-langkahnya sama seperti di atas, hanya saja Anda perlu masuk ke bagian Postingan bukan Halaman.

Kemudian pastikan Anda berada pada mode HTML bukan Compose.

Cara Menghilangkan Sidebar

Seperti yang saya katakan sebelumnya bahwa tabel ini memiliki ukurang yang cukup lebar sehingga kalau blog Anda memiliki sidebar maka tampilan tabel ini akan sedikit berbeda atau menyempit.

Untuk menghilangkan sidebar pada blog Anda, silahkan tambahkan kode CSS ini pada kode HTML tabel di atas.

<style type="text/css">
#post-wrapper,#wrapper{max-width:1000px!important}
#post-wrapper{width:100%!important}
#sidebar-wrapper{display:none}
.post-container{padding-right:0!important}
</style>

Hasilnya kurang lebih seperti gambar di bawah ini:

Catatan:
Jika icon check list tidak muncul silahkan tambahkan kode Font Awesome ini di atas kode </body> pada template editor blog Anda.

<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 daftar harga responsive di blogger. Selamat mencoba dan semoga bermanfaat.

Cara Manual

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

Bagikan Artikel ini