How to Add Custom Material Design Box In Your Blog

Rate this post

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.

Picsart 23 02 07 23 31 39 910

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)}
  
  

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.
  • Friends, this code is of the above box.👇🏻
            <div class="tsbox">
 <h2>FEATURES</h2>
 <ul> 
<li>Your_Text_Here</li> 
<li>Your_Text_Here</li> </ul> </div>
  
  
  • Friends, whatever the boxes are, they have three additional color codes which I have given below.
  • Friends, this code is of the above box.👇🏻
            <div class="tsbox box-TS1">
<h2>Yellow Box</h2>
<p>Your_Description</p></div>
  
  
  • Friends, this code is of the above box.👇🏻
          <div class="tsbox box-TS2">
<h2>Blue Box</h2>
<p>Your_Description</p></div>
  
  
  • Friends, this code is of the above box.👇🏻
         <div class="tsbox box-TS3">
    <h2>Red Box</h2>
    <p>Your_Description</p></div>
  
  

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.

  • Friends, this code is of the above box.👇🏻
        <div class="tsbox box-TS">
<h2>Techy Shreya</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<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>
</tbody>
</table>
</div>
  
  
One Request?

I worked hard on this post to help the blogging community. It would help me a lot if you consider sharing it on social media networks. Because Sharing Is Caring.. ♥️

Sharing Is Caring...
alt_here

Hello! My name is Tech Shreyansh, and I'm a Youtuber and Content Creator from Azamgarh, India. I have a channel on YouTube called Tech Shreyansh where I upload Tech Video, Also I'm a Professional Web Developer or Designer. I enjoy playing with Codes and making Interesting Things.

Leave a comment