Como poner un botón Spoiler en Blogger.

Para el que no sepa lo que es un spoiler y para que sirve y como se crea,aquí en unos sencillos pasos aprenderás a colocarlo en tu blog.

El spoiler tiene la función de ocultar y mostrar texto o imágenes,y es muy útil a la hora de querer reducir espacio en las entradas o solamente si quieres que el texto o la imagen solo se vea al pulsarlo.

Lo primero que necesitaremos es el código:

<div><input value="Mostrar" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar Contenido';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar Contenido';}" type="button" /><div style="display: none;">AQUI EL CONTENIDO QUE QUIERAS OCULTAR</div></div>

El texto en rojo lo puedes modificar por el texto,link o lo que quieras poner.

1. Copia el código y pégalo en la Nueva entrada en Edición de HTML en el lugar de la entrada donde quieres mostrarlo.
2. Modifica el texto a mostrar cuando pulsen y listo.

 

Este seria el resultado,pulsa y prueba.

 

Gracias por tu visita y espero que te sea útil.

 

 

Así de fácil tienes un botón en tus entradas.

Trucos,tutoriales y herramientas para mejorar tu blog.

Crear dos columnas de texto en un entrada de tu blog.

Este truco es de mucha utilidad cuando tenemos un texto muy largo y no queremos partir la entrada con “Leer mas..” 

El poder escribir el texto de esta manera nos permite, aparte de una estética bonita en la presentación,el poder ahorrar espacio y que la página no se nos haga tan larga,para poder tener más cosas de un solo vistazo.

Vamos entonces a ver cómo crear dos columnas dentro de una entrada sin necesidad de tocar la plantilla; lo que significa que podrás adaptar las columnas cuando quieras y esto no afectará a tus demás entradas.

Esté es el código:

<div style="padding: 10px; float: left; width: 45%; text-align: justify;">Texto de la columna (lado izquierdo)</div><div style="padding: 10px; float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div>

Al crear una nueva entrada pegamos este código en edición HTML y el texto que esta en verde lo cambiaremos por el texto que queramos poner en esa entrada.

 

Si queremos insertar una imagen:

 

 

Podemos insertar una imagen en miniatura al lado del texto,de esta forma le damos un toque muy especial a la entrada,llamando así la atención del lector que esta visitando tu blog.

 

Subimos la imagen en miniatura a nuestro servidor de imágenes preferidos y luego copiamos su URL.

 

 

 

 

 

 

 

Este es el código:

<div style="padding: 10px; float: left; width: 45%; text-align: justify;"><img style="margin: 0px; float: left;" src="URL de la imagen" alt="Trucos blogger” border="0" />Texto de la columna (lado izquierdo)</div><div style="padding: 10px; float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div>

Así de fácil podéis tener una entrada en forma de revista o periódico.

Trucos,tutoriales y herramientas para mejorar tu blog.

Insertar tablas en una entrada de tu blog.

Si quieres insertar una tabla en una entrada de tu blog debes incluir el código que aparece a continuación. Este puede ser modificado para obtener diferentes resultados y estilos de tablas.

Código:

<table border=3><td>Aquí va el contenido de la tabla,lo que quieras introducir</td></table>

 

Resultado:

Aquí va el contenido de la tabla,lo que quieras introducir

El número 3 se refiere al tamaño del borde de la tabla. Si aumentas el número el borde será mas grueso y si escribes 0 la tabla no mostrará borde alguno.

Otro efecto que podemos aplicar a una tabla es el color de los bordes de la tabla y el color de fondo. Esto se hace añadiendo los códigos de <bordercolor="black"> para el color de borde y <bgcolor="violet"> para el color de fondo.

Código:

<table border=3 bordercolor="black" bgcolor="violet"><td><font color="black">Tabla con borde de color negro (black) y fondo violeta (violet). El color de letra (font color) es negro</font></td></table>

Resultado:

 

Tabla con borde de color negro (black) y fondo violeta (violet). El color de letra (font color) es negro

Solo tienes que cambiar las propiedades de los códigos para obtener otros resultados que mas te gusten.


 

Trucos,tutoriales y herramientas para mejorar tu blog.

Poner el fondo de color en una entrada.

Para poner el fondo de una entrada en un color distinto al que sueles tener en tu blog vamos a utilizar un código HTML muy sencillo de utilizar.Este código también nos serviría para dar color a una tabla que insertemos en la entrada.   Vamos por pasos: Este seria el código solo tienes que elegir el color que tu quieras.     <table bgcolor=”aquí el color quieras”><tbody><tr><td>aquí la entrada</td></tr></tbody><table> Para introducirlo en una entrada: Nos dirigimos a creación de entradas y en edición HTML pegamos arriba del todo esta parte del código: <table bgcolor="código del color”><tbody><tr><td>   AQUI PUBLICAS TU ENTRADA   Y cerrando la entrada:  </td></tr></tbody><table> Así de sencillo puedes tener una entrada personalizada o que quieras destacar,siempre puedes modificar donde quieres que empiece y termine el color,eso solo es cuestión de que experimentes en borrador.   Códigos colores hexadecimal:http://html-color-codes.info/codigos-de-colores-hexadecimales/ Trucos,tutoriales y herramientas para mejorar tu blog.

Insertar línea de separación en las entradas.

Para insertar una línea que separe el contenido de una entrada vamos a utilizar un código HTML muy simple y fácil de entender.

Utilizaremos el siguiente código: <hr> 

Este seria el resultado:

---

Ahora si queremos ponerle color el código seria este: <hr color=”blue”>

Este seria el resultado,añadiendo al código: color=”blue”

---

Ahora si queremos cambiar el grosor el código seria este: <hr color=”black” size=20>

Este seria el resultado,añadiendo al código: size=20 

---

Ahora si queremos cambiar la longitud: <hr color="pink" size=6 width="200"> 

Este seria el resultado,añadiendo al código: width=”200”

---

Solo tenéis que modificar y poner a vuestro gusto los colores,tamaños y grosores que queráis poner.Para insertarlo en las entradas ya sabéis, dentro de creación de entradas arriba en elementos HTML.

 

Trucos,tutoriales y herramientas para mejorar tu blog.

Texto en movimiento siempre junto a tu firma.

Ya explicamos en entradas anteriores como hacer tu firma y como publicarlas en todos los pots,para el que no lo vio podéis entrar en Crear firma ( Aquí ) y en Publicar firma en todos los pots ( Aquí ).Hoy explicaremos como poner arriba o abajo de tu firma un texto en movimiento con un sencillo código HTML y que salgan en todas tus entradas o en las que tu decidas.

Este es el código HTML para el texto en movimiento:

<marquee>Aquí el texto que quieras</marquee>

 Insertar texto en movimiento en todas las entradas:

Una vez que tengamos puesto el texto que queremos que salga arriba o abajo de tu firma,nos vamos dentro de nuestro escritorio de blogger a: configuración – formato – y buscamos dentro de formato plantilla de entrada.Dentro de plantilla de entrada pegamos el código arriba o abajo de la firma.Le damos a GUARDAR CONFIGURACION y listo.

Si alguna vez no quieres poner el texto en movimiento o la firma en algunas de las entradas,pues cuando empieces a escribir veras que arriba ahí tres opciones: Vista previa – Edición HTML – Redactar,pulsas en Edición HTML y ahí puedes borrar lo que tengas predeterminado en la plantilla de entrada.

Como puedes ver es muy fácil y abajo veras el resultado junto a mi firma.

 

Trucos,tutoriales y herramientas para mejorar tu blog.