Cambiar el tipo de letra del pie de las fotos en Blogger

Hoy quiero contarte cómo cambiar el tipo de letra de la leyenda de las fotos de Blogger. La que aparece por defecto es la que puedes ver en la imagen de arriba, como ves, no resalta nada y es un tanto fea. Por lo que si uno de tus objetivos es tener un blog bonito, cuidando cada detalle y encima utilizas muchas fotos… ¡es una buena idea personalizar este texto!

Y además… ¡no se tarda nada! Solo tienes que hacer un pequeñísimo cambio en tu plantilla HTML y olvidarte para siempre del tema. ¿Empezamos?

1.- Primero necesitamos tener una entrada publicada con una foto y su respectiva leyenda, para poder aplicar cambios y ver cómo va quedando usando la Vista Previa.

Para añadir una leyenda a tu foto, solo tienes que seleccionarla y pinchar en Añadir leyenda. Te aparecerá un texto chiquitín que puedes cambiar por lo que tú quieras poner.

Ahora publica tu entrada para ver los resultados y empezar a darle formato al tipo de texto.

2.- Una vez tengas tu entrada publicada, entra en tu plantilla HTML.

Plantilla >> Editar HTML

3.- Abre el buscador interno de Blogger (pulsando Control + F a la vez) y busca:

/* Posts
———————————————– */

Todo lo que encontrarás debajo de estas líneas, hasta llegar a:

/* Comments
———————————————– */

Son los diferentes estilos que dan formato a tus entradas del blog. Así que será aquí donde añadiremos nuestro nuevo código para mantener nuestra plantilla organizada y limpia.

4.- Ahora, al final de todo el código que encontrarás dentro Posts, justo antes de llegar a Comments, pegaremos este fragmento de código:

.tr-caption { 
 }

Quedará así:

#comments .avatar-image-container img {
  border: 1px solid $(image.border.color);
}

.tr-caption { 
 }

/* Comments
———————————————– */

Instalar fuente desde Google Fonts

5.- Y empezamos a darle forma. Primero, instalaremos una nueva fuente desde Google Fonts o utilizaremos una de las predeterminadas de Blogger.

Es importante que tengas en cuenta las tipografías que ya estás usando en tu blog para no cargarte el diseño, no es recomendable usar más de dos o tres fuentes para mantener el equilibrio.

6.- Entramos en Google Fonts y elegimos el tipo de letra:

Yo voy a trabajar con la Coming Soon para continuar con el tutorial:

Para seleccionarla, tienes que pinchar en Add Colection, el botón azul de la derecha. Si cambias de opinión, para borrarla, pincha en Remove from Collection y sigue buscando.

7.- Una vez tengas la fuente definitiva, pincha en Use, en la ventana gris de abajo, para instalarla en tu blog.

8.- En la siguiente ventana, tenemos nuestro código de instalación, en el punto 3.

9.- Buscamos en nuestra plantilla de blogger:

</head>

Y justo encima, pegamos el código de nuestra fuente. Así:

<link href=’http://fonts.googleapis.com/css?family=Coming+Soon’ rel=’stylesheet’ type=’text/css’>

  </head>

10.- Para que funcione correctamente, hay que añadir una barra entre ‘ y > en el código de la fuente, así:

<link href=’http://fonts.googleapis.com/css?family=Coming+Soon’ rel=’stylesheet’ type=’text/css’/>

¡Y ya tenemos nuestra nueva fuente instalada en Blogger!

Tipos de letra, colores y otros detalles

11.- Vamos a añadirla a nuestro nuevo código para las leyendas. Para ello, localizamos de nuevo:

.tr-caption {
 }

Y añadimos el formato de fuente que hemos elegido, el que nos vuelca Google Fonts en el punto 4.

.tr-caption {
font-family: ‘Coming Soon’, cursive;
 }

Si pinchas en Vista Previa, ya debe apreciarse el cambio del tipo de letra.

