How to Add Custom Material Design Box In Your Blog

How To Add Heart Clicks Effect on Blogger Website

Published by Techy Shreya On February 17, 2023

So friends, today again welcome all of you to our new and interesting blog, today friends, I will tell you in this post that how you all can add heart effect to your blogger. Friends, this heart effect will show on your website only, meaning it will be visible when you click or touch somewhere on your website. Friends, this effect has been created with the help of HTML, CSS and JavaScript, friends, if you put this in someone's website, you will see it, and when you click on their website, you will see Love Effect, Mandala Effect there. Who will get Friends, I have told you the tutorial below in the article of this post, all of you can easily put it on your blogger's website by reading this post, just friends, you have to follow all the steps correctly. How can we add Heart Effect in Blogger? Step 1:-. Friends, first of all you have to open the blogger website and you have to come to its people page. Step 2: - Friends, now you have to login to your blogger's website. from

Hello friends, today I am going to tell you how we can install custom material box. In today's post on blogger's website, I will tell you. Friends, many people work very hard to make their blog beautiful and attractive, so that our readers who come to our website, they like to read and like it while reading, friends, the main reason for this is that this is your blog and Also attracts.

Why We Use Custom Material Design Boxes

Friends, due to the very large article, we all use color boxes, because friends, our readers who come by using this, do not feel bored in it, friends, they feel bored because friends, we all from top to bottom He writes Without any notes and paragraphs, friends, from this post you will be able to learn how to apply color boxes, which will make both your readers and your blog interesting.

Benefits of Custom Material Design Boxes

Friends, we can make our blog more attractive with custom material design box. And friends, which makes it easier for your visitors to see and read,
Friends, this custom design material box looks very beautiful and also improves the impression of your site.
Friends, your visitors who come from the custom material design box stay there for some time after seeing our design.
Friends, you do not even need JavaScript to use it.
Friends, the visitors who come to our site, we also keep their interest and they also get engaged.
Friends, with the help of this, we can make our blog even more beautiful by applying Material Design box in our post article.

How to add custom material design box to our blog

Friends, first of all you have to take a backup of your blogger theme, this is because friends, because whatever code we put in the HTML of our blogger, if there is any mistake, then with the help of our backup theme, we can restore it to normal. Custom Material Design Box Friends, you will need some source code to put in your blog, which you have to copy and paste, with the help of this blog post in your blogger's templates, friends, keep having fun and learning something new. Stay

First of all you have to go to your blogger dashboard.
Now you have to click on the option of Edit HTML in your theme section.
Friends, now you have to type Ctrl+F on your keyboard and search ]]</b:skin>
Friends you have to copy the css code and paste it before ]]</b:skin> .

            /* Custom Material Design Box  by Techy Shreya*/
.tsbox{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)}
.tsbox h2 {background: linear-gradient(to right,#11998e,#38ef7d);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}
/* Custom Material Design Box by Techy Shreya*/
.tsbox.box-TS1 h2{background: linear-gradient(90deg, #FF012D, #FF8B7F);}
.tsbox.box-TS2 h2{background: linear-gradient(90deg, #AA04FF, #CEA3FF);}
.tsbox.box-TS3 h2{background: linear-gradient(to right, #f12711, #f5af19);}
.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}
.drK .tsbox{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)}

Friends, now below I have given you another material design box code, you also have to paste it after the CSS code.

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

How to use custom material design box in your blog

Friends, this code box is useful in our post to create custom material design box which is given below.