How To Add Material Design Box To Blogger Template

 Material design box is a great way to visualize your blog post's sections. There are two kinds of material boxes you can see. One is gradient colored material box and the other one is with solid color.

In this blog, I will show you how to use both gradient color material box and solid color material design box on Blogger. 

What is a Material Design Box?

Material design boxes are a great way to add visual interest to your blog posts and make them more engaging for your readers. They can be used to highlight important information, call to action buttons, or simply to add a touch of style to your blog.

Benefits of Material Design Box

To add a material design box to your Blogger blog post using custom CSS and HTML code, follow these steps:

Step 1: Log in to your Blogger Dashboard and go to Theme > Customize > Edit HTML.

Step 2: Now search for ]]></b:skin> and paste the code below above it.

.wikibox{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, 0.07)}.wikibox h2{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}.wikibox.box-red h2{background: #ff3333}.wikibox.box-yellow h2{background: #e2d301}.wikibox.box-blue h2{background: #2a86d2}.wikibox.box-green h2{background: #02d07a}.wikibox.box-redSG h2{background: linear-gradient(to right, #ff0033, #ff6633)}.wikibox.box-blueSG h2{background: linear-gradient(90deg, #7e04ff, #02fbff)}.wikibox.box-yellowSG h2{background: linear-gradient(to right, #f12711, #f5af19)}.wikibox.box-greenSG h2{background: linear-gradient(to right, #11998e, #38ef7d)}

Step 3: If you are using any other Blogger template that is not Plus UI, Median UI, Lantro, Fletro Pro, or a similar template, then copy and paste the code below too.

.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 0;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 material design box for your Blogger blog post

Now that we have added the material design box to the blogger template, now it's time to use the material box in your blog post. Follow the steps below to use the material design box in your blog post.

Step 1: First write your blog post or blog section and then go to the HTML view mode.

Step 2: Now all you need to do is warp the part of your blog post that you want to add material box with the <div> tag and the proper "class" for the color. Look the the example below to understand it properly.

<div class="wikibox box-red">
  <h2>This is heading</h2>
  <p>Here is some paragraph</p>
</div>

That's it! This is how you can use the material design box for your blog post. Here is the list of class names for other material box colors.

1. For Blue: box-blue
2. For Yellow: box-yellow
3. For Green: box-green
4. For Red (Gradient): box-redSG
5. For Blue (Gradient): box-blue-SG
6. For Green (Gradient): box-greenSG
7. For Yellow (Gradient): box-yellowSG

Tips for Using Material Design Boxes in Your Blogger Blog Posts

Here are some additional tips for using material design boxes in your Blogger blog posts:

• Use material design boxes to highlight important information, such as announcements, special offers, or call-to-action buttons.
• Use material design boxes to break up your blog posts and make them more visually appealing.
• Use material design boxes to add a touch of style to your blog posts.
• Be careful not to overuse material design boxes, as they can become cluttered and distracting.

Conclusion

Material design boxes are a great way to add visual interest and style to your Blogger blog posts. By following the steps above, you can easily add material design boxes to your blog, whether you are using a pre-made material design Blogger template or your own custom template.