Perfil do Autor com efeito hover de Redes Sociais

junho 26, 2017


Konnichiwa fadinhas & elfos! Como estão? Muito obrigada pelos 200 seguidores! E 100,000 visualizações! Estou muito feliz e isso me anima a continuar! Também recebi elogios do layout, e uma pessoa falou que acompanha meu blog a 1 ano! Genteee! Que incrível! Obrigada mesmo! Mas indo ao assunto do post, hoje trago esse estilo de autor do blog/sobre mim super clean e fofo. Espero que gostem!

Aviso: Sempre faça backup do seu template para voltar ao antigo caso no seu blog não ir!  Esse tutorial foi ajustado para blogger, sendo assim tem bastante elementos que pode ou não ir, templates prontos de outro site sem ser do blogger normalmente não funcionam! Apenas testei em templates com BASE EM TEMA ORIGINAL DO BLOGGER!

Vamos lá! Vá em Tema, Editar Html e procure por </b:skin> , ACIMA dele cole o seguinte css:

/* Perfil do Author - Blog Sweet Magic */

.box{  
text-align: center;  
overflow: hidden;
  color: #fff;
 position: relative; }

 .box:after{
 content: "";
 width: 100%;  height: 100%;
 background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 69%, rgba(0, 0, 0, 0.76) 100%);  
position: absolute;  top: 0;     left: 0;     transition: all 0.5s ease 0s; }

 .box img{     width: 100%;     height: auto; }

 .box .box-content{  
width: 100%;  
padding: 20px;  
margin-bottom: 20px;  
 position: absolute;     bottom: 0;     left: 0;     z-index: 1; }

 .box .title{  
font-size: 22px;     font-weight: 700;  
text-transform: uppercase;  
margin: 0 40px 10px 0;  
transform: translateY(145px);     transition: all 0.4s cubic-bezier(0.13, 0.62, 0.81, 0.91) 0s; }

 .box .post{
display: block;  
padding: 0px 40px 0px 0px;
font-size: 15px;  
transform: translateY(145px);     transition: all 0.4s cubic-bezier(0.13, 0.62, 0.81, 0.91) 0s; } 

.box:hover .title,

