We are making major changes to this site. Reach us if you are facing any issue by clicking on Report. Contact US!

How to Add Custom Material Design Box In Your Blog

Please wait 30 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hello friends, today I am going to tell you how we can install custom material box. In today's post on blogger's website, I will tell you. Friends, many people work very hard to make their blog beautiful and attractive, so that our readers who come to our website, they like to read and like it while reading, friends, the main reason for this is that this is your blog and Also attracts.

Why We Use Custom Material Design Boxes

Friends, due to the very large article, we all use color boxes, because friends, our readers who come by using this, do not feel bored in it, friends, they feel bored because friends, we all from top to bottom He writes Without any notes and paragraphs, friends, from this post you will be able to learn how to apply color boxes, which will make both your readers and your blog interesting.

Benefits of Custom Material Design Boxes

  1.  Friends, we can make our blog more attractive with custom material design box. And friends, which makes it easier for your visitors to see and read,
  2. Friends, this custom design material box looks very beautiful and also improves the impression of your site.
  3. Friends, your visitors who come from the custom material design box stay there for some time after seeing our design.
  4. Friends, you do not even need JavaScript to use it.
  5. Friends, the visitors who come to our site, we also keep their interest and they also get engaged.
  6. Friends, with the help of this, we can make our blog even more beautiful by applying Material Design box in our post article.

How to add custom material design box to our blog

Friends, first of all you have to take a backup of your blogger theme, this is because friends, because whatever code we put in the HTML of our blogger, if there is any mistake, then with the help of our backup theme, we can restore it to normal. Custom Material Design Box Friends, you will need some source code to put in your blog, which you have to copy and paste, with the help of this blog post in your blogger's templates, friends, keep having fun and learning something new. Stay

  1. First of all you have to go to your blogger dashboard.
  2. Now you have to click on the option of Edit HTML in your theme section.
  3. Friends, now you have to type Ctrl+F on your keyboard and search ]]</b:skin>
  4. Friends you have to copy the css code and paste it before ]]</b:skin> .
            /* Custom Material Design Box  by Techy Shreya*/
.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}
/* Custom Material Design Box by Techy Shreya*/
.tsbox.box-TS1 h2{background: linear-gradient(90deg, #FF012D, #FF8B7F);}
.tsbox.box-TS2 h2{background: linear-gradient(90deg, #AA04FF, #CEA3FF);}
.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:#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)}

  1. Friends, now below I have given you another material design box code, you also have to paste it after the CSS code.
      /* 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;}

How to use custom material design box in your blog

Friends, this code box is useful in our post to create custom material design box which is given below.


  • Your_Text_Here
  • Your_Text_Here

Friends, this code is of the above box.👇🏻
      <div class="tsbox">
<li>Your_Text_Here</li> </ul> </div>
Friends, whatever the boxes are, they have three additional color codes which I have given below.

Yellow Box


Friends, this code is of the above box.👇🏻
      <div class="tsbox box-TS1">
<h2>Yellow Box</h2>

Blue Box


Friends, this code is of the above box.👇🏻
    <div class="tsbox box-TS3">
<h2>Blue Box</h2>

Red Box


Friends, this code is of the above box.👇🏻
   <div class="tsbox box-TS4">
    <h2>Red Box</h2>
Friends, this code has been created by mixing the code of all the boxes, you can see below the name of the material and how it is designed.

Techy Shreya

Name Techy Shreya
Lisense Personal
Version 1.0
Price Rs.300.000
Friends, this code is of the above box.👇🏻
   <div class="tsbox box-TS5">
<h2>Techy Shreya</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tr><td><b>Name</b></td> <td>Techy Shreya</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.300.000</td></tr>
© Tech Shreyansh

About the Author

I am Techy Shreya. Android Developer, Web Designer and Developer, Modder and Blogger.

Post a Comment

Want a Help Reagarding Website Design and Help from our WebSite? Submit a request below:
  Contact Us
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.