How to add a gradient material design box to your Blogger blog post using Custom CSS and HTML Code ?

Step:1

সর্বপ্রথমে নিচের CSS Code টি Copy করুন । AndThan Edit HTML এ গিয়ে ]]></b:skin> এর উপর এই Copy করা CSS Code টিকে Past করুন ।

.wikibox{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)}.wikibox h2{background-image:linear-gradient(to right,#25aae1,#4481eb,#04befe,#3f86ed);box-shadow:0 4px 15px 0 rgba(65,132,234,.75);Color:#fff;padding:10px;border-radius:7px;padding:8px 20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#fff;top:-20px;font-weight:700;left:30px;text-transform:uppercase}.wikibox.box-yellow h2{background-image:linear-gradient(to right,#f5ce62,#e43603,#fa7199,#e85a19);box-shadow:0 4px 15px 0 rgba(229,66,10,.75);Color:#fff;padding:10px;border-radius:7px}.wikibox.box-green h2{background-image:linear-gradient(to right,#0ba360,#3cba92,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(23,168,108,.75);Color:#fff;padding:10px;border-radius:7px}

Step:2

এরপর নিচের css কোড টি Copy করুন ।এবং আগের CSS Code টির নিচে ]]></b:skin> এর উপর এই Copy করা CSS Code টি Past করুন ।

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

ব্যাস,আপনার কাজ শেষ । এখন আপনি Post এর মধ্যে নিচের Code গুলি Use করুন ।

This is heading

Here is some paragraph

<div class="wikibox">
  <h2 id="Template_Details">This is heading</h2>
  <p>Here is some paragraph</p>
</div>

This is heading

Here is some paragraph

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

This is heading

Here is some paragraph

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

Go to Link