quarta-feira, 3 de junho de 2015

Widget Perfil Autor com CSS

Front-end-widget-autor-css3

Hoje vamos ensinar você a colocar esse lindo widget no seu blogger para ficar mais profissional isso se da uma boa visão com esse widget seu blogger vai ter um cartão de visitas  então faça questão de colocar em seu blogger. 

vamos aos passos para adicionar esse Widget 
Primeiro vamos adicionar o Css



Vá no painel do blogger faça login na sua conta do blogger va em layout >> adicionar um gadget  escolha formulário de contato e salve  
Adicionado o Código:
abra a aba modelo >> editar html  desdobre todo codigo blogger

Copie o código abaixo e cole o código acima / antes </ b: skin>
/*Colors*/
$background1: rgb(80,80,100);
$background2: rgb(243,115,70);
$white: rgb(240,240,240);
$blue: rgb(50,150,150);

/*Imports*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

body{
  background: $background2 ;
  font-family: 'Open Sans', sans-serif;
  box-sizing: border-box;
}

*{
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.container{
  width: 400px;
  margin: 10% auto 0;
  background: $white;
  border-radius: 3px;
  
  &:hover{
    .social li{
      margin: 0;
    }
  }
}

.header{
  text-align: center;
  padding: 40px 30px 0 30px;
  h1,h2{
    font-weight: 300;
  }
  h1{
    margin: 0;
  }
  h2{
    margin: 0 0 15px 0;
    color: $blue;
  }
}

.profile{
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin: 20px 0 -70px 0;
  border: 3px solid $background1;
  transition: all 1.5s ease;
  &:hover{
    border: 3px solid $background2;
  }
}

.content{
  background: $background1;
  color: $white;
  padding: 75px 0 0 0;
  text-align: center;
  height: auto;
  
  p{
    padding: 20px 40px;
    font-weight: 300;
  }
}

.social{
  padding: 40px 0 0 0;
  
  ul{
    list-style-type: none;
    width: 100%;
    height: 50px;
    overflow: hidden;
    li{
      margin: 50px 0 0 0; 
      float: left;
      width: 33.3333%;
      height: 100%;
      line-height: 50px;
      @for $i from 1 through 3 {
            &:nth-child(#{$i}) {
              transition: ($i * .3s);
            }}
  }
  a{
    color: #fff;
    text-decoration: none;
  }
  }}

.zocial-facebook{
  background: #3B5998;
  display: block;
}
.zocial-twitter{
  background: #55ACEE;
  display: block;
}

.zocial-instagram{
  background: #3F729B;
  display: block;
}

Agora salve vá em menu layout escolha adicionar um widget javascript selecione o codigo abaixo e cole 

<div class="container">
<div class="header">
<h1>
Richard Karsten</h1>
<h1>
      </h1>
<h2>
Frontend</h2>
<img class="profile" src="http://clikr.de/wp-content/uploads/2015/02/richard-150x150.jpg" />
  
</div>
<div class="content">
<h3>
about me</h3>
Hey - I am Richie, a 20 years old frontend dev. Feel free to follow me. Feel free to hire me :) <br />
<div class="social">
<ul>
<li>
          <a class="zocial-facebook" href="https://www.blogger.com/blogger.g?blogID"></a>
        </li>
<li>
          <a class="zocial-twitter" href="https://www.blogger.com/blogger.g?blogID"></a>
        </li>
<li>
          <a class="zocial-instagram" href="https://www.blogger.com/blogger.g?blogID=#"> </a>
        </li>
</ul>
</div>
</div>
</div>

Substitua os links das redes sociais pelos seu links atuais salve e pronto
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner