0:00
Hello everyone, welcome to Kitt Blogging and in this video I will show you how you can create
0:03
a AboutS section like this and add it to your blogger website
0:08
So this About section is completely made of HTML and CSS and here as you can see you
0:13
can add an image and here you can add a heading and here you can add a brief description about
0:19
your website and here you can add a call to action button at the bottom
0:24
So let's check how you can add this about a section to our blogger website
0:28
So if you like this video then make sure to hit the like button and do subscribe to our channel
0:33
for more upcoming videos like this. So let's go to the blogger website and you have to click on the pages section and let me just
0:41
create a new page here. Okay, now you have to switch to the HTML view first and let me just copy a code like this
0:54
And I will paste it here. Now let me just add a title like About Us
1:02
And here you can click on Publish button. Okay, now the About Us section is published
1:11
Let me just open it. And as you can see the About Us page is added
1:20
Now let's check how you can edit this text and edit this paragraph
1:25
So for this I will click on this page and here you have to change the image link
1:31
So this is the image source link. So you have to upload a image and then replace the image So let me just show you So here I will click on it and let me just upload an image from the computer So here I will click on choose file and let me just click on this image
1:57
Okay, now the image is uploaded. Let me just select it and let me just click on original size
2:03
And here you have to copy the source URL. So let me just copy this here and let me just delete it here
2:14
So we don't need this code again and let me just change the source image URL
2:24
Now here you can add a heading tag so let me just change it like about
2:32
our website. Now here you can add the paragraph. So just change the paragraph here and here you can change the button text like join the
2:46
community and here I have added a Telegram SBG code so you can change the SBG code
2:54
but make sure to add the class in the SBG element otherwise it may not so properly in your website
3:01
Okay, now let me just update this and let me just click on refresh
3:10
Okay, as you can see the image is changed and we have changed the heading and here you can
3:15
change the paragraph and let me just add a link in this button So for this let me just go to the Telegram website and let me just copy this link And I will go to the Edit HTML section and I will add the link in the has value HRF has
3:33
So I will replace this has value to the link. Now let me just update this
3:42
Now let me just refresh this page. Now the button link is added
3:47
me just click it and as you can see the button is redirect to our telegram group
3:53
So let me just click on back and let me just open it in a mobile view
3:59
And as you can see it is also looking good in mobile view
4:03
And here you can further change the button color or you can change the text color
4:09
So let me just click on dark mode and as you can see it is also working perfectly in dark mode
4:15
So if you are using any other theme, then you have to add the dark mode class in the bottom
4:21
So here as you can see, the dark mode class is dot dark mode
4:25
So if you are using any other theme, then you have to add the class of that dark mode
4:29
And let me just show you. Let me just click on this image
4:39
So here I will click on the image. And here you can change the background color
4:45
change the border color so let me just change the border color like this and as you can see
4:50
the border color is changing so you can find this code like about author k2 bio image
4:58
and here you have to add the border color so let me just copy the border color here and I will go to the Edit HTML section and I will find the border code and here it is
5:11
This is the bio image. So here I will change the border color like this and let me just update this
5:20
Now let's refresh this page. And as you can see the border color is changed and here you can also adjust the border side
5:29
like let me just change it to 5 pixels. You can also add a transparent image in this place so that the background linear gradient
5:38
color will be shown behind the image and let me just show you how you can change the
5:42
button color. So let me just click on button and here you can adjust the button
5:48
So by default it is taking the button color of my theme but you can adjust the button color
5:53
like this. So as you can see you can change the button color according to your website
5:59
Now let's close this. I hope you got the idea how to add a about a section like this in your blogger website
6:09
and you can further customize this code according to your choice. So here you can change the font size or you can change the color of the font
6:19
So here you have to modify the CSS code. And if you have any doubt regarding this then you can ask me in the comment section
6:27
And if you like this video, then here. hit the like button and subscribe our channel for more upcoming videos like this
6:33
And don't forget to join our Telegram group and if you have any doubt regarding this
6:38
then you can ask me here. And I will see you in the next video
