Cara Mudah Membuat Tabel Responsive di Blog | Emang Bisa? Part 2

Halo sahabat koridoo. Kali ini aku akan bagikan cara membuat tabel keren. Tabel kali ini berbeda dengan tabel sebelumnya. Kalau tabel kemarin mengenai tabel deskripsi, maka yang ini merupakan tabel promosi atau tabel harga. Tapi sebelumnya tabel ini cukup besar tampilannya, jadi sobat harus menyesuaikan kembali ukurannya dengan tampilan blog sobat. Nah, jika sobat ingin membuatnya, yuk ikuti panduannya dibawah ini. 

Codding Untuk Membuat Tabel Responsive di Blogger

#1. Masuk ke blogger.

#2. Pilih menu tema > pilih edit html.

#3. Copy kode CSS ini kemudian pastekan 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, sobat bisa menggunakan tool flat ui color.

Cara Memasang Tabelnya di Halaman Statis

#1. Masuk ke blogger.

#2. Pilih menu pilih halaman > pilih halaman baru. 

#3. Setelah itu masuk ke mode HTML > pastekan kode dibawah, seperti gambar dibawah 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>

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

#4. Silahkan lakukan beberapa perubahan sesuai dengan keinginan sobat.

#5. Kemudian klik Publikasikan > selesai.

Tambahan :

Untuk membuatnya dalam postingan, langkah-langkahnya hampir sama dengan langkah-langkah diatas, hanya saja sobat perlu masuk ke bagian menu postingan bukan menu halaman. Kemudian pastikan sobat berada pada mode HTML bukan Compose untuk memasukkan kodenya.

Dan, seperti yang aku katakan diatas bahwa tabel ini memiliki ukuran yang cukup lebar sehingga kalau blog sobat memiliki sidebar maka tampilan tabel ini akan sedikit meluas atau menyempit tergantung tampilan blog. Untuk itu, langsung saja ikuti panduannya dibawah ini :
#1. Untuk menghilangkan sidebar pada blog sobat, silahkan tambahkan kode CSS ini pada kode HTML no 3 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> 

#2. Jika icon check list tidak muncul silahkan tambahkan kode font awesome ini di atas kode </body> pada template editor blog sobat.

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

#3. Selesai.

Demo

Baca juga : siapa bilang blog kamu jelek part 1.

Tabel ini sangat direkomendasikan sekali buat sobat yang ingin menjadi publisher hosting atau penjual hosting. Karena tampilannya cukup menarik dan elegan. Untuk yang lain juga bisa, seperti tabel promosi buku atau promosi lainnya. Mungkin itu aja sih menurut aku hehehe.

Share this post