ir arriba
Google
Mostrando entradas con la etiqueta Edición textos en tu blog. Mostrar todas las entradas
Mostrando entradas con la etiqueta Edición textos en tu blog. Mostrar todas las entradas

Tachar texto con html en tu blog

Estás redactando un texto y necesitas tachar una parte de este, acudes al editor y ves que no aparece la opción....y ahora ¿Que hago?

Veamos, la solución es fácil....deberás ir a la edición de HTML de tu post y añadir las siguientes etiquetas, dentro de ellas tu texto. A continuación podeis visualizar la explicación

como tachar texto en html

5 comentarios

Etiquetas: ,

Generador texto CSS

Con este generador de texto de CSS online podréis obtener los siguientes resultados sin necesidad de saber ni una linea de código y permitiros la libertad de redactar vuestros posts con muchos más efectos como podréis observar a continuación para confeccionar títulos o redactar posts enteros. os puede sacar de apuros que el redactor de posts de blogger no posee como subrayar, tachar textos...las posibilidades son ilimitadas


Con titulos podeis conseguir los siguientes efectos;



Todo para tu blog


TODO PARA TU BLOG



Todo para tu blog



Con textos podeis conseguir estos efectos;

Textos, con fondo de color, bordeados con puntos, enmarcados, doble raya, textos que ocupen con un ancho predeterminado......otra selección de efectos que se pueden conseguir dentro de las ilimitadas variaciones que se pueden conseguir.


Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.



Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.




Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.



Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.



Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


A continuación, podéis observar la interfaz de este generador, que seguramente se convertirá en una herramienta imprescindible y usada regularmente para la edición de vuestro blog, como siempre en los generadores tenéis todas las herramientas que podéis personalizar en este caso es cualquier variante del texto.....(tomaros un rato para descubrir todo lo que podeis hacer) podreis previsualizar todos los cambios en la misma página pulsando generate si estais satisfechos con el resultado sólo tendreis que copiar el código que os ofrecen en Version Novice y copiarlo en la Edición HTML de vuestro post donde querais incluir los cambios.



Para usuarios avanzados que dominen el código CSS pueden editar cualquier estilo e incorporar el código en el HTML de web o blog que estemos editando con la opción Version 2 "expert" .
Sin duda una herramienta muy útil para cualquier usuario y que podemos encontrar en CSSTEXT



10 comentarios

Etiquetas: , , ,

Google y sus colores

A continuación os traigo un apunte simpático y curioso, ¿Cómo insertarías el logo de Google sin usar una imagen? Tal que así
Google
Para conseguir este efecto se ha utilizado el siguiente código



Con el anterior código podeis conseguir vuestros propios efectos cambiando los valores del color e introduciendo letras o palabras como por ejemplo;
Los límites los pones tú!!!!!

Para conseguir el código de los colores visitar colorblender

0 comentarios

Etiquetas: ,

Subrayar texto con CSS en tu blog

En el panel de edición de textos de nuestro blog no aparece la opción de poder subrayar los texto con unas simples lineas de código vamos a solucionar la carencia de esta opción;
Antes de acabar la etiqueta head en la plantilla o la vista de diseño en html, como os guste más, habrá que insertar el siguiente código



Con el anterior cambio modificado de ahora en adelante cada vez que queramos subrayar deberemos utilizar en la redacción de nuestro post el siguiente código;



Se vería tal que así; Insertar el texto que queramos subrayar

Recordar!!!El anterior código se debera utilizar insertando entre el solo las palabras que queramos subrayar

Este efecto sólo se consigue utilizando la edición html de redacción del post en la opción de redactar no es viable.

0 comentarios

Etiquetas: ,

Ajustar imagen de fondo con texto del post

Siguiendo con el anterior post os traigo otro método, mucho más sencillo de implementar y que podeis jugar con la opacidad de la imagen en la que estais insertando el texto.

