How to Add Custom Material Design Box Style on Blogger Site?

How to Add Custom Material Design Box on Blogger

View Demo

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	ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ
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>ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ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

This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box.

Copyright ©

ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