Material design box description to beautify the appearance of the blog

Hello to everyone, on this occasion I will share how to make a material design box description to beautify the appearance of your blog.

This tutorial was regulated by Imran shah via email, which is where he sent an example from a blog that I won't mention here, sorry, because the blog shares pirated / cloned templates.

Material design boxes like this will be suitable if used on sales or service-themed sites such as online shops or landing pages, which can explain a product or service being sold in a complete and concise manner.

for the demo you can see in this post, ok for those of you who want to make it, let's see how below.

How to Make a Material Design Box Description

please go to blogger select themeand edit htmlcopy the css below and place it above the code ]]></b:skin>

/* material design box */
  .BSbox{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)}
  .BSbox 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}
  .BSbox.box-yellow h2{background:#e2c601}
  .BSbox.box-blue h2{background:#2ad2c9}
  .BSbox.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 adjust the class if different or delete this section */
  .darkMode .BSbox{background-color:#2d2d30;color:#fefefe;}
  .darkMode .BSbox table,.darkMode .BSbox table td,.darkMode .BSbox{border-color:rgba(255,255,255,.15);color:#fefefe}

if you have, don't forget to click save, and for how to apply it in the post, see the method below

DESCRIPTION

The customer is very important, the customer will be followed by the customer. For those who are sick, they need to drink just as much as they need. Blogging career is my passion as a side hustle. Invalid in sapien football turpis vulputate. The members of the ultricies dignissim.

The customer is very important, the customer will be followed by the customer. For those who are sick, they need to drink just as much as they need. Blogging career is my passion as a side hustle. Invalid in sapien football turpis vulputate. The members of the ultricies dignissim.

Writing Format:


  <div class="BSbox">
  <h2>Judul</h2>
  <!--your text here-->
  </div>

DESCRIPTION

Writing Format:


  <div class="BSbox box-blue">
  <h2>Heading</h2>
  <!--your text here-->
  </div>

FEATURES

Responsive Design
Google Rich Results
Fast Load and SEO Optimize
Google Rich Results
Mobile Friendly
Documentation and Tutorial (Full)

Writing Format:


  <div class="BSbox box-yellow">
  <h2>Heading</h2>
  <ul>
  <li>text list</li>
  <li>text list</li>
  </ul>
  </div>

DETAIL

name	blogger store
Licence	Personal
Version	1.0
Price	Rs.100.000

Writing Format:


  <div class="BSbox">
  <h2>Heading</h2>
  <table cellpadding="0" cellspacing="0" style="text-align: left;">
  <tbody>
  <tr><td><b>Name</b></td> <td>Blogger Store</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>Rs.1020.000</td></tr>
  </tbody>
  </table>
  </div>

ok so that 's how to make a material design box description to beautify the appearance of your blog , hopefully it will be useful, if you have any questions, please leave a comment below with a real account.

SUBSCRIBE OUR YOUTUBE CHANNEL 👉

Blogger store

Material design box description to beautify the appearance of the blog