Personalizar el texto de las entradas blogger
18.1.16
¡Feliz 2016 a todos! ¡Hola! Ya estoy aquí de regreso ¡por fin! y vengo con un tutorial y dos cosas que me muero por contarles. Antes de iniciar con todo quiero darle la bienvenida a las nuevas personas que se han suscrito al blog ¡Muchas gracias! a pesar que no había actualizado el blog ya somos 456 diamantes por aquí, también agradecer a las personas que han estado comentado el blog y a las que se han apuntado a la Escuelita virutal.
Ahora sí pasamos al tutorial para personalizar las entradas de nuestros post:
1. Color del texto: blogger por defecto solo trae nueve colores con su gradiente y colores fuertes, para mi suelen ser super aburridos, solo uso el negro, gris y rojo claro. Para las personas que nos gustan las cosas personalizadas esto es algo frustrante porque no tienes opción a más colores "bonitos" que combinen con tu blog o tus fotos. Para resolver este problema vamos a trabajar con código en HTML ¡No se asusten! es super fácil de usar solo hay que cambiar el color. En HTML el color se representa por códigos hexadecimales, por ejemplo el negro es : #000000.
El código que vamos a utilizar es:
**Recuerden que este código lo vamos a pegara en la vista HTML de cada entrada de nuestro blog.<span style="color:#B0C4DE;"> Aqui va tu texto </span>Lo que vamos a cambiar va a ser este código: #B0C4DE por el código del color que escojamos.
En esta página pueden ver muchos colores: Ver todos los códigos de los colores
- Este es un ejemplo del cambio de color en el texto de las entradas de blogger.
- Este es un ejemplo del cambio de color en el texto de las entradas de blogger.
- Este es un ejemplo del cambio de color en el texto de las entradas de blogger
- Este es un ejemplo del cambio de color en el texto de las entradas de blogger
2. Tipo de letra: Al igual que los colores, blogger trae de forma predeterminada los tipos de letras para las entradas pero ahora vamos a ver cómo se pueden usar los tipos de letras de Google Fonts en nuestros post. Lo primero es instalarlas en nuestro blog.
Vamos a Google Fonts
- Buscamos el tipo de letra que más nos guste
- Clic en Add to collection
- Clic en use
El código que vamos a pegar en nuestra plantilla de HTML (es el código que tiene el No. 3 - Add this code to your website)
<link href='https://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>Importante: antes de pegar este código en nuestra plantilla se le debe de agregar una barra así / antes del > final
Entonces nos debe de quedar asi:
<link href='https://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'/>- Ahora vamos a nuestra plantilla en vista HTML y buscamos <head> justo debajo pegamos nuestro código. luego clic en guardar plantilla y listo, ya tenemos instalado el tipo de letra en nuestro blog.
Este es el código que vamos a utilizar para colocar en nuestro post:
<div style=" font-family: Georgia, 'Times New Roman', serif;">Aquí va tu texto</div>Lo pegamos y sustituimos font-family: Georgia, 'Times New Roman', serif por el ultimo código que tenemos en la página de Google Fonts. (es el código que tiene el No. 4 - Integrate the fonts into you css):
Nos quedará así:
<div style=" font-family: 'Homemade Apple', cursive;;">Tu texto va aquí.</div>- Este es un ejemplo de tipo de letra diferente para los post instalando google fonts en nuestro blog.
- Este es un ejemplo de tipo de letra diferente para los post instalando google fonts en nuestro blog.
- Este es un ejemplo de tipo de letra diferente para los post instalando google fonts en nuestro blog.
- Este es un ejemplo de tipo de letra diferente para los post instalando google fonts en nuestro blog.
3. Texto Subrayado superior:
<span style="text-decoration:overline;"> texto con subrayado </span>- Este es un ejemplo de texto subrayado superior
4. Texto subrayado superior e inferior:
<span style="text-decoration: underline overline;"> Ejemplo de texto con doble subrayado </span>- Este es un ejemplo de texto subrayado superior e inferior
Ahora les cuento dos cositas:
PRIMERO: Como ya la mayoría sabe yo diseño blogs y logos, esta es una actividad que me llena mucho porque conozco a personas con proyectos muy bonitos, me hago de nuevas amigas y sobre todo doy rienda suelta a mi creatividad. Hace más o menos un año que este blog me viene dando muchas alegrías y sorpresas, el tiempo pasa, mis ideas maduran y como todas las cosas tengo que crecer así que ahora ofrezco mis servicios de diseño gráfico y web en una página más bonita y más profesional, es una Landin page que disfrute aprendiendo a personalizar (cada vez aprendo muchas cosas) y esta vez no estoy sola me acompañan mi esposo y un amigo, los dos son ingenieros en software así que podré con todos los retos que me propongan mis clientes. Además ofrezco otros servicios aparte de diseño de blogs y diseño de logos pero en este post no me voy a extender ya que quiero explicar cada cosa con más detalle más adelante, también quiero invitarlos para que la vean y me cuenten que les parece. ¡Me hace ilusión que la vean ya que sus comentarios son muy importantes para mi !
Les hago una cordial invitación para visitar mi página: Mi portafolio
SEGUNDO: Ando contando los días para lanzar mi tienda online ya la mayoría sabe un poquito sobre ella y como la vez pasada les prometí contarles algo, así que ahí va: Mi nuevo proyecto va de imprimibles para fiestas no se imaginan lo extraordinario que ha sido esta aventura para mi, aunque debo mencionar que no todo es de color rosa cuando inicias un proyecto desde cero pero cuando vez ya todo de una forma real es gratificante, ya le perdí el miedo a Photoshop y ya le agarre maña a mi cámara, pensaba lanzar la tienda en estos días pero no va a ser posible :( a finales de este mes nos cambiamos de apartamento y esto requiere algo de mi tiempo para organizar todo el cambio y aparte de esto de seguro voy a pasar una o dos semanas sin Internet con eso que la empresa que nos provee internet es una lata no me quiero arriesgar a lanzar la tienda y a la semana estar sin internet, así que mejor me espero a estar bien instalada en el nuevo apartamento para mostrar al mundo mi amado proyecto que por cierto se llama : Una fiesta bonita - imprimibles bonitos para fiestas mágicas. Pueden suscribirse por medio de correo electrónico a la Newsletter para enterarse de cuando lanzo la tienda y para recibir un regalito de inauguración. (Ya hay 369 personas apuntadas ¡Muero de emoción!)
Feliz día.
26 comentarios
¡Qué lindas noticias! Qué alegría verte rodeada de nuevos problemas....Con tu creatividad seguro que todo, todo y todo será tan cuquiprecioso.
ResponderBorrarGracias por compartirlo con nosotras y te deseo todo el rukkiamor y el rukkicariño en este aventura.
¡Un muackiles!
Muchas gracias Sonia tu como siempre tan linda conmigo , eres una gran amiga :) gracias por pasarte por acá
BorrarMuy interesante, desde luego intentaré ponerlo en práctica! Gracias!! :)
ResponderBorrar¡Si! obtienen más vida los post combinando varias cosas :D
BorrarVaya nena, que bueno que estas de regreso. Y felicidades por el nuevo proyecto, ya quiero ver la nueva tienda y todo lo lindo que compartirás.
ResponderBorrar¡Muchas gracias Taina! Yo igual espero compartirlo pronto que ya me ando desesperando jeje.
Borrar¡Holaaaaaaaa mi querida Wendy!, no sabes la alegría que me da, el que estés de regreso.Así podré molestarte con mis inquietudes....je je je. Muchas bendiciones en tus proyectos, tus diseños y tu tienda on-line, se que triunfarás.
ResponderBorrarAbrazotes.
Si, ya ando por acá , ya sabes que en lo que pueda aquí estoy para ayudar ♥ Gracias por tus buenos deseos.
Borrarfelicidades wendy! excelente tu trabajo, cada día mas profesional! bendiciones!
ResponderBorrarMuchas gracias Luisa espero cada día poder ser más profesional y lograr un trabajo limpio :)
Borrar¡Qué me gusta volver a leerte Wendy!
ResponderBorrarSe aprende de manera tan fácil contigo, lo explicas todo tan sencillito que es imposible equivocarse. Muchas gracias por compartirlo.
Me alegra mucho que ya estés de nuevo en marcha, aunque queden unos flequitos por ahí, pero bueno, lo peor ya pasó, ¿a qué sí?
Me voy ahora mismito a visitar el portafolio que tengo un montón de curiosidad!!
Un besooo!
Hola, hola...
BorrarYa sabes que me gusta compartir y explicar lo más que puedo. Ya de regreso y como dices tu ya solo faltan flequitos jeje en un mes espero ya estar al 100 en todo. UN abrazo
¡Listo Wendy!, ensayé el color en las entradas con varios colores y me salió perfecto pero no he podido con las fuentes. Veo que están correctas. Para el título del post escogí la Architect Daughter pero al escribir me salen las mismas feas que traen por defecto. Hummmm.
ResponderBorrarMuchas gracias, estoy contenta con los colores
Abrazotes.
Hola Victoria qué me alegro que te saliera bien parte del tutorial, quizá instalaste mal la fuente en el blog ? o el código para cambiar de letra al titulo se ha a ido una mal tecla?
BorrarHola Wendy, tanto que te veo por facebook y no sabía de esta paginita tan chula. Me encanta, me acabo de apuntar a la escuelita virtual. jejeje
ResponderBorrarUn besote y te seguiré leyendo que tengo que hacerle muchas cositas al blog. Besines.
Hola Marisol ¡Bienvenida! pues ya sabes que por acá comparto cositas para blogger :) y ahora te envío un correo por lo de la escuelita.
BorrarQue blog tan bonito tienes! :) llegué hasta aquí de casualidad a través de otro blog y me ha encantado, haces unos posts muy interesantes y fáciles de seguir :) un saludo!
ResponderBorrar¡hola! Muchas gracias ♥♥ Bienvenida y me alegra mucho saber que te hacen fáciles los tutoriales, una abrazo
BorrarMe ha encantado tu página, por aquí me quedo :)
ResponderBorrar¡Bendiciones!
ResponderBorrarHola Wendy, tengo una duda con este post.. segun entiendo debo de cambiar la fuente por cada entrada de publique?? es decir cambiando el codigo desde la planilla no aplicará a futuro? hay alguna manera de hacer que sea permanente y evitar tener que modificar cada vez que voy a publicar una entrada? mil gracias y que sigan tus exitos
ResponderBorrar¡Hola, hola! Si hay una forma de poner un tipo de letra de forma permanente en el blog, debes de buscar este código en tu plantilla: body { unas lineas abajo hay una variable que se llama font ahi debes de cambiar al tipo de letra, recuerda instalar el tipo de letra en tu plantillas para que funcione.
Borrar¡Hola Wendy! Tengo que decirte que esta entrada me ha salvado la vida para mis futuras entradas, aunque me gustaría hacerte una pregunta: yo tengo un fuente, puesta en mi HTLM y todo, pero hay ciertos ordenadores (aleatorios) que no se ve la fuente, sino que se ve una predeterminada de Blogger, ¿puede ser por algo? :(
ResponderBorrar¡Hola Wendy! Tengo que decirte que esta entrada me ha salvado la vida para mis futuras entradas, aunque me gustaría hacerte una pregunta: yo tengo un fuente, puesta en mi HTLM y todo, pero hay ciertos ordenadores (aleatorios) que no se ve la fuente, sino que se ve una predeterminada de Blogger, ¿puede ser por algo? :(
ResponderBorrar¡Hola Wendy! Tengo que decirte que esta entrada me ha salvado la vida para mis futuras entradas, aunque me gustaría hacerte una pregunta: yo tengo un fuente, puesta en mi HTLM y todo, pero hay ciertos ordenadores (aleatorios) que no se ve la fuente, sino que se ve una predeterminada de Blogger, ¿puede ser por algo? :(
ResponderBorrar¡Genial! En mi caso lo he aplicado para personalizar el texto citado y queda estupendo. Mil gracias.
ResponderBorrarGracias por tus comentarios