Este nuevo metodo entra en juego el valor opacity y que podeis personalizar según la relevancia que le querais dar a la imagen (valores entre 0 y 1, 0,25; 0,50; 0,75), también podreis personalizar el ancho y altura de la capa conforme al tamaño del texto ajustandose a este, para que aparezca el texto dentro de la imagen hay que asignarles los mismos valors al witdh y al height que hay dentro de las etiquetas, podeis probar en la edición de html y con vista previa para ver los resultados de vuestros ajustes.

Código que se va a utilizar:


Opacidad a 0.50 y centrado


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vel tellus eu mauris tempor fermentum. Nunc ipsum. Pellentesque sodales commodo lacus. Integer turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam suscipit, mauris at adipiscing interdum, erat tellus faucibus risus, sed lacinia odio libero nec leo. Suspendisse potenti. Quisque eu turpis et dui viverra aliquam. Fusce et metus. Vivamus sollicitudin urna sagittis lectus pretium ultricies. Integer rhoncus viverra pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer vel libero. Vivamus vehicula bibendum orci. Suspendisse sit amet mi eget lorem congue cursus.


Sólo hay un pequeño inconveniente; para que puedas consegiur este efecto al redactar el post siempre deberás ajustar el texto y la imagen en edición html, en el tradicional modo de redactar los textos no se reflejan los cambios hasta que no modifiques los valores en el código ( witdh y height), tenlo en cuenta.




0 comentarios

Etiquetas: , ,

Insertar imagen detrás del texto de una entrada del blog

Si queréis redactar un post especial o remarcar una parte de un post de una forma especial aqui os traigo un recurso para hacer de esa entrada algo diferente a lo que teneis acostumbrados a vuestros visitantes, un aspecto muy importante es que utiliceis imágenes en las que la legilibidad del post no resulte alterada, un post que no se pueda leer es un visitante que se va sin saber lo que habeis escrito.


Aquí podeis ver el resultado del efecto que os voy a explicar a continuación





Si queréis redactar un post especial o remarcar una parte de un post de una forma especial aqui os traigo un recurso para hacer de esa entrada algo diferente a lo que teneis acostumbrados a vuestros visitantes, un aspecto muy importante es que utiliceis imágenes en las que la legilibidad del post no resulte alterada

