0:00
Hello everyone, welcome to K2 blogging and in this video, I will show you how you can
0:04
display a website starts like this in your about us page. So here I am using the blogger CMS platform and if I want to display a website starts
0:14
like this, then I need to paste a small code in my about us page
0:19
So as you can see, it is fully responsive. So let me just click on inspect element here and you can change different devices and check
0:27
how it looks and let me just select it like pixel five or let's select iPad mini
0:35
So you can choose any different device here. So let's take how can add the website starts in your about us page
0:44
So let me just go to the about us page here and this is the about us page
0:50
And if I want to display the starts here, then let me just scroll down and I will switch
0:59
to HTML view fast and I will find the location where I want to add the website starts
1:07
So let me just add the website starts here. So I will hit enter here and I will copy a code
1:17
So let me just copy the whole code from here and I will paste the code here
1:25
Now let me just update this page. Now let's go back and let's open this page
1:34
Now let me just scroll down and search for this. And as you can see, you will see this option website starts and here you can see the total
1:42
number of posts and here you can see the comments. And if you don't want the comments, then you can remove it
1:51
So let me just go to the about us page again and let me just scroll down and search for
1:59
the comments starts. So let me just hit enter and keep last two closing div tag and I will remove this comment
2:11
section here. Or I can just comment it out like this. So let me just copy this section and I will paste it here and I will copy this section
2:27
and I will paste it here. So this section is comment out and it will not show in the front end
2:34
So let me just update this page. Now let me just refresh this page
2:43
Now as you can see only the total number of posts shown here
2:47
So in this way you can hide or unhide the comment sections
2:51
So I think we should add the comment section here. So I can just remove the comment tag from here and let me just update this page
3:01
Now let me just refresh this page and it is back again
3:06
So in this way you can further customize it like add background color and hover
3:11
So if you want to add a background color and hover, then you can do that just by go to
3:17
the edit HTML and search for the CSS and I will search for the hover here and let's add
3:26
a background here. And let's say I will add the same background as the border
3:38
So let's add the background color here. Now let me just update this page
3:46
Now let me just refresh this page. Now let me just scroll down and when I hover this, it will show the background color like
3:54
this and you can also change the color of the text in hover
3:59
So let's do that again. So let's add the color to white like this and let me just update this
4:13
Let's update this page, scroll down and as you can see when I hover this, it will change
4:20
the background color and change the text of the change the text color
4:27
And you can also work with dark mode like this. So if you want to further customize it, then you can use the inspect element to customize
4:37
the website starts. So I hope this tutorial help you how to add a website starts in your about us page in
4:45
blogger website. And if you have any doubt regarding this, then you can ask me in the comment section
4:50
and I will see you in the next video. Thank you
