Mini maratona de tutoriais #2: Efeito Left-Autores, Welcome...

Olá meninas *-*

Hoje estou preparando um post para mostrar um desenho meu desde o começo, ou quase, porque esqueci de tirar foto do esboço ^.^Desculpem ,hihi... Mas em quanto não fica pronto trago um tutorial, acho que vou trazer só mais uns 2 ou 3, já que é uma mini maratona ^^ . Enfim, o tuto de hoje é de um efeito que pode ser usado para o gadget de "autores" , "Welcome" ou " The End" , eu acho esse efeito bem legal.

Aqui está o preview dele , vamos aprender?

Primeiramente, os créditos pelo tutorial vão para o Eu Amo HTML

Siga o caminho que você já conhece até  Editar HTML e pesquise (ctrl+F) por ]]><

Quando achar cole acima dele:

#left-isa {
width: 240px; /* Largura */
height: 240px; /* Altura */
background: black; /* Cor */
margin-top: -246px; /* Altura do back colorido */
color: #ccc; /* Cor da fone */
text-shadow:0 1px #fff; /* Cor da sombra */
font-family: trebuchet ms; /* Fonte */
font-size: 12px; /* Tamanho da fonte */
text-align:center; /* Alinhamento do texto */
margin-left: 120px;
opacity:0;
-webkit-transition: all .5s ease-in-out
}
#left-isa:hover{
margin-left: 0px;
opacity: 0.75;
}

Altere apenas o que se pede, com a tabela do Mix Studio (essa)

Visualize e se tiver tudo certo (não der erro na leitura do código) salve.

Agora vá em layout> Adicionar Gadget> HTML/ Java Script e cole:

<center><a href='LINK'><img src=" Url da sua Imagem" style="padding: 2px; border: 1px dotted #ccc;"/><div id="left-isa"></br><br />Escreva algo aqui. Escreva algo aqui. Escreva algo aqui. Escreva algo aqui. Escreva algo aqui. Escreva algo aqui. Escreva algo aqui. Escreva algo aqui.</div></a></center>

[

Mude o que está em negrito e pronto ^^

Espero que de certo, adoro esse efeito, fica super legal no blog *-*

Ah, eu vou colocar aqui no final algumas imagens que tenho no meu computador e você pode usar pra esse gadget ^^ Espero que goste, até o próximo post , Beijoos <3