Kali ini saya kembali menulis sebuah tutorial menciptakan tabel harga di blog.
Beberapa bulan kemudian saya pernah menciptakan sebuah tabel harga resposive, tabel ini sangat cocok apabila dipakai untuk blog atau website yang menyediakan jasa atau layanan ibarat hosting dan sebagainya.
Untuk tabel kali ini gotong royong tidak jauh beda dengan tabel yang pernah saya buat pertama, yang dapat Anda lihat pada postingan cara menciptakan tabel daftar harga responsive di blog.
Yang membedakannya yakni ada pada desainnya saja.
Untuk tabel harga paket ini mempunyai desain yang lebih mudah namun tetap elegan dan manis kalau Anda gunakan di blog.
Perlu saya ingatkan kembali tabel daftar harga paket atau tabel ibarat paket hosting ini sangat cocok dipakai pada blog yang tidak mempunyai sidebar.
Karena mempunyai lebar yang cukup besar apabila template blog Anda minimalis maka tampilannya mungkin akan sedikit berubah.
Untuk mengatasi dilema tersebut silahkan Anda menghapus atau menghilangkan sidebar blog Anda untuk halaman yang menampilkan tabel saja dengan memakai tag conditional.
Baca juga: Kumpulan Tag Conditional Blogger dan Fungsinya
Selain itu, kalau Anda mempunyai pengetahuan wacana penggunaan arahan tag HTML dan CSS mungkin Anda masih dapat mengubah sedikit desain dari tabel ini sesuai dengan cita-cita Anda.
Namun kalau tidak, silahkan gunakan saja desain yang sudah saya siapkan.
Jika Anda tertarik untuk menciptakan tabel harga paket di blog, silahkan ikuti langkah-langkahnya di bawah ini.
1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Copy arahan CSS ini kemudian Paste di atas arahan
Beberapa bulan kemudian saya pernah menciptakan sebuah tabel harga resposive, tabel ini sangat cocok apabila dipakai untuk blog atau website yang menyediakan jasa atau layanan ibarat hosting dan sebagainya.
Untuk tabel kali ini gotong royong tidak jauh beda dengan tabel yang pernah saya buat pertama, yang dapat Anda lihat pada postingan cara menciptakan tabel daftar harga responsive di blog.
Yang membedakannya yakni ada pada desainnya saja.
Untuk tabel harga paket ini mempunyai desain yang lebih mudah namun tetap elegan dan manis kalau Anda gunakan di blog.
Perlu saya ingatkan kembali tabel daftar harga paket atau tabel ibarat paket hosting ini sangat cocok dipakai pada blog yang tidak mempunyai sidebar.
Karena mempunyai lebar yang cukup besar apabila template blog Anda minimalis maka tampilannya mungkin akan sedikit berubah.
Untuk mengatasi dilema tersebut silahkan Anda menghapus atau menghilangkan sidebar blog Anda untuk halaman yang menampilkan tabel saja dengan memakai tag conditional.
Baca juga: Kumpulan Tag Conditional Blogger dan Fungsinya
Selain itu, kalau Anda mempunyai pengetahuan wacana penggunaan arahan tag HTML dan CSS mungkin Anda masih dapat mengubah sedikit desain dari tabel ini sesuai dengan cita-cita Anda.
Namun kalau tidak, silahkan gunakan saja desain yang sudah saya siapkan.
Jika Anda tertarik untuk menciptakan tabel harga paket di blog, silahkan ikuti langkah-langkahnya di bawah ini.
Cara Membuat Tabel Harga Paket di Blog
1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Copy arahan CSS ini kemudian Paste di atas arahan
]]></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 dapat memakai tool color picker.
Cara Memasang Tabel di Halaman Statis
1. Masuk ke Blogger.com2. Klik Halaman > Halaman Baru
3. Lalu berikan judul terlebih dahulu
4. Setelah itu masuk ke mode HTML bukan
5. Kemudian masukkan arahan 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 menentukan tabel mana yang paling direkomendasikan silahkan lihat arahan
<div class="daftar-paket featured"> kesudahannya akan ibarat pada tabel ke tiga.6. Silahkan lakukan beberapa perubahan sesuai dengan cita-cita Anda
7. Kemudian klik Publikasikan
Jika icon checklist tidak muncul, silahkan tambahkan arahan css bundle font awesome ini dan simpan di atas arahan
</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 menciptakan tabel harga paket di blog, selamat mencoba. Semoga bermanfaat.
Sumber http://www.caramanual.com
Buat lebih berguna, kongsi:
