Tutorial: Mostrar e Ocultar posts+Wallpaper+Nail Art
setembro 20, 2011Roberta :3
O Blogger oferece opções para mostrar apenas parte das postagens não é? E também há como personalizar essa área com imagens.
Muita gente coloca isso como Leia mais, Continue, Read More...enfim, aí quando clica a página pode demorar para carregar.
Encontrei no Ciudad Blogger novamente outro tutorial fácil e que facilita as coisas para nós blogueiras e para nossos amigos e seguidores. Por meio desse tutorial, o leitor pode mostrar e ocultar a postagem ou qualquer coisa que queira apenas com um único clique!
Para isso, basta que vc adicione um código no html da postagem mesmo.
Faça o seguinte:
- Clique no link ou ícone para criar uma nova postagem;
- Clique em HTML na área de post
- Cole este código:
Sem imagem, apenas botão
<div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
Coloque aqui o que deseja ocultar. Pode ser qualquer coisa!
</div></div>
Com imagem:
<div class="divspoiler">
<img src="URL da imagem" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
Coloque aqui o que deseja ocultar. Pode ser qualquer coisa!
</div></div>
- Pronto. Por exemplo:
O primeiro código ficará como esse abaixo. Clique no botão "Mostrar" para ver o wallpaper que eu escondi hihihi:
Clique para ver em tamanho real
O segundo código ficará como esse abaixo. Clique na imagem "continue" para ver o tutorial de nail art que eu escondi huhuhu ¬¬:
Nail Art de Cupcake!!!: http://cupcakesclothes.blogspot.com/2011/06/cupcake-nail-art-tutorial.html
Blog muito fofo esse neh ^-^ Adorei conhecer ;3
A única desvantagem é que por causa desse efeito novo nas imagens do blogger, quando vc clica em qualquer imagem ela será mostrada junto às outras; mas é só fechar neh ^ ^ Espero que tenham gostado!!!
Super legal o tutorial, adorei. aah e esse tempo que passa tão rápido, acho que nem consegui comentar em todos os posts ♥ Beijos. umagarotanaotaoigual.blogspot.com
Não deu certo Bruna? Tente novamente;algumas vezes, quando usei esse tutorial na postagem, não deu certo; tive que visualizar a postagem no modo HTML mesmo e postar nesse modo. Tente de novo e depois me conta se deu certo ok? Espero poder ajudá-la e muito obrigada por suas visitas e comentários<3 beijus
Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.
Apenas peço que: - Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens; - Use um vocabulário livre para todas as idades; - Não ofenda ninguém em hipótese alguma.
Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.
Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros: Facebook - Twitter - Deviantart
Welcome!
Olá, eu sou Roberta, seja bem-vindo ao Reino Kawaii. Aqui você encontrará tutoriais, downloads, dicas e outros assuntos diversos de um jeito fofo e com certeza estará entre as pessoas que considero especiais guardadas com carinho no meu coração.
Super legal o tutorial, adorei. aah e esse tempo que passa tão rápido, acho que nem consegui comentar em todos os posts ♥
ResponderExcluirBeijos.
umagarotanaotaoigual.blogspot.com
adorei o tutorial
ResponderExcluirFico feliz por terem gostado!!!
ResponderExcluirbeijus e obrigada :3
O tutorial não resultou.
ResponderExcluirhttp://cuteworld-oficial.blogspot.com/
Não deu certo Bruna? Tente novamente;algumas vezes, quando usei esse tutorial na postagem, não deu certo; tive que visualizar a postagem no modo HTML mesmo e postar nesse modo. Tente de novo e depois me conta se deu certo ok?
ResponderExcluirEspero poder ajudá-la e muito obrigada por suas visitas e comentários<3 beijus
E como faz pra centralizar? Eu queria centralizar a imagem. Pode me ajudar? DD:
ResponderExcluirÉ só colocar o código da imagem entre center e /center (não se esqueça de que a palavra center deve vir entre esses dois sinais: <>)
ExcluirOi. Eu consigo personalizar esse botão?
ResponderExcluirAbraços e obrigada pela ajuda. Estava procurando por isso a um bom tempo...
Para usar personalizado, é legal pegar o código com imagem, aí você edita como preferir :D
Excluir