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 menyerupai hosting dan sebagainya.
Untuk tabel kali ini bersama-sama 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 ialah ada pada desainnya saja.
Untuk tabel harga paket ini mempunyai desain yang lebih mudah namun tetap elegan dan manis jikalau Anda gunakan di blog.
Perlu saya ingatkan kembali tabel daftar harga paket atau tabel menyerupai 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 problem 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, jikalau Anda mempunyai pengetahuan ihwal penggunaan aba-aba tag HTML dan CSS mungkin Anda masih dapat mengubah sedikit desain dari tabel ini sesuai dengan cita-cita Anda.
Namun jikalau 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 aba-aba CSS ini kemudian Paste di atas aba-aba
4. Lalu klik Simpan tema
Catatan:
Untuk mengubah warna tabel Anda dapat memakai tool color picker.
2. Klik Halaman > Halaman Baru
3. Lalu berikan judul terlebih dahulu
4. Setelah itu masuk ke mode HTML bukanCompose
5. Kemudian masukkan aba-aba HTML berikut ini:
Catatan:
Untuk menentukan tabel mana yang paling direkomendasikan silahkan lihat aba-aba
6. Silahkan lakukan beberapa perubahan sesuai dengan cita-cita Anda
7. Kemudian klik Publikasikan
Jika icon checklist tidak muncul, silahkan tambahkan aba-aba css bundle font awesome ini dan simpan di atas aba-aba
Itulah artikel mengenai cara menciptakan tabel harga paket di blog, selamat mencoba. Semoga bermanfaat. Sumber https://www.caramanual.com/
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 menyerupai hosting dan sebagainya.
Untuk tabel kali ini bersama-sama 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 ialah ada pada desainnya saja.
Untuk tabel harga paket ini mempunyai desain yang lebih mudah namun tetap elegan dan manis jikalau Anda gunakan di blog.
Perlu saya ingatkan kembali tabel daftar harga paket atau tabel menyerupai 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 problem 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, jikalau Anda mempunyai pengetahuan ihwal penggunaan aba-aba tag HTML dan CSS mungkin Anda masih dapat mengubah sedikit desain dari tabel ini sesuai dengan cita-cita Anda.
Namun jikalau 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 aba-aba CSS ini kemudian Paste di atas aba-aba
]]></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 aba-aba 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 aba-aba
<div class="daftar-paket featured"> jadinya akan menyerupai 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 aba-aba css bundle font awesome ini dan simpan di atas aba-aba
</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 https://www.caramanual.com/