0:00
Hello everyone, welcome to Key to Blogging and in this video I will show you how you can add a category
0:04
section like this to your blogger website. So to add this just copy this code. So let me just copy
0:11
the whole code from here. And here you have to go to the layout section of your block. Now scroll
0:19
down and here in the top widget section, let me just add a gadget and here click on HTML slash JavaScript
0:28
Now let's paste this code and let's save this. Now let's refresh this page
0:37
And as you can see, the category section is added to our website
0:41
So now let's check how you can edit this code and change the text, change the icon and
0:47
here you can change the heading of this section. So let's open the VS code and let me just open the demo page
0:56
side by side and here you can change the H2 tag. So let me just change this like and let me just save it and here as you can see the H2 tag
1:11
is changed. So let's add a link to this first category box
1:17
So to add the link you have to replace the HES value with your link and here you can add a title
1:23
like this So let me just add a title like About And here we have to change the text So the by default the text is blocked So let me just change it to about Now let save it and here as you can see the text is changed
1:43
So let's check how you can change the SBG icon. So there are many websites that you can get SBG
1:51
The first website in our list is Jagos Design official documentation page and here you will
1:57
see a lot of SBG icons. So let me just change the SBG icon from here
2:02
So here you will use this icon for our About Us page
2:07
So let's open this and let me just change this code. So just select SBG to closing SBG and let's replace this and let's save this
2:20
And here as you can see the icon is changed. And if you don't have VS code then you can change it using a plain node fed
2:29
So let's open the second website for SVG resources. Suppose you want to add this icon in that category page
2:37
So all you have to do is click on this icon and it will download at the SVG to your computer
2:44
Now you have to open the SBG file in a notepad. So let me just go to the folder and let me open this in a noteped
2:52
Now let's copy this SVG code and let me just open the VS
2:58
the VS code and let's change it here. Now let click on Save and let test how it looks And here you can see the SBG code is changed So in this way you can use any of the SBG icon to your category pages
3:19
So let me just add a link. So let me just link this website here
3:25
So let me just change it in the hash value. So just paste it and let me just save it
3:33
Now when I click on this icon, it will redirect me to that page
3:39
So in this way you can edit all of the category pages, change the icon, you can change the text
3:45
and here you can change the title. And this title will not show in the front end
3:50
This is for SEO purpose. So now you know how to edit the category sections and you can also design this section
3:59
Like you can set the padding or set the text align. By default the text is in the center align
4:05
So you can change it to left or right and here you can change the font size according
4:10
to the website and scroll down and here you can change the background color
4:16
So let me just change the background color like this. Red. Let's save this and here as you can see the background color is changed
4:26
So in this way you can add background color to this category. So let me just change this color to white again
4:32
Save this. Now you can add a border radius to this category
4:37
So by default it is set to 5. So let me just change it to like 30 pixel and let save this and here as you can see the border radius is added so let me just set it 10 pixel now you can add a box shadow effect to this category
4:56
pages so to add a box shadow effect you can use this website and here you will find a lot of
5:02
box shadow effect so let me just copy a box shadow from here so i will use this box shadow
5:10
And let me just replace this whole code. Now let's save this and here as you can see the box shadow effect is changed
5:22
Now scroll down and here you can change the SBG icon color like K2 grid list SVG
5:30
So let me just change the field color to red. Now let's save this and here as you can see the SBG icon is changed to red
5:40
So in this way you can edit this section and add it to your blogger website
5:47
And it is fully responsive. So let's open this in a mobile view
5:51
So click on inspect element and here as you can see, it will automatically adjust the size
5:56
according to the size of your device. And if this video help you add a category section to your blogger website, then make sure
6:04
to hit the like button and if you have any doubt regarding this, then you can ask
6:08
me in the comment section or you can ask in our Telegram group
6:12
And if you are new to this channel, then consider subscribing for more upcoming videos like this
6:17
I will see you in the next video. Thank you