.box:hover .post{     transform: translateY(0); }

 .box .social{  
list-style: none;  
padding: 0px 30px 5px 0px;    
align: center;  
margin: 0px 40px 0 25px;  
opacity: 0;  
position: relative;  
transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);     transition: all 0.6s cubic-bezier(0, 0, 0.58, 1) 0s; }

 .box:hover .social{  
 opacity: 1;  
transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }

 .box .social:before{  
content: "";  
width: 50px;  
 height: 2px;  
background: #fff;  
margin: 0 auto;     position: absolute;     top: -23px;     left: 0;     right: 0;   }

 .box .social li{     display: inline-block;     }

 .box .social li a{  
display: block;  
background: #F6CEE3;  
font-size: 20px;  
color: #fff;  
margin-right: 13px;  
margin-left: 2px;     padding-left: 6px;     padding-right: 30px;      
transition: all 0.3s ease 0s; }

 .box .social li a:hover{  
background: #bea041;  
color: #fff;     }

 .box .social li:last-child a{     } @media only screen and (max-width:990px){  
 .box{ margin-bottom: 30px; }

/* FIM Perfil do Author - Blog Sweet Magic */
 

Agora vá em Layout e Adicione um Gadget HTML/Javascript e cole:

<!-- Inicio --><div class="container">     <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="box">
                <img src="http://i.imgur.com/MOc7sQR.jpg" />
                <div class="box-content">
                    <h3 class="title">Yang mi</h3>
                    <span class="post"><center> Blogueira e Web Designer </center></span>
                    <center><ul class="social">
                    <li><a href="#" ><img src="http://i.imgur.com/FouOemS.png"/></a></li>
<li><a href="#"><img src="http://i.imgur.com/ZS9dz31.png"/></a></li>
<li><a href="#"><img src="http://i.imgur.com/WCXpEmg.png"/></a></li>
<li><a href="#"><img src="http://i.imgur.com/i9olAam.png"/></a></li>
</ul></center> </div> </div> </div></div></div><br/> <p>Olá, esse efeito foi disponibilizado no blog Sweet Magic da Junne Damasceno, você pode utilizar a vontade, mas não
 esqueça de por os créditos em alguma área do seu bloguinho!
 Kissus </p> <!-- Final -->

Coloque o link da sua foto (altere nesse dentro das aspas:  <img src="http://i.imgur.com/MOc7sQR.jpg" />) você precisa hospedar sua imagem para colar a url dela, recomendo o imgur

Nos # coloque o link das suas redes sociais e no final é um pequeno recadinho meu, pode apagar ou colocar sua descrição.

 Em Yang Mi altere para o seu nome e logo no elemento abaixo sua profissão ou pode ser sua descrição se preferir ela acima da imagem. Ficaria assim: 


- A imagem não ficou certinho na sua sidebar? Altere no css o width! (também aceita px)
- O texto não ta centralizado? Altere no css, o padding do texto ou margin! (exemplo no titulo: box title { margin: 0 40px 10px 0; ) A linha é .box .social:before{
- Caso queira outra cor  altere no css, as cores do botão são #F6CEE3 e #bea041! Salve! E autor do blog prontinho e super meigo! 

Não sei se funciona em Wordspress mas não custa nada tentar!
Para Homens: Alterando a cor dos botões fica super moderno para o seu blog/site também.

Por hoje é só!  Espero que tenham gostado! Qualquer duvida é só perguntar nos comentários ok? Posso ajudar com as medidas na sua sidebar se precisar! Até mais e Kissus! Tem postagem toda segunda, quarta e sexta então segue o bloguinho e visite sempre! Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest * 

Leia também:

31 comentários

  1. Oi Miga! Tudo bem? Tudo bom? Como vai? *imitando a youtuber Déborah Hudz rsrs*
    Eu amei esse tutorial, no próximo layout que fizer *vai ser se calhar de k-pop* vou utilizar este tutorial. Fica bem profissional *rindo*.
    Bjs e boa semana! http://ice-cream-da-leno.blogspot.pt/2017/06/resenha-selecao.html

    ResponderExcluir
    Respostas
    1. Oii, tudo e você? kk' Eu vejo o vídeo dela as vezes, adoro kk
      Que bom que gostou! Você tá sempre mudando de layout '0', use, vai ficar muito legal, sim, é mais profissional mesmo *-* Fico feliz que gostou! Bjs e boa semana pra você também!

      Excluir
    2. Eu só vou trocar o layout em agosto ou setembro, eu gosto é de começar a fazer cedo. Bjs!

      Excluir
  2. Eu tive uma época que eu tinha muita paciência para fazer esse tuto no blog, hoje em dia ando tão preguiçosa ;(. Sobre seu tuto, amei demais e vou salvar aqui no pc para fazer quando eu tiver um tempinho, acho o efeito hover muito lindo no blog <3 Espero conseguir! Beijos.

    ResponderExcluir
    Respostas
    1. Eu adoro trazer tutoriais assim, pois serve de treino pra mim também haha
      Aaah, fica assim não. Fico feliz que gostou! Use, qualquer duvida ée só perguntar aqui ou na página ok? Obrigada pela visita, e kissus!

      Excluir
  3. Boa dica de fazermos backup antes de tudo! Obrigada pela dica, quero fazer no meu blog porque tudo que é fofíneo eu amo!
    Seu blog é lindinho, parabéns!!! 😘

    ResponderExcluir
    Respostas
    1. Verdade, é sempre bom ter um backup, as vezes é mais pratico de voltar ao anterior ^^ Obrigada você pela visita e por comentar! Também amo tudo que é fofinho kk' volte aqui sempre tem ^.^ ~ Kissus!

      Excluir
  4. Parece que não mas vc tem razão em relação ao backup apesar de não ser da plataforma Blogger é só adaptar. 😉💜 Valeu pela dica.

    ResponderExcluir
    Respostas
    1. Ée sempre bom mesmo ! Sim, todos os blogs tem uma área de css e de widget (html) ^.^ Obrigada você pela visita e por comentar! Kissus

      Excluir
  5. Queria MUITO saber dessas coisas, mas sou uma negação nisso! kkk Parabéns pelo tutorial e paciência de explicar tudo bonitinho. Sucesso!
    beijos

    ResponderExcluir
    Respostas
    1. Aaah poxa, dar para pegar o jeito se mexer mais, é bom ter um blog de testes.
      Obrigadaa! Fico feliz que gostou do jeito que explico haha! Obrigada pela visita e por comentar! Kissus

      Excluir
  6. As tuas dicas são ótimaaas! Sempre pra deixar o blog mais fofinho *-* Sempre me dá preguiça de mexer no HTML, mas vontade de deixar ele lindo assim eu tenho x)

    Beijinhos :D
    http://tipsnconfessions.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigadaaa! Sim, adoro mexer com essas coisas e coisas fofinhas kk
      Aaah então larga esse preguiça e faz isso , qualquer coisa pode falar comigo tá? Minhas redes sociais ta ali encima! Kissus e obrigada pela visita!

      Excluir
  7. Que legal você ensinar como personalizar ainda mais o nosso blog. O meu já está do jeitinho que gosto..mas já salvei aqui caso queira mudar irei fazer esse. Arrasou.

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Tão bom tá do jeitinho que gosta, assim tudo, é muito bom! Obrigada por salvar , e pela visita! Kissus!

      Excluir
  8. Adorei esse seu post princesa, no entanto eu confesso que tenho muito medo de mexer no html do meu blog. Na verdade estava querendo muito mudar todo ele, mas vou ficar mesmo pela vontade, pois por mais posts que leia tenho sempre medo, mesmo guardando o anterior para poder voltar atrás, mesmo assim tenho muito medo...

    BeijinhoBom
    Paula Cardoso
    Magia nas Palavras ♥

    ResponderExcluir
    Respostas
    1. Fico feliz que gostou! Não precisa ter medo, é bem tranquilo, mas é sempre bom ter um blog de testes só para testar! Pode ficar tranquila, se não ir é só por o seu layout ^^ Kissus e até mais!

      Excluir
  9. Amei o tutorial! as vezes é bom ter coisas novas e diferentes pra dar um visual mais bonito no blog, amei o post e como ele está tudo bem explicadinho, na minha proxima mudança com certeza irei usar.

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Sim, é sempre bom adicionar detalhes assim, fica fofo e profissional , eeeeeeeeee \o obrigada! Quando usar não esqueça de me avisar hein!? Obrigada pela visita! kissus

      Excluir
  10. Eu apanho TANTO de HTML e esses trem que nem sei como agradecer por esses tutoriais hahaha você arrasou, muito obrigada mesmo! Adorei e assim que for mexer no meu layout vou querer incluir!

    ResponderExcluir
    Respostas
    1. Isso é normal, as vezes da certo as vezes não, ai dar erro e tem que reever oque fez e talz. Que bom que gostou do tutorial, obrigada você ela visita e por comentar! Que bom! *-* Kissus

      Excluir
  11. Sou péssima com HTML haha e adorei saber que seu blogue tem tantas dicas para nós blogueiras. Parabéns pelos seguidores e por compartilhar conosco seus conhecimentos! Todo sucesso do mundo.

    ResponderExcluir
    Respostas
    1. Aaah poxa, tem sim, só dar uma olhada na parte de css e html, tem dicas no meio ali também haha. Obrigadaaa! <3 Sucesso pra você também! Kissus!

      Excluir
  12. Que dica maravilhosa. Adorei muito. Pra mim que sempre to alterando algo no blog, e sozinha, esse post ajuda muito. Vou salvar nos favoritos e assim que eu usar te aviso!

    ResponderExcluir
    Respostas
    1. Obrigadaa! Fico feliz que gostou! Então já pegou o jeito né? Quando usar vou querer ver haha, e qualquer duvida é só falar aqui tá? Obrigada pela visita e por comentar, kissus!

      Excluir
  13. Olá!
    Você colocou um tutorial bem útil e mega atualizada, já vi várias blogueiras correndo atrás de um tutorial assim. Infelizmente meu blog é no wordpress, mas vou até procurar saber se esse método funciona lá também.

    ResponderExcluir
    Respostas
    1. Oláa! Sim, gosto de trazer coisas novas *-*Sei como é, já pesquisei muita coisas para blog quando não entendia mto. Sim, deve dar, só colocar o css onde fica o css, e o html em um novo widget! Obrigada pela visita e por comentar! Kissus!

      Excluir
  14. Menina sou muito ruim pra todas essas coisas a última vez que tentei o blog sumiu do ar e eu só queria trocar o plano de fundo 😂😂😂 agora sempre peço ajuda de quem entende ! Adorei sua matéria vou indicar pras minhas amigas

    ResponderExcluir
    Respostas
    1. Genteeee kkkkkk , deve ter ficado com aquela engrenagem, e mexeru no lugar errado, mas não precisa ficar com medo! Teste tudo em um blog de teste antes. Se precisar, pode falar comigo também! Obrigada! Kissus

      Excluir
  15. Olá, turubom?
    Parabéns pelos 200 seguidores e 100k de views! Eu tbm estou quase nos 200 seguidores e já passei dos 100k ♥
    ~ le eu indo lá no preview e dando a loka passando o mouse por cima das coisa tudo ~
    *informação aleatória* sabia q antes de criar meu blog no blogger, eu ia fazer ele no wordspress! Desisti pq parecia se mais fácil por aqui memo shuahsauh
    Olha, eu n sei o que significa hover, mas todos os tutos q vejo com essa palavras, sempre tem um resultado final mais bonito *u*
    bjs

    Blog: Skull Minds | Instagram | Sorteio de divulgação!

    ResponderExcluir
    Respostas
    1. Oláa, tudo sim e vc? kk
      Obrigadaaa! Eu vi lá, tá quase mesmo, parabéns adiantado! Deve ter passado bastante kk
      x'D é legal né, adoro esse efeito também, o hover é isso, o efeito de quando o mouse passa por cima ^.^
      Wordspress é mais profissional, eu vou estudar ele lá no curso, mas eu gosto muito do blogger por ser do google facilidade e talz.
      Obrigada pela visita! Kissus!

      Excluir

© 2017 Sweet Magic. Re-Design By: Juciane Damasceno. Tecnologia do Blogger.
Eu Sou do CBBlogers