How to add material design box your Blogger website in Post

How to add material design box your Blogger website in Post.

DESCRIPTION

Hello Dear, this is best material design box CSS and XML code of material box for you website in post by Which will make your website article look more beautiful. So I brought this article to you...

Just Follow The Step.

• Go to your blogger Dashboard
• Go to Theme sectionClick on this 🔻 Arrow type button
• Then click on Edit HTMLSearch ]]</b:skin>And paste this below css above the ]]</b:skin>

Please take Backup of your Template before using this below steps for safety

Is Code:

CSS

/* material design box */ .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} 

2nd Code:

CSS

/* 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;} 

Related Posts

• How To set Article Bottom Thank You Note With Tittle Link For Readers
• How To Auto Safelink Genaretor Plus UI Templates | Safelink On Plus UI Template

Notice

Please copy the both css and paste it by sequence above the ]]></b:skin>. Use this sequence:- First paste this css  /* material design box */  Then paste  /* table details */ css below  /* material design box */ css

Code For Material Box
Style 01:

Description

Your Text Here

Writing System In post,

HTML

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

Style 02:

DESCRIPTION

Your_text_here

Writing System In Post,

HTML

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

Style 03:

FEATURESl

• Your_Text_Here
• Your_Text_Here

Writing System In Post:

HTML

<div class="wendybox box-yellow"> <h2 id="FEATURESl">FEATURESl</h2> <ul> <li>Your_Text_Here</li> <li>Your_Text_Here</li> </ul> </div>

Style 04:

Table Demo

Nama	Coding Pro
Lisensi	Personal
Versi	1.0
Harga	Rp.100.000

Writing System In Post:

HTML

<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>

Style 05:

Note:This widget is only for blogger/blogspot platform

Writing System In Post:

HTML

    
  <p class="note noteAlert" style="font-family: sans-serif;"><span style="color: red;">
  Note</span>:This widget is only for blogger/blogspot platform
  </p>
  

You can use this above material box for adding Details of content