How to Add Custom Material Design Box In Your Blog 2022

Hello Friends, Welcome to Techy Barrel. Today on this occasion I am going to explain How to Add Custom Material Design Box In Your Blog in 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.

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.

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 </head> tag.
4. And copy the below given CSS and paste it just above </head> tag

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

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  </head>  tag.

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

Now don't forgot to save your theme.

You may want to read this post :

• Your_post_title_here
• Your_post_title_here
• Your_post_title_here

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

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

FEATURES

• Your_Text_Here
• Your_Text_Here

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

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>

Techy Barrel

Name	Lantro Ui
Lisense	Personal
Version	1.6
Price	Rs.199.000

<div class="wendybox">
<h2>Techy Barrel</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b>Name</b></td> <td>Lantro Ui</td></tr>
<tr><td><b>Lisense</b></td> <td>Personal</td></tr>
<tr><td><b>Version</b></td> <td>1.4</td></tr>
<tr><td><b>Price</b></td> <td>Rs.190.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.