Tuesday, July 23, 2019

How to Make Testimonial Widgets on Blog

This time I will make a simple testimonial widget with html and css code to install on your blog or website.

This widget is actually almost similar to the author box widget, but there are a few designs that make it a little different from the author's profile widget.

Here I add quotes such as quotes or sayings spoken by your customers so that this widget is called a testimonial card widget.

If you are a merchant or online seller who relies on personal websites or blogs as a place to display your merchandise, the most important and must be on your website is testimonials from customers who have already bought or used services and services that you have.

By displaying testimonial widgets on a blog or website, it will certainly add to the trust of potential buyers to you.
How to Make Testimonial Widgets on Blog
So installing the testimonial widget on the website is very important if you sell other goods or products online.

Well, on this occasion I will make a testimonial widget using just html and CSS codes, of course it won't make loading your blog or website heavy.

How to Make a Testimonial Widget on a Blogger Page

1. Log in to Blogger.com
2. Click Page
3. Please create a new page or edit one of the pages
4. Then make sure you are in the Compose section
5. Enter this HTML and CSS code:
<style>
.testimoni {
  font-family: 'Roboto', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  line-height: 1.4em;
  background-color: #d6dbff;
  padding-top: 120px;
  border-radius: 10px;
}
.testimoni * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.testimoni img {
  max-width: 100%;
  vertical-align: top;
  opacity: 0.85;
}
.testimoni .pic {
  width: 100%;
  background-color: #2961ff;
  padding: 25px;
  position: relative;
}
.testimoni .pic:before {
  position: absolute;
  content: '';
  bottom: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 55px 0 0 400px;
  border-color: transparent transparent transparent #2961ff;
}
.testimoni .profile {
  border-radius: 50%;
  position: absolute;
  bottom: 100%;
  left: 25px;
  z-index: 1;
  max-width: 90px;
  opacity: 1;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.testimoni h3 {
  font-size: 1.3em;
  margin: 25px;
  font-weight: 300;
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
}
.testimoni h3 span {
  display: block;
  font-size: 0.65em;
  color: #2980b9;
}
.testimoni p {
  margin: 0 0 10px;
  padding: 0 0 30px;
  letter-spacing: 1px;
  font-style: italic;
  font-weight: 300;
}
.testimoni p:after {
  font-family: 'FontAwesome';
  content: "\201C";
  position: absolute;
  font-size: 180px;
  line-height: 1em;
  color: #3a40ff;
  font-style: normal;
  content: "\201D";
  right: 20px;
  bottom: -105px;
}
</style>
<div class="testimoni">
    <div class="pic"><img src="XXXXXXXX" alt="Profile" title="Profile" class="profile" />
        <p>XXXXXXXXXXX.</p>
    </div>
    <h3>XXXXXXX<span>XXXX</span></h3>
</div>
<div class="testimoni">
    <div class="pic"><img src="XXXXXXX" alt="Profile" title="Profile" class="profile" />
        <p>We are very pleased with our new brand identity. It has been a great experience working with him.</p>
    </div>
    <h3>XXXXX<span>XXXXXX</span></h3>
</div>
6. Please edit as needed, such as changing the name, position / city, picture / photo, and writing
7. Please click Save or Publish

You can also save this testimonial widget in the blog sidebar or in the blog post section, but the most suitable for me in this testimonial widget is stored on the blogger page.

Don't forget to add this awesome font css code so that quotes can appear. Please save this code above the code </ body>
  • <link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
That's an article about how to make a testimonial widget on a blog, good luck. May be useful.


EmoticonEmoticon