‎Como criar um widget de depoimento responsivo no blogger‎ - Wallace Locutor .ıllı. Vinhetas, Porta de loja, Carro de Som

AdBlock Detectado

Desative seu AdBlock para poder acessar este site.

translate to english
PRECISANDO de um LOCUTOR para GRAVAR o Seu ANÚNCIO? Neste link

Tabela de Conteúdo

‎Como criar um widget de depoimento responsivo no blogger‎

widget-de-depoimento-responsivo-no-blogger

Desta vez compartilharei um tutorial bem simples de como criar um widget de depoimento responsivo com código HTML e CSS para instalar em seu blog ou site.

Este widget é realmente quase semelhante ao widget da caixa do autor, mas há um pouco de design que o torna um pouco diferente do widget de perfil do autor.

Aqui foi adiciono ASPAS, como citações ou palavras ditas por seus clientes para que este widget seja chamado de widget de cartão de testemunho.

Se você é um vendedor comercial, ou vende serviços online que conta com um site pessoal ou blog para exibir seus serviços, ou produtos, então este Widget vai lhe servir bem.

Ao exibir widgets de depoimentos em blogs ou sites, certamente aumentará a confiança de potenciais compradores. Portanto, instalar widgets de depoimentos no site é muito importante.

Bem, nesta ocasião o widget de depoimento usa código HTML e CSS apenas, certamente não vai fazer seu blog ou site se tornar pesado. Fique tranquilo!

Como criar um widget de depoimento em uma página do Blogger

  • Vá até Blogger.com
  • Clique em Página
  • Por favor, crie uma nova página ou edite uma
  • Em seguida, certifique-se de que você está na seção Compor, e mude para visualizar em HTML
widget-de-depoimento-responsivo-no-blogger
  • Copie este código HTML e CSS abaixo, e cole na Página:
<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="https://instagram.fcgk8-2.fna.fbcdn.net/vp/f7724395822a1ecdbbc5e2e0c9d751fc/5BEFCC20/t51.2885-19/s320x320/36136511_2123433711204178_4166035719258636288_n.jpg" alt="Profile" title="Profile" class="profile" />
        <p>He has been very professional and very clear in all communications, which I appreciate.</p>
    </div>
    <h3>Ficri P.<span>Web Designer</span></h3>
</div>
<div class="testimoni">
    <div class="pic"><img src="https://instagram.fcgk8-2.fna.fbcdn.net/vp/d5f7ba3445ca5f7331c1af137fda8a6b/5BF7F22E/t51.2885-19/s320x320/38170706_2095171754054300_307298068145897472_n.jpg" 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>Pebriyana F.<span>Graphic Designer</span></h3>
</div>

NOTA: Edite conforme necessário, como alterar o Nome, Título, Miniatura, Cores, e a Descrição. Depois, clique em Salvar ou Publicar

Você também pode salvar este widget de depoimento na barra lateral do blog ou na seção de postagem do blog, pois o mais adequado na minha opinião para este widget de depoimento é armazenado na página do Blogger.

Se for necessário, adicione esse código CSS abaixo, acima da tag de nome </body> é um pacote de Font Awesome caso não apareça as cotações.

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Esse foi o artigo sobre como criar um widget de depoimento no blog. Espero ter sido util pra você, se ficou qualquer dúvida, deixe o seu comentário abaixo. Boa sorte! 🤩

Radialista, Ator, Locutor, e produtor de audio. Já são mais de 15 anos de experiência na área da comunicação. Saiba mais

Postar um comentário

O site mantém sistema de comentários na maioria dos artigos para estimular a troca democrática de informações e aprofundar a discussão sobre assuntos que frequentam o blog. Saiba Mais