Messenger Nickname Bangla || মেসেঞ্জার নিকনেম বাংলা

 How to add Custom Material Design Box in Blogger Website  

 Hello! Welcome to Tech Taosin. 

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	Tech Taosin
Version	V1.5
Price	2$
Site Owner	Tech Taosin
Platform/CMS	Blogger
Redesigned by	Tech Taosin
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>

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. 

Please wait 0 seconds...

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated