Widget Tabel Box Tampilan Deskripsi

Widget Tabel Box Tampilan Deskripsi

Widget Tabel Box

Cara membuat tabel box tampilan deskripsi material design box.

Sebelum nya buka Tema Blogger dan Edit HTML.

Script CSS Tabel Box Deskripsi Tampilan

Letakan kode di bawah ini, di atas ]]></b:skin>

/* 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}

Output

Pilih satu kode atau lebih di bawah ini, sesuai dengan kebutuhan. Kemudian copy paste ke halaman blogger anda.

<div class="wendybox">
<h2>Judul</h2>
<!--text kalian di sini-->
</div>

Judul

Teks disini..

<div class="wendybox box-blue">
<h2>Judul</h2>
<!--text kalian di sini-->
</div>

Judul

<div class="wendybox box-yellow">
<h2>Judul</h2>
<ul>
<li>text kalian</li>
<li>text kalian</li>
</ul>
</div>

Judul

• 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>

Judul

Nama	Coding Pro
Lisensi	Personal
Versi	1.0
Harga	Rp.100.000

Demikian cara membuat tabel box deskripsi material design di halaman blogger.

Source:
WendyCode