Let's follow the steps below...
- Go to your blogger Dashboard
- Go to Theme section
- Click on this 🔻 Arrow type button
- Then click on Edit HTML
- Search ]]</b:skin>
- And paste this below css above the ]]</b:skin>
- or just add it to your style
Please Backup your Template before doing anything for safety sake....
/* material design box by Wendy */ .wendybox{background:#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:#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}
Do not copy the table CSS if you are using Plus UI, Median ui or any template from Maki or Deo...it's already there.
/* table detail */ .Blog table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative} .Blog table.tr-caption-container tr td{background-color:transparent;border:0;padding:0} .Blog table.tr-caption-container tr:nth-child(2n+1) td, .Blog table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background:transparent} .Blog table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0} .Blog table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px} .Blog table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px} .Blog table th:last-child, .Blog table tr td:last-child, .Blog table tr:nth-child(2n) td:last-child{border-right:0} .Blog table td{padding:15px 20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle} .Blog table tr:nth-child(2n + 1) td{background-color:rgba(0,0,0,.025)} .Blog .table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;} .drK .wendybox{background:#130f40}.clicker{background:#fff}.clicker.is-active{opacity:0;-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';filter:alpha(opacity=0);transition:opacity 900ms ease,transform 900ms ease;transform:scale(1)}
Code For Material Box
Style 1:
Writing Format In post,
<div class="wendybox"> <h2>DESCRIPTION</h2> <p>Your_text_here</p> </div>
Writing Format In Post,
<div class="wendybox box-blue"> <h2>DESCRIPTION</h2> <p>Your_text_here</p> </div>
Writing Format In Post:
<!--[ Code Box 1 ]--> <div class='K2_CBox'> <div class='CB_Heading'> <span>HTML</span> <button id='copy1' class='C_box_main' onclick="copyC('copy1','code1')"> <i class='CBox_icn'></i> </button> </div> <!--Add Your Parse HTML code Here--> <div id='code1'> <pre>
Writing Fromat In Post:
<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>
If your Template have dark mode then adjust it to your own template.