How to add Custom Material Design Box in Blogger Website

 Hello! Welcome to Action CodeD. 

You are looking for How to add Custom Material Design Box in Blogger Website then this post is just for you.

Custom Material Design Box in Blogger

Step 1: Login to your Blogger Dashboard 

Step 2: Go to Theme option & click Dropdown Then Select EDIT HTML. 

Step 3: Now Find the following code ]]></b:skin> paste above it.

/* Custom Material Design Box*/
.tsbox{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)}
.tsbox h2 {background: linear-gradient(to right,#11998e,#38ef7d);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}
.tsbox.box-TS1 h2{background: linear-gradient(90deg, #7E04FF, #02FBFF);}
.tsbox.box-TS2 h2{background: linear-gradient(90deg, #FDB40D, #F4D998);}
.tsbox.box-TS3 h2{background: linear-gradient(to right, #f12711, #f5af19);}
.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}
.drK .tsbox{background:#252525}.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)}

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

Step 4: Now click on save theme. 

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

INFORMATION

Site Name	Tecky AaryaN
Version	V1.5
Price	2$
Site Owner	AaryaN Sah
Platform/CMS	Blogger
Redesigned by	AaryaN
Website	Site

<div class="tsbox">
<h2>INFORMATION</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b>Site Name</b></td> <td>Tecky AaryaN</td></tr>
<tr><td><b>Version</b></td> <td>V1.5</td></tr>
<tr><td><b>Price</b></td> <td>2$</td></tr>
<tr><td><b>Site Owner</b></td> <td>AaryaN Sah</td></tr>
<!--<tr><td><b>Last updated on</b></td> <td>November 2022</td></tr>-->
<tr><td><b>Platform/CMS</b></td> <td>Blogger</td></tr>
<tr><td><b>Redesigned by</b></td> <td>AaryaN</td></tr>
<tr><td><b>Website</b></td> <td><a class="button" href="https://www.teckyaaryan.com/">Site</a></td></tr>
</tbody>
</table>
</div>

DESCRIPTION

Your_Description

<div class="tsbox box-TS3">
<h2>DESCRIPTION</h2>
<p>Your_Description</p></div>

FEATURES

1. Added SafeLink Feature
2. Changed header design

<div class="tsbox box-TS2">
<h2>FEATURES</h2>
<ol class="style1">
<li> Added SafeLink Feature</li>
<li> Changed header design</li></ol></div>

DESCRIPTION

Your_Description

<div class="tsbox box-TS1">
<h2>DESCRIPTION</h2>
<p>Your_Description</p></div>

Conclusion

I hope you have successfully added your Custom Material Design. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright: 

Action Coded