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
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> </di<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/
Related Posts
- Cara Menciptakan Widget Author Box Sederhana Di Sidebar BlogMemasang widget author box atau profile penulis di sidebar blog merupakan hal yang baik untuk dilakukan, ini bertujuan semoga pengunjung situs dapat ...
- Cara Mengatasi Error Code 0Xc0000005 Ketika Install Windows 7 Tips dan Trik Komputer - Terdapat beberapa Error code yang sering muncul ketika instalasi Windows 7. Error Code lebih banyak terjadi alasannya ...
- Cara Mengatasi Windows 7 Selalu Masuk Safe Mode Tips dan Tik Komputer - Cara Mengatasi Windows 7 Selalu Masuk Safe Mode memang sangat menyebalkan alasannya ialah sudah terang kalian terjebak ...
- Membuat Struktur Dasar Template Blog Blogger Saat ini Anda sedang membaca serial ketiga dari 11 seri panduan menciptakan template blog sendiri. Pada serial sebelumnya kita telah berhasil membua ...
- Cara Menciptakan Sitemap (Daftar Isi) Di Blog Versi LengkapApa itu sitemap? Sitemap jikalau diterjemahkan ke dalam Bahasa Indonesia berarti Peta Situs, yakni kumpulan link atau tautan yang mengarah ke posting ...
- Artikel Agan Ke 100 Blog Terbaik Artikel Agan Ke 100 Blog Terbaik Assallamualikum sahabat perkenalkan nama aku Egi Supiyudin admin di artikel agan usia aku 24 tahun, asal bandung ...
