How to add material design box your Blogger website in Post

How to add material design box your Blogger website in Post

Hello Dear, i am faruk ahmed. I will giving you best 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 section
• Click on this 🔻 Arrow type button
• Then click on Edit HTML
• Search ]]</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

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

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

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

If your Template have dark mode widget then change the colour of content which you can put in your material box. It's necessary to prevent invisible error in dark mode, If you don't change the colour then user can't able to your content of material box in dark mode.

Rate This Article

Go to Link

Thank You So Much How to add material design box your Blogger website in Post For Reading This Article.