How to Add Custom Material Design Box Style on Blogger?

Hello Guys! How are you? I hope you are all good. Welcome Freemium Tech website's today's article. Today we will discuss about how to Add Custom Material Design Box In Blogger? If you are looking for a Custom Material Design Box for your Blogger website then this post is just for you and it will definitely help you. So, let's jump today's article.

If your Theme support dark mode so don't worry about it because this Custom Material Design Box also has dark mode CSS that you just want to change the dark mode class that we gave with your theme dark mode class, you can fluently change it by following this tutorial precisely.

Before Add this let's see a preview

Demo

How to Add Custom Material Design Box on Blogger

Important!
Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, Click Theme.

Step 3: Click the arrow down icon next to 'Customize' button.

Step 4: Click Edit HTML, You will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it.

/* material design box */

.wendybox{background-color:#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-color:#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}

.wendybox.box-yellow h2{background:#e2c601}

.wendybox.box-blue h2{background:#2ad2c9}

.wendybox.box-red h2{background:#f7176a}

/* table detail */

table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative}

table.tr-caption-container tr td{background-color:transparent;border:0;padding:0}

table.tr-caption-container tr:nth-child(2n+1) td, table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background-color:transparent}

table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0}

table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}

table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px}

table th:last-child, table tr td:last-child, table tr:nth-child(2n) td:last-child{border-right:0}

table td{padding:15px 20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle}

table tr:nth-child(2n + 1) td{background-color:rgba(0,0,0,.025)}

.table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;}

/* css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */

.darkMode .wendybox{background-color:#2d2d30;color:#fefefe;}

.darkMode .wendybox table,.darkMode .wendybox table td,.darkMode .wendybox{border-color:rgba(255,255,255,.15);color:#fefefe}

Don't forget to change .drK with your website theme dark mode class, if your theme did not have a dark mode feature then keep default!

Step 6: Save the html changes by clicking on Save Icon.

Step 7: Then go to the Post/Page or place which you want to add Custom Material Design Box.

Step 8: Then If you are doing this in Page/Post then don't forget to change Compose view to the HTML view.

Step 9: Now Paste the following HTML code to that place.

Tittle Here

Discription Here

<div class="wendybox">

<h2>Title</h2>

Discription

</div>

Title Here

Your Content Here

<div class="wendybox box-blue">

<h2>Title</h2>

Discription

</div>

Title Here

Text Number 1
Text Number 2

<div class="wendybox box-yellow">

<h2>Title</h2>

<ul>

<li>Text Number 1</li>

<li>Text Number 2</li>

</ul>

</div>

Details

Nama	Freemium Tech
License	Personal
Version	1.0
Price	Taka 100.000

<div class="wendybox">

<h2>Details</h2>

<table cellpadding="0" cellspacing="0" style="text-align: left;">

<tbody>

<tr><td><b>Nama</b></td> <td>Freemium Tech</td></tr>

<tr><td><b>Lisence</b></td> <td>Personal</td></tr>

<tr><td><b>Version</b></td> <td>1.0</td></tr>

<tr><td><b>Price</b></td> <td>Taka 100.000</td></tr>

</tbody>

</table>

</div>

You can change html texts as you want in the code box!

Step 10: Then Save or Publish.

That's done! You are Successfuly add custom Material Design Box style in your page or post.

CONCLUSION

In this article, I shared with you How to Add Custom Material Design Box Style on Blogger? I hope you have liked It. Please do share it with your friends and follow our blog for more.

Join our Telegram Channel to get the lastest posts updates daily.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.