Bom dia unicórnias e unicórnios.
Eu estava vendo alguns blogs de html e vi que o World Of Tutos estava com um layout do Harry Potter, e os afiliados era em uma imagem só, ai eu parei e pensei, como assim ? e resolvi pesquisar como fazer. Eu sei que tem gente aqui que nem sabe do que eu estou falando então por isso aqui vai um print de como é :
Com o Photoscape você vai cortar a imagem em partes, como mostra na imagem a cima.
Você vai fazer o seguinte :
1 - Você vai ter que criar um arquivo do tamanho da sua sidebar ou menor, e salve-a.
2 - Abra o Photoscape e clique em divisor
3. Após isso, adicione sua imagem e defina as medidas. Recomendamos 50x50, mas minha imagem teve de ser redimensionada para 53x44, isto dependendo do tamanho da sua sidebar.
4. Feito isso, clique em "Divisão", e salve as imagens onde desejar.
5. Agora, entre em qualquer site hospedador e hospede suas imagens.
6. Vá no seu HTML, tecle Ctrl+F e procure pela tag ]]><b:skin> e acima dela, cole o seguinte código:
.afili {
opacity: 0.6;
-webkit-transition: 0.4s;
width: 50px;
height: 50px;
text-align: center;
margin-bottom: -3px;
}
.afili:hover {
opacity: 1.1;
}
7. Não altere NADA. Para adicionar, cole o seguinte código em um HTML/JavaScript, repetindo várias vezes, até que todas suas imagens estejam certas.
<a href="http://URL.com" title="Título da imagem"><img src="LINK DA IMAGEM" class="afili"/></a>
Ta, mais eu fiz o tutorial direitinho e as imagens ficaram separadas, e agora ?
Apague o espaço entre os códigos!
CRÉDITOS PELO TUTORIAL : 4 SECONDS
Legal adooorei super facil , o mais dificil é acerta o lugar de cada pegacinho da imagem hehe'
ResponderExcluirprincessofjeans.blogspot.com
Aham, mais é só salvar cada parte como 1, 2, 3 e depois fica fácil :)
Excluir