|
| Widget Material Design Tabel Box Deskripsi |
A. Material Design Tabel Box Deskripsi
Tabel box deskripsi pada konten ini adalah gabungan elemen dari material design , yaitu sebuah konsep desain yang dikembangkan yang menggunakan prinsip-prinsip desain dasar yang terinspirasi dari kertas dan ink. Konsep ini menekankan pada penggunaan warna, tipografi, dan ruang yang terstruktur dengan baik serta memberikan aksen dan interaksi pengguna.
Material Design Box juga mengutamakan konsistensi dan responsifitas dalam desain untuk memberikan pengalaman pengguna yang terbaik di semua perangkat.
Kelebihan Material Design Box Deskripsi
- Deskripsi terlihat lebih rapi, ringkas dan lebih menarik
- Dapat digunakan untuk menunjukan detail produk untuk situs penjualan
- Terlihat lebih kreatif dan dekoratif
- Text deskripsi mudah ter-notice pembaca
- Sangat cocok digunakan pada situs penjualan, penjualan jasa, ataupun landing page, dll
Tutorial Membuat Tabel Box Material Desin
Cara membuat tabel box tampilan deskripsi material design box.
Pertama buka dulu Dashboard Blogger anda, Pilih Tema, kemudian Edit HTML.
Script CSS Tabel Box Deskripsi Tampilan
Letakan kode di bawah ini, di atas ]]></b:skin> kemudian Simpan.
/* material design box */
.wendybox{background-color:#fff;position:relative;margin:40px 2px;padding:40px 15px 15px;border:1px solid rgba(230,230,230,1);border-radius:5px;box-shadow:0 10px 20px 0 rgba(30,30,30,.07)}
.wendybox h2 {background-color:#02d07a;border-radius:3px;padding:8px 20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#fff;top:-20px;font-weight:bold;left:30px;text-transform:uppercase}
.wendybox.box-yellow h2{background:#e2c601}
.wendybox.box-blue h2{background:#2ad2c9}
.wendybox.box-red h2{background:#f7176a}
/* table detail */
table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative}
table.tr-caption-container tr td{background-color:transparent;border:0;padding:0}
table.tr-caption-container tr:nth-child(2n+1) td, table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background-color:transparent}
table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0}
table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}
table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px}
table th:last-child, table tr td:last-child, table tr:nth-child(2n) td:last-child{border-right:0}
table td{padding:15px 20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle}
table tr:nth-child(2n + 1) td{background-color:rgba(0,0,0,.025)}
.table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;}
/* css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .wendybox{background-color:#2d2d30;color:#fefefe;}
.darkMode .wendybox table,.darkMode .wendybox table td,.darkMode .wendybox{border-color:rgba(255,255,255,.15);color:#fefefe}
B. Demo Material Design Box Deskripsi
Berikut ini adalah demo Material Design Tabel Box Deskripsi yang bisa diterapkan dengan menggunakan CSS, HTML yang telah disediakan. Pilih satu kode atau lebih di bawah ini, sesuai dengan kebutuhan. Kemudian copy paste ke halaman postingan blog anda.
<div class="wendybox"> <h2>Judul</h2> <!--text kalian di sini--> </div>
Judul1
Teks disini..<div class="wendybox box-blue"> <h2>Judul</h2> <!--text kalian di sini--> </div>
Judul2
<div class="wendybox box-yellow"> <h2>Judul</h2> <ul> <li>text kalian</li> <li>text kalian</li> </ul> </div>
Judul3
- text kalian
- text kalian
<div class="wendybox box-red"> <h2>Judul</h2> <table cellpadding="0" cellspacing="0" style="text-align: left;"> <tbody> <tr><td><b>Nama</b></td> <td>Coding Pro</td></tr> <tr><td><b>Lisensi</b></td> <td>Personal</td></tr> <tr><td><b>Versi</b></td> <td>1.0</td></tr> <tr><td><b>Harga</b></td> <td>Rp.100.000</td></tr> </tbody> </table> </div>
Judul4
| Nama | Coding Pro |
| Lisensi | Personal |
| Versi | 1.0 |
| Harga | Rp.100.000 |
Demikian cara membuat tabel box deskripsi material design di halaman postingan blogger, semoga bermanfaat.
Source:
WendyCode