Stay Connected With Us Follow Us Google News!

How to Add Custom Material Design Box In Blog Website

If you want to add costom material design box for blog website then this blog post is for you.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Dear Bloggers: I hope everything is going well for you. Today, we'll look at a guide for adding a custom material design box in blog website.

Meterial Design Box image

You consider how to use it on your blog after seeing someone else use it.

As a result, you are in the proper place. In this article, I'll explain it to you.

Benifits of meterial design box

  • It looks fantastic.
  • Visitors will be astounded.
  • Easy to use.
  • Decorative appearance of your website.

Back then, we simply utilised 2 codes, HTML and CSS. So Do not worry it has no impact on the speed of your website.


If you only want to alter the dark mode class that we provided with your theme's dark mode class, don't worry by carefully following this instruction, you can easily modify it. This Accordion Section also features dark mode CSS.


So let's explore How to Add Custom Material Design Box In Blog Website without wasting any more time.

You can see demo here:-

How to Add Custom Material Design Box In Blog Website

ImportantBefore we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First Login to your Blogger Dashboard.

Step 2: Click Theme on the Blogger Dashboard.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click on Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it. Or you can paste it above <head/> tag by adding <style>5</style>
.mtbox{margin-top:17px;padding:15px;border-radius:10px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;background-color: #ffffff; opacity: 1; background-image: radial-gradient(#e7e7e7 2px, #ffffff 2px); background-size: 40px 40px; } .box-info{padding:2px;border:1px solid #f0f0f0;margin-top:12px;border-radius:5px;background-color:#FFFFFFBF; } .mtbox h2{background:#f7176a;border-radius:5px;padding:8px 20px!important;margin:0!important;font-size:17px!important;color:#fff;top:-20px;font-weight:bold;left:30px;text-transform:uppercase;text-align: center;}
/*color by gamingsalt media */.mtbox.yellow h2{background-image: radial-gradient( circle 957px at 8.7% 50.5%, rgba(246,191,13,1) 0%, rgba(249,47,47,1) 90% );} .mtbox.red h2{background-image: radial-gradient( circle 905.6px at 4.9% 7.9%, rgba(218,0,0,1) 14.1%, rgba(168,2,144,1) 65%, rgba(102,2,110,1) 90% );} .mtbox.blue h2{background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(37,145,251,0.98) 0.1%, rgba(0,7,128,1) 99.8% );} .mtbox.black h2{background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(90,92,106,1) 0%, rgba(32,45,58,1) 81.3% );} .mtbox.pink h2{background-image: radial-gradient( circle 602px at 2.1% 5.1%, rgba(233,0,120,1) 0%, rgba(0,0,0,1) 90.1% );}
/* darkmode color */
.drK .mtbox{box-shadow: rgba(50, 50, 93, 225.25) 0px 2px 5px -1px, rgba(225, 225, 225.3) 0px 1px 3px -1px;background-color:#292929;background-image: radial-gradient(#363434 2px, #141313 2px); background-size: 40px 40px; }.drK .box-info{background-color: #363535B5;}
  

Don't forget to change .drK with your website theme dark mode class, if your theme did not have a dark mode feature then keep default!

Step 6: Save the html changes by clicking on this icon

Step 7: Then go to the post/page or place which you want to add Custom Numbering List

Step 8: Then if you are doing this in page/post then In post editor view, click icon at the bottom right of the title.
Two options will appear: HTML view and Writing view, Select 'HTML View'.

Step 9: Now paste the following HTML code to that place
<!--[ change the color code as you need. red, yellow, pink, blue, black ]-->
<div class="mtbox red">
<!---[ heading h2 ]-->  
<h2>Your Heading Here</h2>
<!---[ paragrap p ]-->
<div class="box-info">  
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div></div>
<div class="mtbox yellow"><h2>Your Heading Here</h2><div class="box-info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div><div class="mtbox blue"><h2>Your Heading Here</h2><div class="box-info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div><div class="mtbox black"><h2>Your Heading Here</h2><div class="box-info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div><div class="mtbox pink"><h2>Your Heading Here</h2><div class="box-info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div>
  

You can change html texts as you want in the code box!

Step 10: Then Save or Publish.

Important info

I've included five different types of header colours for you here. How will we employ these colours is the question at hand.
You must modify the HTML code for this.
Examine the HTML code provided in Step 9 carefully.
<div class="mtbox red"> The names of the colours that you have bookmarked in the text you are reading will be changed. The names of the hues are as follows:
  • Red
  • Yellow
  • Blue
  • Black
  • Pink

Finally, I believe you have a firm grasp of all the processes. Comment below with any problems or questions you may have.

Conclusion 

So, I hope you enjoy reading this post. Therefore, we spoke about how to add a Material Design Box in blogger website theme today. Please "like" our post and "follow" our site to get frequent updates of this kind of stuff.
I appreciate your visit. Enjoy your day!

Terms of use

This content may not be modified in any way. It is strictly forbidden to copy this post, the canons, or any other component of the composition without permission. if you do, legal action will be taken against you.

© Copyright:
www.gamingsalt.com

Please chat with our team Admin will reply in a few minutes
Hello, Is there anything we can help you with? ...
Start chat...

Post a Comment

Leave a comment according to the topic of the article, tick Notify me to get a notification via email when your comment is replied to.
Enter image URL or snippet code, or Quote, then click the button you want to parse. Copy the parse result and paste it into the comments field.


image quote pre code

Please don't share any sensitive or personal details here.

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.