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.
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 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 ''.
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!
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