Notification texts go here Contact Us Buy Now!
Posts

How to Add Custom Material Design Box in your Blogger Post ?

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Step:1

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

  /* 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}
.clicker {width:60px;height:60px;margin-left:-30px;margin-top:-30px;background:#204ecf;border-radius:100%;position:absolute;transform:scale(0);opacity:.3;-ms-filter:none;filter:none;z-index:9999;pointer-events:none}.drkM .wendybox{background:#130f40}.clicker{background:#fff}.clicker.is-active{opacity:0;-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';filter:alpha(opacity=0);transition:opacity 900ms ease,transform 900ms ease;transform:scale(1)}

Step:2

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

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

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

FEATURESl

  • Your_Text_Here
  • Your_Text_Here
<div class="wendybox"> <h2>FEATURESl</h2> <ul> <li>Your_Text_Here</li> <li>Your_Text_Here</li> </ul> </div>

Yellow Box

Your_Description

<div class="wendybox box-yellow"><h2>Yellow Box</h2><p>Your_Description</p></div>

Blue Box

Your_Description

<div class="wendybox box-blue"><h2>Blue Box</h2><p>Your_Description</p></div>

Red Box

Your_Description

<div class="wendybox box-red"><h2>Red Box</h2><p>Your_Description</p></div>

MofiVai

Name Plus Ui
Lisense Personal
Version 2.0
Price Rs.300.000
<div class="wendybox">
<h2>Tech Aadi</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b>Name</b></td> <td>Plus Ui</td></tr>
<tr><td><b>Lisense</b></td> <td>Personal</td></tr>
<tr><td><b>Version</b></td> <td>2.0</td></tr>
<tr><td><b>Price</b></td> <td>Rs.300.000</td></tr>
</tbody>
</table>
</div>
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.