Elevate Your Blogger Website: Adding Material Design Boxes to Your Posts

Hi! there, today am only going to show you how to add a material design to your blog or website using just HTML and CSS..... so let's start..

Let's follow the steps below...

• Go to your blogger Dashboard
• Go to Theme section
• Click on this 🔻 Arrow type button
• Then click on Edit HTML
• Search ]]</b:skin>
• And paste this below css above the ]]</b:skin>
• or just add it to your style

Please Backup your Template before doing anything for safety sake....

/* material design box by Wendy */ .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} .wendybox.box-yellow h2{background:#e2c601} .wendybox.box-blue h2{background:#2ad2c9} .wendybox.box-red h2{background:#f7176a}

Do not copy the table CSS if you are using Plus UI, Median ui or any template from Maki or Deo...it's already there.

/* 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;} .drK .wendybox{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)}

Code For Material Box
Style 1:

  Demo
Writing Format In post,

<div class="wendybox"> <h2>DESCRIPTION</h2> <p>Your_text_here</p> </div>

Style 2: 

Demo
Writing Format In Post,

<div class="wendybox box-blue"> <h2>DESCRIPTION</h2> <p>Your_text_here</p> </div>

Style 3: 

Demo
Writing Format In Post:

<!--[ Code Box 1 ]--> <div class='K2_CBox'> <div class='CB_Heading'> <span>HTML</span> <button id='copy1' class='C_box_main' onclick="copyC('copy1','code1')"> <i class='CBox_icn'></i> </button> </div> <!--Add Your Parse HTML code Here--> <div id='code1'> <pre>

Style 4:

  Demo
Writing Fromat In Post:

<div class="wendybox">
<h2>Judul</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b>Nama</b></td> <td>Coding Pro</td></tr>
<tr><td><b>Lisensi</b></td> <td>Personal</td></tr>
<tr><td><b>Versi</b></td> <td>1.0</td></tr>
<tr><td><b>Harga</b></td> <td>Rp.100.000</td></tr>
</tbody>
</table>
</div>

You can use the above material box for adding Details of content or an item

If your Template have dark mode then adjust it to your own template.

Conclusion 

Adding Material Design boxes to your Blogger posts is a great way to give your website a modern, polished look. These boxes help organize your content, making it more visually appealing and easier to digest. 

With some HTML and CSS know-how, you can elevate your Blogger website and create posts that stand out in the blogosphere. 

 So, get ready to revamp your Blogger website with Material Design boxes and impress your readers with a sleek and organized design that keeps them coming back for more. Happy blogging!

Check this Out: