Perfil do Autor com efeito hover de Redes Sociais

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!

[preview]

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 *