Vamos a cambiar el color.

12.- Añadimos un nuevo fragmento dentro de nuestro nuevo código:

.tr-caption {
font-family: ‘Coming Soon’, cursive;
color: #F7819F;
 }

Puedes escoger el color que quieras de esta web: Colores HTML

13.- Además, para que resalte más, podemos ponerla en mayúsculas:

.tr-caption {
font-family: ‘Coming Soon’, cursive;
color: #F7819F;
text-tansform: uppercase;
}

14.- Subrayar el texto:

.tr-caption {
font-family: ‘Coming Soon’, cursive;
color: #F7819F;
text-transform: uppercase;
text-decoration: underline;
}

15.- E, incluso, añadir un color de fondo:

.tr-caption {
font-family: ‘Coming Soon’, cursive;
color: #F7819F;
text-transform: uppercase;
text-decoration: underline;
background: #eeeeee;
}

¡Y ya tenemos nuestro pie de foto personalizado! Sencillo ¿verdad?

Usar negritas en la Leyenda



16.- * IMPORTANTE: Puedes poner tu tipo de letra en negrita siempre y cuando la letra instalada lo admita, por ejemplo:

Tipo de letra Inconsolata: admite negrita (bold).

Tipo de letra Coming Soon: no admite negrita, solo tiene un estilo (1 style) que es la que hemos usado para este tutorial.

Si usamos un tipo de letra que admite negrita, para usarla en nuestra leyenda, solo tenemos que añadir otra línea de código:

Por ejemplo, con el tipo de letra Inconsolata:

  • Nos aseguramos de marcar la opción BOLD antes de instalar nuestra nueva fuente:
  • Copiamos el código del punto 3 y lo pegamos justo encima de </head> en nuestra plantilla HTML, añadiendo la barra al final para que funcione correctamente. Así:

    <b:include data=’blog’ name=’google-analytics’/>
    <link href=’http://fonts.googleapis.com/css?family=Inconsolata:400,700′ rel=’stylesheet’ type=’text/css’/>
   
  </head>
  • Volvemos a nuestro nuevo código dentro de Post y cambiamos el tipo de letra:

.tr-caption { 
font-family: ‘Inconsolata‘;
font-weight: 700;
color: #F7819F;
text-transform: uppercase;
text-decoration: underline;
background: #eeeeee;
}
font-weight: aquí añadimos si la queremos normal o negrita, teniendo en cuenta la numeración que nos ha ofrecido Google Fonts para cada una de ellas.

Los bordes

17.- Y, como último detalle, puedes redondear las bordes del fondo de tu leyenda añadiendo un sencillo código:
.tr-caption { 
font-family: ‘Inconsolata’;
font-weight: 700;
color: #F7819F;
text-transform: uppercase;
text-decoration: underline;
background: #eeeeee;
border-radius: 100px;
}

¿Qué te parece? ¡Menudo cambio! Cuando tengas tu pie de foto tal y como quieres, solo tienes que guardar los cambios y olvidarte del tema, ya que aparecerá automáticamente en cada leyenda que añadas a tus fotografías.

Si te animas a usarlo ¡ya me contarás qué tal! 
Y no olvides dejarme el enlace a tu blog en comentarios para verlo.


Y si te ha gustado la entrada ¡ayúdame a seguir adelante compartiéndola en tus redes sociales!

¡HOLA EMPRENDEDORA!

¿Cansada de pasar tantas horas delante del ordenador sin ver resultados?

DESCARGA GRATIS MI GUÍA DE MARKETING EMOCIONAL + PLANTILLA PROFESIONAL PARA BLOGGER

Aprende a conectar con tu público ideal
¡Y DISFRUTA DE TU TIEMPO LIBRE!

RESUMEN SEMANAL

Cada Viernes Novedades en tu Correo: Últimas entradas, novedades y noticias sobre blogging, marketing y emprendimiento.
Tu Correo

ME APUNTO

Powered by ConvertKit

