Cómo poner un botón de 'Spoiler' en tu entrada.

¡Hola todo el mundo bloggero! Hace unos días en un grupo de WhatsApp alguien preguntó que si sabíamos como poner un botón de 'spoiler' en una entrada para las reseñas y todo eso así que en ese momento rápido me vino a la mente que yo hace tiempo había estado buscando lo mismo y que tenía un código en un bloc de notas guardado por alguna parte en mi computadora, me pusé las pilas y lo busqué, una vez que lo tenía pensé que sería buena idea mostrarles a ustedes también como es que se puede lograr.

Ya verán que fácil y útil puede llegar a ser sobretodo si tu blog esta dedicado a las reseñas y algunas veces es necesario dar algún spoiler pero claro sin arruinarlo para todos, solo para los chismosos como yo.

¡Empecemos! La primera opción que tengo es la siguiente, que es en forma de botón.

“I will spend the rest of my life trying to make you happy, and when you get tired of looking at me, I promise I’ll sing.” - Making Faces

Y para lograrlo lo único que tiene que hacer es pegar el siguiente código en la entrada que están realizando para su blog.

<input type="button" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''; this.value = 'Ocultar'; }else{document.getElementById('spoiler1') .style.display='none';this.value = 'Mostrar'; }" value="Mostrar"/><div id="spoiler1" style="display:none">
Aquí el texto que quieres ocultar
</div>

Como segunda opción esta:

Spoiler

“I will spend the rest of my life trying to make you happy, and when you get tired of looking at me, I promise I’ll sing.” - Making Faces

Para conseguir que se vea de esta manera tienes que pegar el siguiente código.

<div><a href='#' onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.innerHTML = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = 'Spoiler';}return false" type="button">Spoiler</a>
  <div style="display: none;">Aquí el texto que quieres ocultar</div>
</div>

Espero que les sirva y le puedan dar un buen provecho en sus siguientes entradas, como recomendación les diré que el segundo código que es solo texto puede llegar a moverse y no hacer su función así que con cuidado, es un poco engañoso. En la entrada anterior sobre tutoriales de diseño blogger les pregunté que más querían que les enseñara a hacer y Victor me dió una idea así que solo te quiero decir que no la he dejado fuera solo le estoy dando tiempo, espero pronto traer un tutorial de lo que pediste. ¡Besos!.