Up next in 10
How to Add a Testimonials Section in Blogger Website
2K views
Jan 23, 2024
Elevate the credibility of your Blogger website with this tutorial on adding a testimonials section. Whether you're a blogger, business owner, or content creator, this video provides step-by-step instructions on incorporating a testimonials section to showcase positive feedback and reviews. Dive into the customization process and learn how to feature client testimonials effectively, enhancing the trustworthiness of your online presence. Tune in to discover how to add this impactful element to your Blogger website and create a positive impression for your audience. 🌐✨
View Video Transcript
0:00
Hi everyone welcome to K2 blogging and in this video I will show you how you can add
0:04
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
0:11
you have to add a description about your testimonials and you can add the name of the person
0:18
So let's check how you can add this to your blogger website
0:22
So if you found this video helpful then make sure to hit the like button
0:25
So let's get started. So first of all we need to login to our blogger dashboard and you have to open your existing
0:32
post or pages. So as you can see that I have already created the pages and then you have to use a code
0:38
like this. So this is the HTML code of this testimonial and this is the CSS code of the testimonial
0:45
So we need to make the changes in the content using the HTML code
0:50
So if you want to show more than two testimonials then you can also do that
0:54
So all you have to do is just copy this part here just leave the last div tag here
1:00
So just copy it and then hit enter and paste it just before the last div tag
1:06
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
1:16
in the front end and as you can see that we have added four testimonial section like this
1:22
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
1:30
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
1:36
it will adjust the size according to the size of the device
1:40
So in desktop it will show two sections and if you reduce it then in mobile it will show
1:46
one section at a time. So let's check how we can change the images and content in this testimonial as well
1:53
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
2:02
So suppose I want to add a profile image like this. So let me add this profile image
2:08
So what I can do is I will right click on it and I will click on copy image address
2:13
and I will go to edit here and let me change this image source code here like this
2:22
Now let me just update this and let me just refresh this and as you can see that the image
2:28
is now changed. So if you want to upload your own images then you can also do that
2:33
So for this what I can do is I will hit enter here and let me upload that image from my
2:38
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
2:47
So here blogger will upload it and you will be able to copy the source URL of the image
2:52
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
3:00
So let me just copy it and let me change the source URL here as well like this
3:07
Now I can delete this code. I don't need this one anymore. Okay
3:12
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
3:19
image is changed here. So we can also change the description as well and we can change the name here
3:26
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
3:33
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
3:42
so you can add an alt attribute here. So here basically you can add your client name or you can briefly describe about the
3:49
testimonials if you want. So this is the alt tag you can use here in the image as well
3:54
So let me just update it and let me just refresh this page and as you can see that the name
3:59
is changed and here you can change the look and feel of the testimonial if you want
4:04
So let me just right click on it. Click on inspect and here this is the deep
4:09
So there is four deep section here. So let's click on the first deep here and you can see the review item
4:15
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
4:22
you can change the border width as well. So let me increase the border width from 3 pixel to 5 pixel and as you can see that the
4:30
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
4:38
and feel of your website. And you can also change the background color
4:41
So I have added a transparent background color here. So you can change any background color if you want
4:48
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
4:59
So let me choose a background color to something like yellow and let me choose the color to black
5:12
Like this. As you can see that the color is now changed and the background color is changed to black
5:18
And I can change this color as well. So let me select it and I can add the color here to black
5:27
Like this. So this is how you can change the look and feel of your testimonial section
5:32
So it is looking odd now. So let me refresh it again
5:36
So here you can also change the star here in the testimonial if you want
5:40
So let me just go to the code editor here and here you can see that there is 5 star
5:47
added here. Like this. So if you want to show 4 star you can remove 1 star from here like this
5:54
And let me just update it. And let me just refresh this page
5:59
As you can see that the 1 star is removed and there is showing 4 star
6:04
So this is how the testimonial section work in blogger and you will be able to add a beautiful
6:08
testimonial section in blogger website by using the code. So I will provide the code link in the description
6:15
So make sure to hit the like button for that. So I will see you in the next one
6:19
Bye bye
#Blogging Resources & Services
#Photo & Video Sharing
#Skins
# Themes & Wallpapers