How to make material design box description to beautify in blogger
Hi everybody, on this event I will share how to make a material plan box portrayal to embellish the presentation of your blog.
Material plan boxes like this will be appropriate whenever utilized on deals or administration-themed destinations like online shops or points of arrival, which can clarify an item or administration being sold in a total and brief way.
How to Make a Material Design Box Description
Add CSS
- Go to the Blogger dashboard
- Go to the Themes Section
- Click Edit HTML Button.
- Copy the CSS code and paste the code in ]]<b:skin>
/* material design box */
.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}
/* 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;}
Notes
If your template already has a css table, please delete it first so it doesn't conflict or you can also don't copy the css that I named /* table details */ above if you want to use your style table,
For users of the median ui template in the css above, which I named /* table details */ don't copy it because the css is already in the median ui template, so that it looks like the demo, just add the css below.
.Blog table{min-width:70%;margin:0 auto;border:0;overflow:hidden;font-size:14px;}
.Blog table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}
.dark-mode .wendybox{background:#2d2d30;border:unset;}
DESCRIPTION
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egestas justo bibendum et. Aeneas's a warm-up to my emissions. It's time to be in the kitchen for the ugly football problems. Pellentesque sodales ultricies dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egestas justo bibendum et. Aeneas's a warm-up to my emissions.
Writing Format:
<div class="wendybox">
<h2>DESCRIPTION</h2>
<p>Your_text_here</p>
</div>
DESCRIPTION
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egestas justo bibendum et. Aeneas's a warm-up to my emissions. It's time to be in the kitchen for the ugly football problems. Pellentesque sodales ultricies dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egestas justo bibendum et. Aeneas's a warm-up to my emissions.
Writing Format:
<div class="wendybox box-blue">
<h2>Judul</h2>
<p>Your_Text_Here<p>
</div>
FEATURES
- Responsive Design
- Google Testing Tool Validator
- 404 page
- Shortcode
- Auto Read More With Thumbnail
- Responsive Footer
<div class="wendybox box-yellow">
<h2>FEATURESl</h2>
<ul>
<li>Your_Text_Here</li>
<li>Your_Text_Here</li>
</ul>
</div>
DETAIL
| Nama | Coding Pro |
| Lisensi | Personal |
| Versi | 1.0 |
| Harga | Rp.400.000 |
<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>