material design box deskripsi untuk mempercantik tampilan blog

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat material design box deskripsi untuk mempercantik tampilan blog kalian.

tutorial ini di reguest oleh Dwi Prastyo via email,yang di mana beliau mengirimkan contoh dari blog yang tidak akan saya sebutkan di sini mohon maaf, karena blog tersebut membagikan template bajakan / cloningan.

material design box seperti ini akan cocok apabila di pakai di situs yang bertema penjualan atau jasa seperti toko online atau landing page, yang dapat menjelaskan suatu produk atau jasa yang di jual secara lengkap dan ringkas.

untuk demonya bisa lihat di dalam postingan ini, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Cara Membuat Material Design Box Deskripsi

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

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

jika sudah jangan lupa untuk klik simpan, dan untuk cara menerapkanya di postingan simak caranya di bawah ini

Format penulisan :

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

Format penulisan :

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

Format penulisan :

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

Format penulisan :

<div class="wendybox">
<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>

ok jadi sekian cara membuat material design box deskripsi untuk mempercantik tampilan blog kalian semoga bermanfaat, jika punya pertanyaan silakan tinggalkan komentar di bawah ini dengan akun asli.