Olá anjos! Boa tarde!
A Lucy estava falando comigo que não sabe passar códigos do Tumblr para Blogger, então eu pensei um pouco e talvez mais tarde eu faça um tutorial ensinando a passar.
Enquanto fazia alguns testes, passei um código para blogger que é Menu Agitated, do Tumblr Single Themes. Ele é um menu e fica mais legal embaixo do cabeçalho, mas vocês podem usar onde quiser.
Veja um preview aqui.
1-Cole o seguinte código acima de <head>:
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'/>
Essa é a fonte do menu, troque por outra se quiser.
2-Feito isso, cole o seguinte código acima de /b:skin:
/*********** Menu Agitated *****************/
/* Animação */
@-webkit-keyframes gangorra {
from {-webkit-transform: rotate(10deg);}
to {-webkit-transform: rotate(-10deg);}
}
@-moz-keyframes gangorra {
from {-moz-transform: rotate(10deg);}
to {-moz-transform: rotate(-10deg);}
}
@-o-keyframes gangorra {
from {-o-transform: rotate(10deg);}
to {-o-transform: rotate(-10deg);}
}
/* Menu */
mn {display: inline-block;
font-family: 'Fjalla One', cursive;
font-size: 25px; /* Tamanho da fonte */
background: #fe579c; /* Cor de fundo do menu */
padding: 2px;
text-align: center;
text-transform: uppercase;
border-radius: 5px;
color: #fff; /* Cor da fonte */
cursor: pointer;
text-shadow: 2px 2px 0px #e9508f; /* Sombra nas palavras do menu */
width: 90px; /* Tamanho do Menu */
}
mn:hover {
-webkit-animation-name: gangorra;
-webkit-animation-duration: .01s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-name: gangorra;
-moz-animation-duration: 0.1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-o-animation-name: gangorra;
-o-animation-duration: 0.1s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;}
A explicação está no próprio código. Mude como quiser.
3-Depois cole um Gadget de HTML/JavaScript, o seguinte código:
<a href="/"><mn>Home</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
Esse é o código do menu, mude as partes em negrito, caso queira acrescentar ou tirar um link é só copiar e colar a última linha novamente.
Espero que seja útil!
É muitooo lindo!
ResponderExcluirMas se o layout já estiver muito elaborado, não fica legal.