Analicemos el código; El código tiene las siguiente variables que podeis utilizar para personalizar el post;
  • Widht--->Ancho del post (os recomiendo utilizar 600 px, ya que normalmente es el ancho de los posts)
  • height--->Altura del post (personalizar según la altura del post)
  • barckground---> Url de la imagen (la imagen que vayais a utilizar alojada en cualquier servicio de alojamiento de imagenes y el código que nos proporcionan en forma de url en estos servicios", podeis utilizar imageshack para este fin (entre otros)
  • bgcolor---> Si quereis utilizar el color como fondo del post lo debereis indicar aqui en forma de código (ej. #ffffff) y dejar el campo background, osea omitir el paso anteior que hemos explicado.
  • Border y bordecolor---> Es el "borde" del post podéis darle valores de 1 a lo que queráis y el siguiente valor el color de este (deberéis añadir según código de colores, ya sabéis #valor alfanumerico como #ffffff que pertenece al color blanco.Es importante destacar que estas propiedades no son visibles en navegadores como mozilla firefox.
¿Que imagen podemos usar?
Si utilizais una imagen pequeña comoun icono por ejemplo os puede quedar así
escribir aqui un texto

o el ejemplo anterior que utilizamos la siguiente imagen estas imágenes pequeñas se repetiran hasta rellenar todo el espacio, por lo que unas imágenes muy a tener en cuenta en este tipo de post son las que nos ofrece el servicio everyday icons
Por el contrario si utilizais imagenes de mayor tamaño el efecto que os queda es tal que así;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vel tellus eu mauris tempor fermentum. Nunc ipsum. Pellentesque sodales commodo lacus. Integer turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam suscipit, mauris at adipiscing interdum, erat tellus faucibus risus, sed lacinia odio libero nec leo. Suspendisse potenti. Quisque eu turpis et dui viverra aliquam. Fusce et metus. Vivamus sollicitudin urna sagittis lectus pretium ultricies. Integer rhoncus viverra pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer vel libero. Vivamus vehicula bibendum orci. Suspendisse sit amet mi eget lorem congue cursus.

Sed porta neque non odio ullamcorper gravida. Fusce nisl augue, fringilla eu, eleifend nec, iaculis in, magna. Proin non enim. Etiam tempus vestibulum diam. Morbi sagittis. Maecenas dictum lacus. Curabitur ultricies erat eu felis. Sed ut mi. Sed congue, massa lacinia molestie cursus, justo dui tristique erat, sit amet facilisis nisi lacus varius erat. Ut ac libero consectetuer enim imperdiet porta. Aenean vel velit vitae nunc vestibulum tincidunt. Cras enim risus, aliquam venenatis, commodo ac, tincidunt et, felis. Integer ornare eleifend elit. Etiam eleifend, leo nec auctor scelerisque, augue velit accumsan nunc, id porta lorem ante sed libero. Nam ullamcorper dui et quam. Proin metus risus, tempor at, iaculis a, dictum nec, ligula. Nullam ultricies.
Nam ante neque, lobortis eu, fringilla adipiscing, ullamcorper nec, arcu. Curabitur eget enim ut dui pulvinar tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id augue. Praesent ultrices, pede quis eleifend placerat, mi dui imperdiet ipsum, dignissim aliquam nibh justo ac ligula. Nam justo metus, adipiscing eget, fringilla id, porttitor ornare, orci. Maecenas metus est, vestibulum vel, laoreet eu, feugiat vitae, nisl. Nam tincidunt. Nulla non nisl porttitor nunc vestibulum interdum. Nam mi nulla, dapibus vel, vestibulum vitae, egestas vel, enim. Nulla eu odio pharetra nisl tempus tristique. Sed blandit. Mauris ac mi. Etiam rutrum iaculis sapien.



  • Como último consejo a tener en cuenta tener en cuenta al usar este recurso que la legilibidad para el lector sea óptima. Usar esta relación, fondo oscuro, fuente clara; fondo claro, fuente oscura.

Enlaces que puedes necesitar para realizar es truco;

2 comentarios

Etiquetas: ,

Insertar texto en caja

Para insertar un texto en una caja tal que se muestre así;

Contenido del párrafo


Debereis usar el siguiente código;


Para poder personalizar vuestro código teneis diferentes variables que pueden cambiar la apariencia de la caja de texto, empezaremos con border, su valor como podeis comprobar es númerico simplemente cambiando el 1 por 4 puede variar la apariencia de nuestro bloque de texto tal que así

Contenido del párrafo

La siguiente variable es solid black se refiere al color del color del borde de nuestro bloque tal que si lo cambiamos por blue (por ejemplo) nos quedaria así

Contenido del párrafo



La siguiente variable se refiere a el ancho de el bloque de texto padding; 10px, como podreis observar nos enfrentamos a otro valor númerico deberemos personalizarlo según el efecto final que deseemos conseguir

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eu enim ut lorem tincidunt condimentum. Curabitur ac odio non tellus eleifend convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras quis arcu. Praesent ante ante, porttitor et, interdum in, mollis eu, libero. Nullam magna neque, dapibus nec, dictum in, pulvinar sed, lectus. Aliquam erat volutpat. Suspendisse sit amet nunc. Maecenas vel purus. Aenean nec mauris non orci fringilla scelerisque. In at nulla nec ipsum gravida auctor. Vestibulum enim nisl, lacinia at, condimentum id, tempor a, est. Sed faucibus quam a nisl. Quisque orci nunc, pharetra a, blandit eget, ullamcorper ac, nunc. Morbi consectetuer aliquet risus.

Donec id tortor. Suspendisse eget ipsum sit amet felis convallis auctor. Integer porttitor dictum velit. Pellentesque pharetra. Aenean sed leo quis neque pulvinar auctor. Sed porttitor felis scelerisque nulla vestibulum blandit. Pellentesque non lacus ac leo malesuada eleifend. Donec eu justo pulvinar libero pretium aliquam. Integer a tortor in eros molestie ultricies. Etiam condimentum, dolor laoreet lobortis convallis, neque lacus auctor libero, eget lacinia augue nisi nec nisl. Mauris ultricies nulla ac lectus. Donec eros. Cras in lectus. Proin non eros. Duis tortor purus, volutpat nec, laoreet ac, consectetuer laoreet, erat.



El siguiente código que podemos personalizar es el color del fondo de el bloque background-color: rgb(193, 8, 43) para poder conocer el color de un color determinado podemos consultar en páginas como Color blender

generador codigo coloresPara utilizar esta herramienta tan sólo tendréisque mover los cursores para conseguir el color deseado.
Si ampliais la imagen, podreís observar que ya nos da el código con las tres cifras por lo que tan sólo tendremos que copiar y pegar el que escojamos en el código que estamos trabajando.
tal que nos quedara así; (¡¡¡¡OJO!!! Deberéis insertar el código con las tres cifras, con las comas y espacios correspondientes)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eu enim ut lorem tincidunt condimentum. Curabitur ac odio non tellus eleifend convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras quis arcu. Praesent ante ante, porttitor et, interdum in, mollis eu, libero. Nullam magna neque, dapibus nec, dictum in, pulvinar sed, lectus. Aliquam erat volutpat. Suspendisse sit amet nunc. Maecenas vel purus. Aenean nec mauris non orci fringilla scelerisque. In at nulla nec ipsum gravida auctor. Vestibulum enim nisl, lacinia at, condimentum id, tempor a, est. Sed faucibus quam a nisl. Quisque orci nunc, pharetra a, blandit eget, ullamcorper ac, nunc. Morbi consectetuer aliquet risus.

Donec id tortor. Suspendisse eget ipsum sit amet felis convallis auctor. Integer porttitor dictum velit. Pellentesque pharetra. Aenean sed leo quis neque pulvinar auctor. Sed porttitor felis scelerisque nulla vestibulum blandit. Pellentesque non lacus ac leo malesuada eleifend. Donec eu justo pulvinar libero pretium aliquam. Integer a tortor in eros molestie ultricies. Etiam condimentum, dolor laoreet lobortis convallis, neque lacus auctor libero, eget lacinia augue nisi nec nisl. Mauris ultricies nulla ac lectus. Donec eros. Cras in lectus. Proin non eros. Duis tortor purus, volutpat nec, laoreet ac, consectetuer laoreet, erat.

Los siguiente códigos que corresponden a las propiedades de la fuente (letras que utilizamos para redactar el post) son más fácilmente configurables font-size: 11px; font-weight: bold; simplemente seleccionando el código en la redacción del post podremos darle el tamaño,el color y el estilo que queramos (normal, italic o bold)
Habreis observado que me he dejado una valor font-family: arial,helvetica; para poder personalizar la familia de fuente que querais actualizar y en el caso de querer armonizarla con el conjunto de vuestro blog y no sabéis cual estáis utilizando os podéis dirigir a edición html y localizar la fuente que se está utilizando Lo localizareis en ;

Vemos que estamos utilizando Verdana,Arial,Sans-Serif lo implementamos en font-family: Verdana, Arial, Sans-Serif; por font-family: Verdana,Arial,Sans-Serif; quedando tal que así en nuestro ejercicio;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eu enim ut lorem tincidunt condimentum. Curabitur ac odio non tellus eleifend convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras quis arcu. Praesent ante ante, porttitor et, interdum in, mollis eu, libero. Nullam magna neque, dapibus nec, dictum in, pulvinar sed, lectus. Aliquam erat volutpat. Suspendisse sit amet nunc. Maecenas vel purus. Aenean nec mauris non orci fringilla scelerisque. In at nulla nec ipsum gravida auctor. Vestibulum enim nisl, lacinia at, condimentum id, tempor a, est. Sed faucibus quam a nisl. Quisque orci nunc, pharetra a, blandit eget, ullamcorper ac, nunc. Morbi consectetuer aliquet risus.

Donec id tortor. Suspendisse eget ipsum sit amet felis convallis auctor. Integer porttitor dictum velit. Pellentesque pharetra. Aenean sed leo quis neque pulvinar auctor. Sed porttitor felis scelerisque nulla vestibulum blandit. Pellentesque non lacus ac leo malesuada eleifend. Donec eu justo pulvinar libero pretium aliquam. Integer a tortor in eros molestie ultricies. Etiam condimentum, dolor laoreet lobortis convallis, neque lacus auctor libero, eget lacinia augue nisi nec nisl. Mauris ultricies nulla ac lectus. Donec eros. Cras in lectus. Proin non eros. Duis tortor purus, volutpat nec, laoreet ac, consectetuer laoreet, erat.


Con este post aparte de conseguir aprender un nuevo efecto para vuestro espacio, espero que hayáis aprendido nuevas claves para poder personalizar vuestro espacio en el futuro.


0 comentarios

Etiquetas: ,

Efectos para textos en flash en tu blog

Todo para tu blog te trae esta nueva herramienta que te servirá para crear rotulos de una manera más profesional, el acabado de estos textos asemeja al diseño típico de la web 2.0; Como podreis observar a continuación podreis conseguir efectos muy originales que llamen la atención de vuestro visitante.
Personalizando las múltiple opciones que ofrece y aplicando el efecto que querais este espacio os genera el código para insertarlo en vuestro espacio, (recordar en la edición HTML)











Posee una interfaz con múltiples parametros para personalizar y opciones de movimiento en los textos muy variados como podreis observar en la imagen de abajo

¿que os parece la presentación del email? Original, ¿No?



Pues a experimentar y conseguir el efecto que querais en vuestro texto en Txeff

1 comentarios

Etiquetas:

Imprimir para tu blog

Si quieres ofrecer la opción de imprimir tus posts a tus visitantes tan sólo deberás copiar y pegar el siguiente código.....



Pero deberás tener cuidado donde ponerlo; la opción ideal es ponerlo o al principio o al final de cada post. Si no quieres estar copiando y pegando el código en cada post puedes utilizar la opción de ponerlo en.......

configuración formato
al final de esta página encontrarás la siguiente opción;


configurar plantilla blogComo verás en plantilla de entrada he pegado el código; le das a guardar configuración: Ahora ya tienes el código en cada post del blog; si te molesta en algun post lo eliminas.
En el siguiente post veremos como cambiar la palabra immprimir por una imagen ;O)




5 comentarios

Etiquetas: , , ,

Subrayar textos

La opción de subrayar textos no está en el editor de textos de blogger (como se puede observar en la imagen).
Para quien la eche de menos a la hora de componer sus textos puede solventar este pequeño inconveniente insertando las estiquetas y entre ambas etiquetas el texto que quieras que aparezca subrayado, este paso se ha de llevar a cabo en la edición de html a lacual se accede (como podeis ver en la imagen pinchando) en la parte superior izquierda.
Este código se puede usar en la composición de textos de cualquier plataforma de blogs si no la tiene.

Subrayar textos




0 comentarios

Etiquetas: ,

Suscribirse a: Entradas (Atom)

Ultimos Posts

Cargando...
Enlazáme

O puedes tambier copiar y pegar las siguientes opciones; elige la que mas te guste!! Trucos blog ( Esta última simplemente selecciona el enlace y copia y pega en tu espacio )