Buy Plus UI v2.6! Demo Buy Now!

How to Add Custom Material Design Box In Your Blog

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

Hello Blogger's, how are you I hope you are doing good. Today we are going to see the tutorial for Adding Custom Material Desing Box for your website.

How to Add Custom Material Design Box In Your Blog

You have seen someone using it and think of how to implement it on your blog.

So you have come to right place. I am going to explain it to you in this article.

Benefits of Custom Material  Design Box

  • It look amazing.
  • Visitors will be amazed.
  • Easy to apply.
  • Decorated look in your website.

You have to add two codes for the material box design. And if you are using Median Ui then you have to add only material box code.

Before following the below given steps kindly Backup Your Theme for any kind of error and easy Restoration.

Adding Material Box Design in Template

Step 1

  1. Open your Blogger dashboard.
  2. Go to HTML section and click on Edit HTML.
  3. Then search for this ]]</b:skin> tag.
  4. And copy the below given CSS and paste it just above ]]</b:skin> tag.
  /* material design box */
.wendybox{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)}
.wendybox 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} h2{background:#e2c601} h2{background:#2ad2c9} 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}.drkM .wendybox{background:#130f40}.clicker{background:#fff}{opacity:0;-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';filter:alpha(opacity=0);transition:opacity 900ms ease,transform 900ms ease;transform:scale(1)}

Change the marked section class .drkM with your theme class for working in dark mode.

Now follow the below steps if you want to use table in other template. Don't add this table for Median Ui.

Step 2

Copy the below code and just paste below the Material Design Box CSS and above the code ]]</b:skin> tag.

/* table detail */ .Blog{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative} .Blog tr td{background-color:transparent;border:0;padding:0} .Blog tr:nth-child(2n+1) td, .Blog tr:nth-child(2n+1) td:first-child{border:0;background:transparent} .Blog .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;}
Now don't forgot to save your theme.

If you are adding the /* table detail */ CSS then add just below /* material design box */ css code and above ]]></b:skin> in a given sequence.

If you are using Median Ui then don't copy the /* table detail */ because it is already there.

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


  • Your_Text_Here
  • Your_Text_Here

Code for the above box.

<div class="wendybox"> <h2>FEATURESl</h2> <ul> <li>Your_Text_Here</li> <li>Your_Text_Here</li> </ul> </div>

You can add 3 more color for boxes. Use below given code.

Yellow Box


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

Blue Box


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

Red Box


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

Below is the box with Material Design and with Table Detail codes combined.

Tech Aadi

Name Plus Ui
Lisense Personal
Version 2.0
Price Rs.300.000
<div class="wendybox">
<h2>Tech Aadi</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tr><td><b>Name</b></td> <td>Plus Ui</td></tr>
<tr><td><b>Lisense</b></td> <td>Personal</td></tr>
<tr><td><b>Version</b></td> <td>2.0</td></tr>
<tr><td><b>Price</b></td> <td>Rs.300.000</td></tr>

So here it is now I think you have understood all the steps. If you are having any trouble or queries comments below.


So I hope you like this post. So today we have discussed about how to add Material Design Box in blogger theme. Do like our post and follow our blog for regular updates of content like this.

Getting Info...

About the Author

Hello Friends. Welcome to my website. I hope you all are doing good. If you like our work. Please revisit again. And do like and follow our blogs.

Buy me a Coffee


  1. ok bro
    1. Yes bro
  2. i dont understand on step change class .drkM (im using Median UI 1.6) the background still white when on dark mode.
    1. Have you change the color code in dark mode. And please check your theme dark mode class.
Please do not spam in the comment section or your comment will not be approved.
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.