Cara Menciptakan 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 biar pengunjung lebih tertarik dengan apa yang Anda tawarkan.

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

Namun kali ini saya membuatnya khusus untuk platform blogger.

Makara kalau memang Anda sedang mencari tabel untuk menampilkan harga paket menyerupai hosting web maka Anda dapat mencoba tabel ini.

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

Selain itu, tabel ini juga memakai 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 dipakai pada halaman statis atau halaman yang tidak mempunyai sidebar.

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

Tapi kalau kalian dapat atau paham mengenai instruksi CSS mungkin Anda dapat mengedit beberapa bab instruksi tabel ini biar dapat 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 instruksi CSS ini kemudian Paste di atas instruksi ]]></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 dapat memakai 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 instruksi 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="Cara Membuat Tabel Daftar Harga Responsive di Blogger">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="Cara Membuat Tabel Daftar Harga Responsive di Blogger">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="Cara Membuat Tabel Daftar Harga Responsive di Blogger">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="Cara Membuat Tabel Daftar Harga Responsive di Blogger">Select Plan</a></div>     </div> </div>

Hasilnya kurang lebih menyerupai gambar di bawah ini:

Catatan:
Untuk menentukan tabel mana yang paling direkomendasikan silahkan lihat instruksi <div class="plan featured"> risikonya akan menyerupai pada tabel ke tiga.

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

Cara Memasang Tabel di Halaman Posting

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

Kemudian pastikan Anda berada pada mode HTML bukan Compose.

Cara Menghilangkan Sidebar

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

Untuk menghilangkan sidebar pada blog Anda, silahkan tambahkan instruksi CSS ini pada instruksi 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 menyerupai gambar di bawah ini:

Catatan:
Jika icon check list tidak muncul silahkan tambahkan instruksi Font Awesome ini di atas instruksi </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 menciptakan tabel daftar harga responsive di blogger. Selamat mencoba dan semoga bermanfaat.
Sumber https://www.caramanual.com/

Related Posts