How to Add Custom Material Design Box In Your Blog

Hello friends, welcome to today's post, today I am going to tell you how you can put stylish headings in blogger, just you have to follow all the steps here correctly, if you make any mistake You need to have your theme backup for this, let me tell you all the steps in today's post correctly, how you can put stylish headings in blogger, I have shown you all the headings below, you can see Which heading is of which type and in which colour.

Table of Contents

LITTLE THINGS

You can make your blog and website more beautiful by applying such stylish headings and the user also gets a good experience, it also interacts with the user, how and how you can apply it in your blog. I will tell you all this step.

HEADING STYLE

This is a Stylish Heading 1

This is a Stylish Heading 2

This is a Stylish Heading 3

This is a Stylish Heading 4

This is a Stylish Heading 5

This is a Stylish Heading 6

This is a Stylish Heading 7

PRONS

• This makes your website look beautiful and attractive, and users who visit our website also like it.
• By adding this to your blog which seemed normal before, you can make it completely new.

CONS

Adding this code to your theme increases website loading speed and time

The user has some difficulty in opening the website but your blog becomes beautiful.

Before adding the code or before editing anything in the theme, make a backup of it because you need to do this, if you find some codes wrong, then with the help of this you can easily back up the old theme and normalize the theme.

HOW TO PUT THE CSS CODE ON THEME SECTION

I have given you the code, how to add it to the theme section, I will tell you all the steps, you just have to read all the steps.

1. First of all you have to go to your blogger dashboard.
2. Now you have to come to the theme section, after that the theme section will open, there you have to click on Edit HTML.
3. Now I have given you a CSS code below, you have to copy it and I have shown you below, just above the ]]></b:skin> tag of the picture, you have to add it in the same way, you have to process the same.


      /* Stylish Headings By Tech Shreyansh */
.TSheading-1{background-image:linear-gradient(to right,#eb3941,#f15e64,#e14e53,#e2373f);box-shadow:0 5px 15px rgba(242,97,103,.4);Color:white;padding:10px;border-radius:7px}

.TSheading-2{background-image:linear-gradient(to right,#25aae1,#40e495,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(49,196,190,0.75);Color:white;padding:10px;border-radius:7px}

.TSheading-3{background-image:linear-gradient(to right,#f5ce62,#e43603,#fa7199,#e85a19);box-shadow:0 4px 15px 0 rgba(229,66,10,0.75);Color:white;padding:10px;border-radius:7px}

.TSheading-4{background-image:linear-gradient(to right,#667eea,#764ba2,#6B8DD6,#8E37D7);box-shadow:0 4px 15px 0 rgba(116,79,168,0.75);Color:white;padding:10px;border-radius:7px}

.TSheading-5{background-image:linear-gradient(to right,#fc6076,#ff9a44,#ef9d43,#e75516);box-shadow:0 4px 15px 0 rgba(252,104,110,0.75);Color:white;padding:10px;border-radius:7px}

.TSheading-6{background-image:linear-gradient(to right,#0ba360,#3cba92,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(23,168,108,0.75);Color:white;padding:10px;border-radius:7px}

.TSheading-7{background-image:linear-gradient(to right,#009245,#FCEE21,#00A8C5,#D9E021);box-shadow:0 4px 15px 0 rgba(83,176,57,0.75);Color:white;padding:10px;border-radius:7px}

.TSheading-8{background-image:linear-gradient(to right,#6253e1,#852D91,#A3A1FF,#F24645);box-shadow:0 4px 15px 0 rgba(126,52,161,0.75);Color:white;padding:10px;border-radius:7px}

.TSheading-9{background-image:linear-gradient(to right,#29323c,#485563,#2b5876,#4e4376);box-shadow:0 4px 15px 0 rgba(45,54,65,0.75);Color:white;padding:10px;border-radius:7px}

.TSheading-10{background-image:linear-gradient(to right,#25aae1,#4481eb,#04befe,#3f86ed);box-shadow:0 4px 15px 0 rgba(65,132,234,0.75);Color:white;padding:10px;border-radius:7px}

.TSheading-11{background-image:linear-gradient(to right,#ed6ea0,#ec8c69,#f7186a,#FBB03B);box-shadow:0 4px 15px 0 rgba(236,116,149,0.75);Color:white;padding:10px;border-radius:7px}
  

HOW TO PUT HTML CODE IN POST

See friends, I have just told you above how you will add the CSS code. Now May I tell you how you will add HTML code to the post in the post, here your work is very easy, now you will not take much time to create the heading style.



Here you have to open any post of yours, after that I have given you a code of HTML, you have to copy and paste it and name it according to your heading type.

   <h1 class="TSheading-1" style="text-align: center;">This is a Stylish Heading 1 </h1>
   <h1 class="TSheading-2" style="text-align: center;">This is a Stylish Heading 2 </h1>
   <h1 class="TSheading-3" style="text-align: center;">This is a Stylish Heading 3 </h1>
   <h1 class="TSheading-7" style="text-align: center;">This is a Stylish Heading 4 </h1>
   <h1 class="TSheading-4" style="text-align: center;">This is a Stylish Heading 5 </h1>
   <h1 class="TSheading-5" style="text-align: center;">This is a Stylish Heading  6</h1>
   <h1 class="TSheading-6" style="text-align: center;">This is a Stylish Heading  7</h1>
  

See friends, I have already told you about the custom heading style, but you must have seen in the starting of the post that how its first letter is written in large size, if you also want to write in the same way, you will see below. given a code you just have to add it to your post

You guys can see a heading above, how I have put in it, in the same way it will show in your average.

   <span class="dropCap">H</span>
  
  -----Auto Table of Content Post Code Only Work in Plus ui Theme-----
  <details class='sp toc'>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='toC' id='autoToc'></div>
</details>
  

LAST WORDS

See friends, in today's post, I have told you all the step wise steps that how you can put custom headings in your blog post and also how you can write the first letter of your blog in big size. I have also told, if you do not understand any step, then you can directly take support from us on Instagram or Telehgram.

© Tech Shreyansh
Go to Link