Tutoriales sobre Blogger

Esta vez haré un widget testimonial simple con código html y css para instalar en su blog o sitio web.

Este widget es en realidad casi similar al widget de cuadro de autor , pero hay un pequeño diseño que lo hace un poco diferente del widget de perfil del autor. Aquí agrego citas o palabras pronunciadas por sus clientes para que este widget se nombre como un widget de tarjeta de testimonio . Si usted es un comerciante o vendedor en línea que confía en un sitio web personal o blog como un lugar para exhibir su mercancía, lo más importante debe estar en su sitio web son los testimonios de clientes que ya han comprado o utilizado los servicios. Al mostrar un widget testimonial en el blog o sitio web, por supuesto, aumentará la confianza de los posibles compradores hacia usted.

Antes de comenzar veremos una demostración en vivo

Demo

Solo debes saber donde quieras colocarlo ya sea en una entrada o en un gadget

Comencemos


<style>
.testimonio {
  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;
}
.testimonio * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.testimonio img {
  max-width: 100%;
  vertical-align: top;
  opacity: 0.85;
}
.testimonio .pic {
  width: 100%;
  background-color: #2961ff;
  padding: 25px;
  position: relative;
}
.testimonio .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;
}
.testimonio .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);
}
.testimonio h3 {
  font-size: 1.3em;
  margin: 25px;
  font-weight: 300;
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
}
.testimonio h3 span {
  display: block;
  font-size: 0.65em;
  color: #2980b9;
}
.testimonio p {
  margin: 0 0 10px;
  padding: 0 0 30px;
  letter-spacing: 1px;
  font-style: italic;
  font-weight: 300;
}
.testimonio 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="testimonio">
    <div class="pic"><img src="https://lh3.googleusercontent.com/-TFk7a5UZDxg/UX11e4xd6PI/AAAAAAAAA-s/QySA2uWTYRgzxSi7YtwLdmmVDgSaEz7ggCEwYBhgL/w140-h140-p/lipy.png" alt="Profile" title="Profile" class="profile" />
        <p>Soy un famoso bromista en Argentino. Apasionado sobre CSS, HTML y Blogger siempre buscando dar consejos a las personas en Blogger </p>
    </div>
    <h3>Fernando S.<span>Desarrollador web</span></h3>
</div>

Solo te queda editarlo con tus datos, imágenes, nombre y demás cosas
Si no tienes instalo iconos fuentes CSS para que se vean las comillas instala el siguiente código justo encima de </body>