/* Layout */
.ck_form.ck_minimal {
/* divider image */
background: #f9f9f9;
font-family: ‘Helvetica Neue’, Helvetica, Arial, Verdana, sans-serif;
line-height: 1.5em;
overflow: hidden;
color: #666;
font-size: 16px;
border: solid 1px #d1d1d1;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
clear: both;
margin: 20px 0px;
text-align: center;
}

.ck_form.ck_minimal h3.ck_form_title {
text-align: center;
margin: 0px 0px 10px;
font-size: 28px;
}

.ck_form.ck_minimal h4 {
text-align: center;
font-family: ‘Open Sans’, Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-size: 18px;
font-weight: normal;
padding-top: 0px;
margin-top: 0px;
}

.ck_form.ck_minimal p {
padding: 0px;
}

.ck_form, .ck_form * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.ck_form.ck_minimal .ck_form_fields {
width: 100%;
float: left;
padding: 5%;
}
/* Form fields */

.ck_errorArea {
display: none; /* temporary */
}

#ck_success_msg {
padding: 10px 10px 0px;
border: solid 1px #ddd;
background: #eee;
}

.ck_form.ck_minimal input[type=”text”], .ck_form.ck_minimal input[type=”email”] {
font-size: 18px;
padding: 10px 8px;
width: 68%;
border: 1px solid #d6d6d6; /* stroke */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; /* border radius */
background-color: #fff; /* layer fill content */
margin-bottom: 5px;
height: auto;
float: left;
margin: 0px;
margin-right: 2%;
height: 42px;
}

.ck_form input[type=”text”]:focus, .ck_form input[type=”email”]:focus {
outline: none;
border-color: #aaa;
}

.ck_form.ck_minimal .ck_subscribe_button {
width: 100%;
color: #fff;
margin: 0px;
padding: 11px 0px;
font-size: 18px;
background: #33CCCC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; /* border radius */
cursor: pointer;
border: none;
text-shadow: none;
width: 30%;
float: left;
height: 42px;
}

.ck_form.ck_minimal .ck_guarantee {
color: #626262;
font-size: 12px;
text-align: center;
padding: 15px 0px 0px;
display: block;
clear: both;
}
.ck_form .ck_powered_by {
display: block;
color: #aaa;
font-size: 12px;
}

.ck_form .ck_powered_by:hover {
display: block;
color: #444;
}

.ck_converted_content {
display: none;
padding: 5%;
background: #fff;
}

.ck_form.ck_minimal.width400 .ck_subscribe_button, .ck_form.ck_minimal.width400 input[type=”email”] {
width: 100%;
float: none;
margin-top: 5px;
}

.ck_slide_up, .ck_modal, .ck_slide_up .ck_minimal, .ck_modal .ck_minimal {
min-width: 400px;
}

.page .ck_form.ck_minimal {
margin: 50px auto;
max-width: 600px;
}

Te encantará:

The following two tabs change content below.

Celia

Diseñadora, Mentora y Formadora Online at El Perro de Papel
Mamá y emprendedora a tiempo completo. Ayudo a otras mujeres y madres soñadoras a emprender un negocio online de éxito para conciliar su vida personal y profesional.Si este artículo te ha gustado, sigue aprendiendo conmigo en mi reto gratis de 14 días para conectar con tu mejor versión CLICK AQUÍ.Y AQUÍ tienes mi curso premium para mamás emprendedoras que quieren hacer realidad su idea genial, mano a mano, conmigo.¡Que tengas un feliz día, soñadora!

Pin It on Pinterest

Share This

¿CANSADA DE TRABAJAR TANTAS HORAS SIN VER LOS RESULTADOS ESPERADOS?

Te regalo mi CURSO GRATIS DE 5 DÍAS para mamás emprendedoras que quieren conciliar su vida personal y profesional sin volverse locas ni renunciar a sus sueños.

¡Bienvenida! Ahora revisa tu correo ;)