How to Add Custom Material Design Box In Your Blog

Hello Blogger's, how are you I hope you are doing good. Today we are going to see the tutorial for Adding Custom Material Desing Box for your website.

You have seen someone using it and think of how to implement it on your blog.

So you have come to right place. I am going to explain it to you in this article.

Benefits of Custom Material  Design Box

• It look amazing.
• Visitors will be amazed.
• Easy to apply.
• Decorated look in your website.

Demo

You have to add two codes for the material box design. And if you are using Median Ui then you have to add only material box code.

Before following the below given steps kindly Backup Your Theme for any kind of error and easy Restoration.

Adding Material Box Design in Template

Step 1

1. Open your Blogger dashboard.
2. Go to HTML section and click on Edit HTML.
3. Then search for this ]]</b:skin> tag.
4. And copy the below given CSS and paste it just above ]]</b:skin> tag.

  /* 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}
.clicker {width:60px;height:60px;margin-left:-30px;margin-top:-30px;background:#204ecf;border-radius:100%;position:absolute;transform:scale(0);opacity:.3;-ms-filter:none;filter:none;z-index:9999;pointer-events:none}.drkM .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)}

Change the marked section class .drkM with your theme class for working in dark mode.

Now follow the below steps if you want to use table in other template. Don't add this table for Median Ui.

Step 2

Copy the below code and just paste below the Material Design Box CSS and above the code ]]</b:skin> tag.

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

Now don't forgot to save your theme.

If you are adding the /* table detail */ CSS then add just below /* material design box */ css code and above ]]></b:skin> in a given sequence.

If you are using Median Ui then don't copy the /* table detail */ because it is already there.

Below are the box codes which can be used in post to create Material Design Box.

FEATURE

• Your_Text_Here
• Your_Text_Here

Code for the above box.

<div class="wendybox"> <h2>FEATURESl</h2> <ul> <li>Your_Text_Here</li> <li>Your_Text_Here</li> </ul> </div>

You can add 3 more color for boxes. Use below given code.

Yellow Box

Your_Description

<div class="wendybox box-yellow"><h2>Yellow Box</h2><p>Your_Description</p></div>

Blue Box

Your_Description

<div class="wendybox box-blue"><h2>Blue Box</h2><p>Your_Description</p></div>

Red Box

Your_Description

<div class="wendybox box-red"><h2>Red Box</h2><p>Your_Description</p></div>

Below is the box with Material Design and with Table Detail codes combined.

Tech Aadi

Name	Plus Ui
Lisense	Personal
Version	2.0
Price	Rs.300.000

<div class="wendybox">
<h2>Tech Aadi</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b>Name</b></td> <td>Plus Ui</td></tr>
<tr><td><b>Lisense</b></td> <td>Personal</td></tr>
<tr><td><b>Version</b></td> <td>2.0</td></tr>
<tr><td><b>Price</b></td> <td>Rs.300.000</td></tr>
</tbody>
</table>
</div>

So here it is now I think you have understood all the steps. If you are having any trouble or queries comments below.

Conclusion

So I hope you like this post. So today we have discussed about how to add Material Design Box in blogger theme. Do like our post and follow our blog for regular updates of content like this.

Go to Link