0:00
Hello everyone, welcome to Q2 Bloggin and in this video I will show you how you can add a category
0:04
section like this to your blogger website. So here I am using the Flatrow Pro theme in this website
0:11
and here I have added a category section like this in the home page. So it is fully responsive
0:17
and it will also work in dark mode. So let me just click on inspect element and here as you can
0:23
see it will automatically adjust the size in mobile devices. So it looks cool and you can
0:29
easily showcase your product or services in the home page. And you can link any product page or category pages using this category box
0:40
So let's check how you can add this category section in your blogger website
0:46
So the process is very simple but to edit this you need to launch some basic coding
0:53
So for this go to your blogger dashboard and here go to the layout section
0:59
Here I have to add this in the large content section or you can add this to your hero section
1:05
in your theme. So here click on Add Gadget and here click on HTML slash JavaScript
1:13
Now you have to copy a code like this. So let me just copy all code and here you have to paste it in the content area
1:23
Now let save this Now you have to refresh this And as you can see the services section is added in this website Now let check how you can edit this code
1:36
So for this let me just open this code and this page side by side
1:41
Okay, I have opened this code and this section side by side
1:46
So as you can see, this is the first section K2 CSS create
1:51
So it will cover all the section like our services, explore our web development
1:55
our web development service and this box. So next in the grid container and then the K2
2:02
heading container. So in the heading container you have to add this heading like our services
2:10
So you can easily change this text and then you have to add a paragraph like this. Explore our
2:15
web development services and here we have to edit the single grid. So this is the all grid section
2:24
So it will cover the whole section. Then you have to find the K2 single grid
2:29
And here you can change the icon. So this is the SBG icon
2:34
So you can change any SBG code here and it will change the SBG code
2:39
Now scroll down and here you have to add the title like fast loading and then you have to
2:44
add the description like we can help you optimize your website by compressing CSS and JavaScript
2:52
So the first section is completed and then you have to find the K2 single grid again And then you have to change the icon of this section and then you have to change the heading h3 like fully responsive and then the paragraph we help you build a fully responsive website for
3:09
better speed and conversion so in this way you can edit all container using this section
3:16
so you can easily change this SVG icon by changing this SVG code from here to here
3:23
Just leave this SVG class and add the SBG icon in between this SVG
3:30
And you can also change the background color and the SBG color
3:34
So for this, let me just open this in a full window and here let me just click on Inspect Element
3:44
Now click on this icon. Now you will see this option called background color
3:51
So let me just choose a different background color from here. And as you can see, the background color is changed
3:58
So in this way you can edit this background color. Now click on inspect element again
4:05
And here let me just select the SVG icon. So here you can select the SVG size
4:13
So I don't change that here. Now click on this whole section and here you can change the background color
4:21
So let me just change the background color like this and as you can see the background color
4:26
is changed. Now let me just switch to dark mode and here you have to change the dark mode background color like i will change the background color so in this way you can change the background color in both
4:42
dark mode and the light mode so all you have to do is search for this class like dark mode
4:49
k to single grid and here in the background section you can add the background color
4:54
And you can also change the border color size like let me just select it to 3 pixel and
5:02
it will show a solid border like this and you can also adjust the border color from here
5:08
So let me just switch to light mode and let's refresh this page
5:15
Okay now you understand how you can edit this code and you have to find that class in the code and change this
5:24
code accordingly. And if you have any doubt regarding this, then you can ask me in the comment section
5:30
or you can ask in our Telegram group. I will definitely help you with that
5:36
And if you want to add different hero section to your blogger website, then I have already
5:41
made two videos like how to create a grid style category section in Blogger and how to add
5:46
a hero section in Blogger homepage. So you can watch this two video
5:51
And I will leave this link in the description. And if this video helps, then make sure to hit the like button and subscribe to my channel
5:58
for more upcoming videos like this. I will see you in the next video
