Super Post de Natal (Especial)

Oi terráquios!!

Então, que tal um mega post, com dois tutoriais ? CHEGOU O DIAAAAA

Eles são como presente de natal a vocês meus amorecoos!! Os tutoriais são simples e fáceis de fazer.

1° Tutorial - Efeito Autores veja o preview, 7° gadget

Vá em teu HTML e procure por ]]></b:skin> e cole o (imenso) código: 

.view {
cursor: pointer;
height: ALTURApx;
margin: 1px;
overflow: hidden;
position: relative;
text-align: center;
width: 110px;
display: inline-block;
}
.view img { /* a imagem */
display: inline-block;
position: relative;
-moz-transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
opacity: 1;
filter: alpha(opacity=100);
}
.view:hover img { /* se "anima quando passamos o mouse em cima */
-moz-transform: rotate(620deg) scale(0);
-webkit-transform: rotate(620deg) scale(0);
-o-transform: rotate(620deg) scale(0);
-ms-transform: rotate(620deg) scale(0);
transform: rotate(620deg) scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
.view .mask {
background-color: #CORDOFUNDO;
height: 110px;
left: 0;
position: absolute;
overflow: hidden;
top: 0;
width: LARGURApx;
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
opacity: 0;
filter: alpha(opacity=0);
}
.view:hover .mask {
-moz-transform: translateY(0px) rotate(0deg);
-webkit-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
opacity: 1;
filter: alpha(opacity=100);}
.view h4 {
background-color: #CORDAFAIXA;
opacity: 0.8;
color: #CORDOTÍTULO;
text-align: center;
position: relative;
font-family: handy;
text-transform: uppercase;
font-size: 8px;
margin: 9px 0 0 0;
padding: 5px 0;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover h4 { /* título é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view p { /* o texto permanece oculto */
color: #fd0505;
font-family: pf arma five;
font-size: 8px;
margin: 0;
padding: 15px;
position: relative;
text-align: center;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover p { /* texto é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view a.info { /* o link permanece oculto */
background-color: #CORDOBOTÃO;
border-radius: 5px;
box-shadow: 0 0 2px #e4e2e5, 0 0 5px #e4e2e5 inset;
color: #FFF;
display: inline-block;
padding: 2px 10px;
text-decoration: none;
margin-top: 8px;
font-family: handy;
font-size: 8px;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view a.info:hover {
box-shadow: 0 0 5px #968ca3;
}
.view:hover a.info { /* link é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}

Para colocar as cores, vá nesta tabela [www] e copie as cores desejadas, no código está tudo explicado.
Agora, você vai em Layout - Adicionar um novo gadget - HTML/JavaScript e cole este código quantas vezes forem precisas, por exemplo, preciso de 2 pessoas, eu coloco:
- 1° Código
- 2° Código
Entenderam? Vamos ao código:

<div class="view"><img src="URL DA FOTO" /><div class="mask"><h4>NOME</h4><a href="LINK" class="info">Visite!</a></div></div>

Nos códigos tudo está explicado. O tamanho da imagem para colocar, é de 110x110. 

2° Tutorial - Menu Crazy Borders

Então, o resultado fica assim:

Imagem pega no Farry Teen // OFFICIAL

Vá em HTML e procure por ]]></b:skin> ACIMA cole o código:

/*Menu By Farry Teen//Não retire os créditos*/cg {font-family: Trebuchet; /* Fonte do Menu */width: 18%; /* Tamanho do Menu */float: left;background: #FFFFFF; /* Fundo do menu*/padding: 6px;text-align: center; /* Alinhamento do texto */margin: 2px;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;border-radius: 25px 10px / 10px 25px;-moz-border-radius: 25px 10px / 10px 25px;-moz-border-radius-topleft: 20px;-moz-border-radius-topright: 20px;border-top-left-radius: 20px;border-top-right-radius: 20px;-webkit-transition-duration: .80s;font-size: 08pt; /* Tamanho da fonte */color: #FF69B4; /* Cor da fonte */}/*Menu By Farry Teen//Não retire os créditos*/

Está tudo explicado no código tá? Veja a tabela de cores da web clicando [aqui]

Galera, recomendo que vocês passem todos os códigos de tutoriais para o Word, ou um bloco de notas no computador mesmo, que aí você consegue fazer, de uma forma simples as modificações necessárias. 

Agora vamos a outra parte do código. Desta vez, você terá de ir no layout e adicionar um gadget com esse código, fazendo as devidas modificações:

<a href="Link da pagina"><cg>Nome da pagina</cg></a>

Então gente, quem gostou do Big Post? Não foi tão grande mas tá bom neh? E desculpem postar atrasado, é que ontem eu estava muito ocupada!! Mas o importante é que o post tá no blog pra vcs neh?

Bezzos

Créditos a Farry Teen e Kawaai World (s2)