Discover the Benefits of Canva Pro for Free and Elevate Your Designs | Get it for Free

Custom Material Design Box

Let's Begin

Step #1:  Login to your Blogger Dashboard

Step #2: Click on theme section.

Step #3: After that edit HTML.

Step #4: Type Ctrl+F on the keyboard and search for ]]<b:skin> tag.

Step #5: After that copy the below CSS code and paste it before ]]<b:skin> tag.

/* Custom Material Box by abdullahdcurz.blogspot.com*/
.abdullahdcurz{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)}
.abdullahdcurz 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}
/* Custom Material Box by abdullahdcurz.blogspot.com*/
.abdullahdcurz.box-yellow h2{background:#e2c601}
.abdullahdcurz.box-blue h2{background:#2ad2c9}
.abdullahdcurz.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}
.drK .abdullahdcurz{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)}

Step #6: Copy the below code of Material Design Box and just paste after the above CSS code. 

.abdullahdcurz table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative} 
.abdullahdcurz table.tr-caption-container tr td{background-color:transparent;border:0;padding:0} 
.abdullahdcurz table.tr-caption-container tr:nth-child(2n+1) td, .abdullahdcurz table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background:transparent} 
.abdullahdcurz table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0} 
.abdullahdcurz table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px} 
.abdullahdcurz table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px} 
.abdullahdcurz table th:last-child, .abdullahdcurz table tr td:last-child, .abdullahdcurz table tr:nth-child(2n) td:last-child{border-right:0} 
.abdullahdcurz table td{padding:15px 20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle} 
.abdullahdcurz table tr:nth-child(2n + 1) td{background-color:rgba(0,0,0,.025)} 
.abdullahdcurz .table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;}

HOW TO USE THESE CUSTOM MATERIAL DESIGN BOX IN YOUR BLOG

The box codes that can be used in a post to create a Custom Material Design Box are listed below.

FEATURES

• Your_Text_Here
• Your_Text_Here

<div class="abdullahdcurz">
 <h2>FEATURES</h2>
 <ul> 
<li>Your_Text_Here</li> 
<li>Your_Text_Here</li> </ul> </div>

Yellow Box

Your_Description

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

Blue Box

Your_Description

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

Red Box

Your_Description

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

Trick With Abdullah

Name	Trick With Abdullah
Lisense	Personal
Version	1.0
Price	Rs.900.xxx

<div class="abdullahdcurz">
<h2>Trick With Abdullah</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b>Name</b></td> <td>Trick With Abdullah</td></tr>
<tr><td><b>Lisense</b></td> <td>Personal</td></tr>
<tr><td><b>Version</b></td> <td>1.0</td></tr>
<tr><td><b>Price</b></td> <td>Rs.900.xxx</td></tr>
</tbody>
</table>
</div>

I hope you were able to successfully add the Custom Material Design Box to your Blogger blog after completing the preceding steps. Please contact us if you experience any kind of issue.

Before starting always backup your template for any kind of error and easy restoration.

Copyright:
www.abdullahdcurz.blogspot.com

Go to Link

Go to Link