Modificar gadget profile/bt

Vamos lá com mais uma partilha,dica,tutorial...
Acima podemos visualizár gadget de profile/perfil do blogger, entâo fiz algumas alterações.
Nas modificações temos imagem com efeito no hover e centramos a letra nome ,côr, fonte.

Antes de tudo faça 1 cópia do seu template...

Vamos lá em modelo do seu template html e procure este trecho``

/* PROFILE */
.profile-img {

Agora apague todo trecho do seu profile e troque este meu código``

/* PROFILE */
.profile-img {
float: left;
margin-top: 0;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0;
padding: 4px;
border:3px solid #666;
border-radius:10px  ;
-moz-border-radius:10px;
-webkit-border-radius:10px;
width:255px;
height:90px;
background:#222 url();
box-shadow:0px 0px 20px 0px #000;
-moz-box-shadow:0px 0px 20px 0px #000;
-webkit-box-shadow:0px 0px 20px 0px #000;
 transition:width 3s, height 3s, transform 3s, background-color 3s;
-webkit-transition:width 3s, height 3s,color 3s, -webkit-transform 3s, background-color 3s;
}
.profile-img:hover{
 transform:rotate(-8deg);
-webkit-transform:rotate(-8deg); /* Prefix for Safari */
}
.profile-data {
margin:0;
font-weight: bold;
line-height: 1.6em;
text-align: center;
font-family: Oswald;
font-style: italic;
text-shadow:
1px 0px 0px #000,
0px -1px 0px #000,
-1px 0px 0px #000,
0px 1px 0px #000;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
display:none;
}

Feito isto salve e visualize,pois terá fazer algumas alterações``

Vamos agora abaixo entender e alterar o código...

• border:3px solid #666;borda espessura e côr da imagem
• border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;angulo borda
• width:255px;largura imagem height:90px; altura imagem
• background:#222 url(); côr do fundo imagem
• box-shadow 0px 0px 20px 0px #000; côr diametro sombra imagem
• transition:width 3s, height 3s, efeito na imagem transform:rotate(-8deg);efeito hover imagem
• font-family: Oswald; fonte nome text-align: center; nome ao centro
• text-shadow:1px 0px 0px #000, sombra ,côr, texto

É isto que trouxe agora ,espero seja útil ,alguma dúvida avise!Até mais...

Modificar gadget profile/bt

► 0

► dicas vários

► Cartita