Como criar um widget de caixa do autor simples em uma barra lateral do blog - 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 caixa do autor simples em uma barra lateral do blog

Como-criar-um-widget-de-caixa-de-autor

Instalar um widget de caixa do autor, ou perfil do autor na barra lateral do blog é uma coisa boa a se fazer, isso visa para que os visitantes do site possam conhecê-lo melhor.

Existem vários tipos de widgets de caixa do autor que você pode encontrar na internet com designs legais e diferentes.

Mas eu vou compartilhar um widget de caixa de autor simples usando apenas CSS e código HTML, para que ele não diminua o carregamento do seu blog.

Este widget de caixa de administração ou perfil autor também é equipado com um botão de ícone de mídia social usando Font Awesome para que ele ainda pareça legal, mesmo que o design ainda seja simples.

Eu também tentei colocá-lo em diferentes tipos de modelos de blog que eu tenho e os resultados são muito bons.

Apesar de ter encontrado alguns problemas, como uma foto de perfil fechada ou truncada quando tentei colocá-la em outro blog com um modelo diferente, mas isso eu superei.

Finalmente eu posso publicar este widget para todos vocês que estão procurando por um simples widget perfil do autor ou caixa do autor que usa código CSS puro.

Relacionado a este widget tem uma largura de 300px, então meu conselho é usá-lo na seção lateral do blog, mas se você entender de código CSS por favor, modifique a caixa de acordo com seus desejos.

Ok imediatamente, se você estiver interessado em criar um simples widget de caixa do autor na barra lateral do Blogger, por favor siga os passos abaixo.

Como instalar um widget de caixa de autor simples no Blogger

  • Entre em Blogger.com
  • Clique em Layout > adicionar gadgets > selecionar HTML/JavaScript
  • Em seguida, copie o código abaixo e coloque no gadget;
<style type="text/css">
/* caixa do autor simples */
.cm-author{font-family:'Open Sans',Arial,sans-serif;position:relative;display:inline-block;min-width:230px;max-width:336px;width:100%;text-align:left;font-size:16px;background:#f5f5f5;border-radius:5px;margin-top:15px}
.cm-author *,.cm-author:before,.cm-author:after{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
.cm-author img{max-width:35%;margin-top:-15px;margin-left:60%;margin-bottom:15px;backface-visibility:hidden;vertical-align:top;border-radius:5px}
.myprofile{position:absolute;top:0;right:40%;left:0;bottom:0;padding:15px}
.cm-author h3{margin:0;font-size:1.1em;font-weight:bold}
.cm-author h3 a{color:#656565;text-decoration:none}
.cm-author h3 a:visited{color:#656565;text-decoration:none}
.cm-author .icons{font-size:1.6rem}
.fa-facebook{color:#bababa}
.fa-facebook:hover{color:#3b5998}
.fa-twitter{color:#bababa}
.fa-twitter:hover{color:#55acee}
.fa-instagram{color:#bababa}
.fa-instagram:hover{color:#e95950}
.fa-youtube-play{color:#bababa}
.fa-youtube-play:hover{color:#ff0000}
.mysite{font-size:12px;font-style:italic}
</style>
<div class="cm-author">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEjFnE0JN2Xc_rjOqIPwPCLirJfyWVo02hLDw3mjLberuxNt3R3LFjGxTzkohk313dcVo_8dctPpr0h_0hX1imi_0AhamEFb2GxFadtYbn-hj-rS4VcXJvfvB-5REQ1Tdu3gyHcjL1y6LENnM6D0ngU6VFQNOcgQayLE6mWZq0lUCDzO0MeBsTH5C-csUA=s1000-rw" alt="image_title_here" title="Seu_nome"/>
<div class="myprofile">
  <h3><a href="https://www.seusite.com.br/pagina" title="Seu_nome">Seu_nome_aqui</a></h3>
  <div class="icons">
    <a href="https://www.facebook.com/#" title="Facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"/></svg></a>
    <a href="https://twitter.com/#" title="Twitter"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"/></svg></a>
    <a href="https://www.instagram.com/#" title="Instagram"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Zm124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67ZM224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Zm85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74ZM400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32ZM382.88,322c-1.29,25.63-7.14,48.34-25.85,67s-41.4,24.63-67,25.85c-26.41,1.49-105.59,1.49-132,0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61,0-132,1.29-25.63,7.07-48.34,25.85-67s41.47-24.56,67-25.78c26.41-1.49,105.59-1.49,132,0,25.63,1.29,48.33,7.15,67,25.85s24.63,41.42,25.85,67.05C384.37,216.44,384.37,295.56,382.88,322Z"/></svg></a>
    <a href="https://www.youtube.com/#" title="Youtube"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M186.8 202.1l95.2 54.1-95.2 54.1V202.1zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-42 176.3s0-59.6-7.6-88.2c-4.2-15.8-16.5-28.2-32.2-32.4C337.9 128 224 128 224 128s-113.9 0-142.2 7.7c-15.7 4.2-28 16.6-32.2 32.4-7.6 28.5-7.6 88.2-7.6 88.2s0 59.6 7.6 88.2c4.2 15.8 16.5 27.7 32.2 31.9C110.1 384 224 384 224 384s113.9 0 142.2-7.7c15.7-4.2 28-16.1 32.2-31.9 7.6-28.5 7.6-88.1 7.6-88.1z"/></svg></a>
  </div>
  <div class="mysite">www.seusite.com.br</div>
</div>
  • Clique em Salvar e veja os resultados

Nota: Não se esqueça de alterar sua URL de mídia social e sua foto de perfil, e o nome de exibição.

Esse é o artigo sobre como criar um simples widget de caixa de autor na barra lateral do blog, boa sorte e espero que tenha sido útil.

Gostou? Compartilhe esse tutorial em suas redes, alguém pode estar precisando, e se ficou alguma dúvida deixe o seu comentário logo abaixo.

Radialista formado, 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