Home
Blogger

How to Add a Responsive Testimonial Section to Your Blogger Blog

Learn how to add a responsive testimonial section to your Blogger blog with simple HTML and CSS. Boost credibility and user engagement today!
Stephano kambeta
Adding a testimonial section to your Blogger blog is a great way to show off positive feedback from your readers or customers.

First, gather some testimonials. These can be quotes, reviews, or any positive feedback you’ve received.

Note: This Testimonial Section is fully responsive and adjusts automatically to different screen sizes. It's made using only pure HTML and CSS, so you can also use it on other platforms like WordPress, Wix, and more.

How to Add a Responsive Testimonial Section to Your Blogger Blog

Benefits of Adding a Testimonial Section

Adding a testimonial section to your Blogger blog can offer several benefits:

1. Builds Credibility: Showcases positive experiences, helping to establish trust with your audience.
2. Increases Trustworthiness: Positions you as a reliable source, making visitors more likely to believe in your content.
3. Boosts Engagement: Makes your platform more relatable, encouraging more interaction from readers.
4. Promotes Products/Services: Acts as endorsements, influencing potential customers to try your offerings.
5. Improves Conversion Rates: Positive testimonials make it more likely that visitors will take desired actions, such as making a purchase or signing up.
6. Enhances User Experience: Provides valuable insights that can improve the overall experience for your users.
7. Encourages Positive Feedback: Creates a feedback loop, inspiring more readers to share their positive experiences.

Watch the Video on Adding a Testimonial Section

You can watch the video below to learn how to add a testimonial section to your Blogger blog. This step-by-step guide will make the process easy to follow and implement.


Steps to Add a Testimonial Section in Blogger


1. Log in to your Blogger Dashboard.
2. Click on "New Page" to create a new page for your testimonials. Alternatively, you can open an existing page.
3. Switch to the HTML view and paste the code below.
4. Change the content and images to your own, then publish your page. You have successfully added a testimonial section to your Blogger website.

Code for Testimonials


<div class="reviews Review-Grid">
        <div class="review-item flex fd-c">
                <figure class="review-image">
                        <img alt="Client Name 1" class="entry-image" decoding="async" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxiqIcZ_p0V-_3nnArftn1HlxiA3cd81pcYvArFsp4iX8Y0HK64hAgX1IIMAMCljXiGlgbBGP81i_HIAWqiHOxsuT_eMYVkbPD-8bMhWRZey27GVelvdEq0P8IRl01pA/w80-h80-p-k-no-nu/profile+photo+%28Abhishek+Padhi%29.png" width="100" />
                </figure>
                <div class="review-rating flex"><i class="star"></i><i class="star"></i><i class="star"></i><i class="star"></i><i class="star"></i></div>
                <blockquote class="review-quote">Very Much Satisfied with the Product and service of this company. Definitely recommend to all.</blockquote>
                <cite class="review-name">Abhishek</cite>
        </div>
        <div class="review-item flex fd-c">
                <figure class="review-image">
                        <img alt="Client Name 2" class="entry-image" decoding="async" height="100" src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1" width="100" />
                </figure>
                <div class="review-rating flex"><i class="star"></i><i class="star"></i><i class="star"></i><i class="star"></i><i class="star"></i></div>
                <blockquote class="review-quote">The Website design is highly professional and Looks Quite Amazing. Very to happy to work with Him again.</blockquote>
                <cite class="review-name">Rohit</cite>
        </div>
</div>

<style>
  .Review-Grid { display: grid;}
  .reviews { grid-template-columns: 1fr 1fr;grid-gap: 40px;}
  .review-item {
    position: relative;
    background-color: transparent;
    overflow: hidden;
    text-align: center;
    padding: 30px 25px;
    border-radius: 6px;
    border: 3px solid #ffc8c8;
}
.flex {display: flex;}
.fd-c {flex-direction: column;}
.review-image {display: inline-block;width: 70px; height: 70px; margin: 0 auto 25px;}
  .review-image img {
    display: block!important;
    width: 80px;
    height: 100%!important;
    object-fit: cover;
    border-radius: 50%!important;
}
  .review-rating {gap: 3px;line-height: 0;margin: 0 auto 15px;}
  .review-rating .star:before {
    display: block;
    content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHJvbGU9J2ltZycgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPScjZmNiYzA0JyB3aWR0aD0nMjEnIGhlaWdodD0nMjEnPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgZD0nTTEwLjc4OCAzLjIxYy40NDgtMS4wNzcgMS45NzYtMS4wNzcgMi40MjQgMGwyLjA4MiA1LjAwNyA1LjQwNC40MzNjMS4xNjQuMDkzIDEuNjM2IDEuNTQ1Ljc0OSAyLjMwNWwtNC4xMTcgMy41MjcgMS4yNTcgNS4yNzNjLjI3MSAxLjEzNi0uOTY0IDIuMDMzLTEuOTYgMS40MjVMMTIgMTguMzU0IDcuMzczIDIxLjE4Yy0uOTk2LjYwOC0yLjIzMS0uMjktMS45Ni0xLjQyNWwxLjI1Ny01LjI3My00LjExNy0zLjUyN2MtLjg4Ny0uNzYtLjQxNS0yLjIxMi43NDktMi4zMDVsNS40MDQtLjQzMyAyLjA4Mi01LjAwNnonIGNsaXAtcnVsZT0nZXZlbm9kZCcgLz48L3N2Zz4=);
    font-style: normal;
}
  .review-quote {
    font-size: 15px;
    line-height: 1.6em;
    font-style: italic;
    margin: 0 0 15px;
    border-left: 0;
    padding: 0;
    font-family: cursive;
    font-weight: 600;
}
  .review-name {font-size: 18px;font-weight: 700;line-height: 1.4em;}
  @media screen and (max-width: 880px){
.reviews {
    grid-template-columns: 1fr 1fr;
    grid-gap: 35px;
}
  }  
    @media screen and (max-width: 580px){
.reviews {
    grid-template-columns: 1fr;
}
}
</style>

I hope you have successfully added a testimonial section to your Blogger website. If you have any questions or need further help, feel free to ask in the comment section below.

Post a Comment