Volte para a página inicial Sobre o blog Coisinhas úteis Perguntas frequentes

10/11/2012

Tutorial: coloque o hack "leia mais" igual o nosso



Oi pessoal, esse é o nosso primeiro tutorial e eu espero que vocês gostem :3 Esse "leia mais" eu comecei a usar hoje, agorinha mesmo rs. 

Esse hack leia mais ajuda muito pois faz com que a postagem ocupe menos espaço no blog. Então, querem ver o tutorial? Clique em leia mais :)
créditos: Jackie Dream e Cute time



 como colocar
comece a escrever a postagem normalmente, como de costume. Para colocar o hack leia mais basta você fazer o seguinte:
clique para ampliar a imagem
agora você pode continuar a escrever sua postagem normalmente. Mas atenção: na hora de visualizar essa "barrinha" não aparece, então cuidado para não se confundir, hein?

 como personalizar
agora, se você quiser deixar o hack mais bonitinho, coloque uma imagem, assim como eu fiz aqui no blog. 

Vá no seu HTML  clique em expandir modelos de widgets  aperte F3  procure por:
<data:post.jumpText/>

agora você deve substituir esse trecho por:
<img src='URL da sua IMAGEM'/>

substitua URL da sua IMAGEM pela URL da imagem que você deseja colocar.


the image





se você gostar mais do efeito hover no hack, substitua  <data:post.jumpText/> por:
<img border='0' onmouseout='this.src=&apos;url da imagem principal&apos;' onmouseover='this.src=&apos;url da imagem com o mouse em cima&apos;; return true' src='url da imagem principal'/>  
eu já trouxe alguns modelos prontos pra vocês haha! Bom, é só copiar o código abaixo da imagem desejada e colar no lugar de  <data:post.jumpText/>

<img border='0' onmouseout='this.src=&apos;http://i.imgur.com/uErwS.png&apos;' onmouseover='this.src=&apos;http://i.imgur.com/8G7q6.png&apos;; return true' src='http://i.imgur.com/uErwS.png'/>

<img border='0' onmouseout='this.src=&apos;http://i.imgur.com/eo1m2.png&apos;' onmouseover='this.src=&apos;http://i.imgur.com/eTYhs.png&apos;; return true' src='http://i.imgur.com/eo1m2.png'/>

<img border='0' onmouseout='this.src=&apos;http://i.imgur.com/eWFP8.png&apos;' onmouseover='this.src=&apos;http://i.imgur.com/FHNfD.png&apos;; return true' src='http://i.imgur.com/eWFP8.png'/>


<img border='0' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeNP7SA4h6hUC-RufxKJuijm-azFTOaZMromKG5QmiySSO0z0c8IEF-NPAM6sSaTp7TPH8w0kJwAtE8V3DZ-edE6aGDp57ogd8izR8euM4H1bx6_DGlD3gcxW88wTlDWUptPcQFDU8BA8h/s1600/imagem+1+de+1.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir9ZufruekYzrHLlgVimoQFiyLEt7DKkCeSYJCWnITjgCN-ERfMhShsb2VewqIJoSC2BJKQfo4dBIV0Y44nMZvqo3t9NOMOYhPxxBjw3VlV_sj3CGcsG2tctThfLwoXMmO8YYt5pQYfwHk/s1600/imagem+2+de+1.png&apos;; return true' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeNP7SA4h6hUC-RufxKJuijm-azFTOaZMromKG5QmiySSO0z0c8IEF-NPAM6sSaTp7TPH8w0kJwAtE8V3DZ-edE6aGDp57ogd8izR8euM4H1bx6_DGlD3gcxW88wTlDWUptPcQFDU8BA8h/s1600/imagem+1+de+1.png'/> 

Nenhum comentário:

Postar um comentário