♕ : Big post!! | Tutoriais & 4you!,bora conferir?

Amizade verdadeira é pra vida inteira *

Oi bears! bom dia, boa tarde :3

Bom Feriado a todos vocês. Que frio heim! Meu deus, vem ficar comigo ~~agarradinho debaixo da coberta~~ :3 Bom aqui você vai encontrar um pouco de tudo, icons, 2 tutorias imperdíveis! ,,

Imagens para post, gifs, Bases &&' muito mais, vem conferir :3

Primeiro esse tuto divo u.u :3

Vá no painel do seu blog > Modelo > Editar HTML > prosseguir. Agora procure (Ctrl+F)

~~resultado~~

pela Tag ]]></b:skin> e acima dele, cole:

imagem2 {margin: 3px; width: 100px; height: 100px; overflow: hidden; position: relative; border: 3px solid #CORDABORDA;float: left;}nome2 {position: absolute; display: block; width: 300px; height: 30px;top: 30px; margin-left: -20px; opacity: 0; text-align: center; color: #CORDOTEXTO; background: #fff; -webkit-transition-duration: 0.8s; border-top: 3px solid #CORDABORDA; border-bottom: 3px solid #CORDABORDA; line-height: 4px; text-transform: uppercase ; -webkit-transform: rotate(-15deg); font-size: 14px; font-family: 'play'}imagem2:hover nome2 { left: 20px; top: 60px; bottom: 5px; opacity: 1; width: 103px; height: 20px; line-height: 20px; -webkit-transform: rotate(0deg)}

Entendendo o código:

width: 100px; e height: 100px; : Este código que se encontra logo na primeira linha, é o valor da Largura e Altura.

Depois de editar seu código, vá até Layout > Adicionar um Gadget > HTML/Javascript e cole:

<a href="LINK"><imagem2><img src="LINK DA IMAGEM" width="100px" /> <nome2>ESCREVA O QUE QUISER</nome2></imagem2></a>

As partes em negrito coloque o que pede ok :3 Creditos:Kawaii The World !

~~Créditos tumbler~~

Coreanas <3

Tutorial bem bacana :3 confira !

Efeito Turn (8

Preview

Ameeeeeeei muito esse tuto, vamos aprender > Vá no seu HTML e procure por ]]></b:skin> Acima dessa tag coloque:.efeito{

align: center;

width: 225px;/* largura da imagem*/

height: 250px; /* altura da imagem*/

overflow: hidden;

}

.efeito img{

background: #fff;

width: 225px; /* largura da imagem*/

height: 250px; /* altura da imagem*/

align: center;

}

.efeito:hover img{

opacity: 0.5;

-webkit-transition-duration: 1.30s;

}

.efeito .descrip {

width: 100px; /* largura da imagem -25px */

height: 125px;/* altura da imagem -25px */

margin-top:-680px;

margin-left:0px;

background:rgba(255,255,255,0.5); /*cor e opacidade do fundo*/

color: rgba(0,0,0,0.7);

text-shadow: 0px 0px 4px #323232;

-webkit-transition: all 0.8s ease-out;

-moz-transition: all 0.8s ease-out;

border: 4px solid #FFf; /*cor da borda*/

}

.efeito:hover .descrip {

-webkit-transform: rotateY(-720deg);

width: 207px;/* largura do quadrado branco*/

height: 234px; /*altura do quadrado branco*/

margin-left: 5px;/*posição do quadrado branco*/

margin-bottom:-5px;/*posição do quadrado branco*/

margin-top:-251px; /*posição do quadrado branco*/

}

Está tudo explicado entre /* e */

Depois, crie um gadget de HTML/javascript e cole:

<div class="efeito"><img src="http://24.media.tumblr.com/tumblr_m2jvvg8h5g1r9uve2o2_250.png"><div class="descrip"><br/><br/>Escreva algo aqui. Escreva algo aquiEscreva algo aqui. Escreva algo aquiEscreva algo aqui. Escreva algo aqui. Escreva algo aqui</div></div>

Tuto por : Chovendo Diamantes