How to Add a Testimonials Section in Blogger Website

Hi everyone, welcome to K2 blogging and in this video I will show you how you can add

a testimonial section in your blogger website. So as you can see that I have added a testimonial like this and you will be able to add an image

you have to add a description about your testimonials and you can add the name of the person

So let's check how you can add this to your blogger website

So if you found this video helpful then make sure to hit the like button

So let's get started. So first of all we need to log into our blogger dashboard and you have to open your existing

post or pages. So as you can see that I have already created the pages and then you have to use a code

like this. So this is the HTML code of this testimonial and this is the CSS code of the testimonial

So we need to make the changes in the content using the HTML code

So if you want to show more than two testimonials then you can also do that

So all you have to do is just copy this part here, just leave the last div tag here

So just copy it and then hit enter and paste it just before the last div tag

So let me hit enter here again. So let me add it two times here like this and let me just update it and let's check

in the front end and as you can see that we have added four testimonial section like this

So this is fully responsive. So let me just show you. So let me just click on inspect here and as you can see that it is completely responsive

in mobile device as well. So let me just increase the size a little bit and as you can see that it will show or

it will adjust the size according to the size of the device

So in desktop it will show two sections and if you reduce it then in mobile it will show

one section at a time. So let's check how we can change the images and content in this testimonial as well

So first of all let's check how we can change the image. So let me search for profile image here and let me select a profile image from here

So suppose I want to add a profile image like this. So let me add this profile image

So what I can do is I will right click on it and I will click on copy image address

and I will go to edit here and let me change this image source code here like this

Now let me just update this and let me just refresh this and as you can see that the image

is now changed. So if you want to upload your own images then you can also do that

So for this what I can do is I will hit enter here and let me upload that image from my

own computer. So I will click on browse. Let me select an image from the computer and let's upload it to the blogger platform

So here blogger will upload it and you will be able to copy the source URL of the image

So here it is. So this is the source URL of this image. So you have to copy that is added in the source field in double quote

So let me just copy it and let me change the source URL here as well like this

Now I can delete this code. I don't need this one anymore. Okay

Now we have changed the image URL. Let me just update it and let me just refresh this page and as you can see that now the

image is changed here. So we can also change the description as well and we can change the name here

So here you can see that this is the description here. So you can change the text in the block code field and you can change the name

So let me change the name to like Rima like this. So you have to change the name in the site field here and if you want to add an alt attribute

so you can add an alt attribute here. So here basically you can add your client name or you can briefly describe about the

testimonials if you want. So this is the alt tag you can use here in the image as well

So let me just update it and let me just refresh this page and as you can see that the name

is changed and here you can change the look and feel of the testimonial if you want

So let me just right click on it. Click on inspect and here this is the deep

So there is four deep section here. So let's click on the first deep here and you can see the review item

So here you can see the border color here. Suppose you want to add a black border then you can show a black border like this and

you can change the border width as well. So let me increase the border width from 3 pixels to 5 pixels and as you can see that

the border width is changed and the color is changed here. So in this way you can further customize the testimonial section according to the look

and feel of your website. And you can also change the background color

So I have added a transparent background color here. So you can change any background color if you want

So let me choose a background color like this. Let's add a background color like this and you can also add or change the color

So let me choose a background color to something like yellow and let me choose the color to black

Like this. As you can see that the color is now changed and the background color is changed to black

And I can change this color as well. So let me select it and I can add the color here to black

Like this. So this is how you can change the look and feel of your testimonial section

So it is looking odd now. So let me refresh it again

So here you can also change the star here in the testimonial if you want

So let me just go to the code editor here and here you can see that there is 5 star

added here. Like this. So if you want to show 4 star you can remove 1 star from here like this

And let me just update it. And let me just refresh this page

As you can see that the 1 star is removed and there is showing 4 star

So this is how this testimonial section work in blogger and you will be able to add a beautiful

testimonial section in blogger website by using the code. So I will provide the code link in the description

So make sure to hit the like button for that. So I will see you in the next one

Bye bye