"Leer más" personalizado con imagen

Cuando escribimos en el blog, algunas veces decidimos usar el cortador de entradas (el icono del folio partido del editor, junto a los de la imagen y video) porque las entradas suelen ser larguísimas o para mantener el interés en el lector y hacerle acceder al resto del post para que siga leyendo. Cuando usamos el cortador aparece el "Leer más", que no es más que el enlace del post para mismamente seguir leyendo más allá de la línea de corte, con lo cual la entrada se expande con todo el texto. 

  


Con este truco personalizaremos ese enlace usando una imagen tipo botón.

  • Ubicación: plantilla.
  • Proceso:

Buscamos este código <data:post.jumpText/> y lo sustutuimos por este otro:

<img src="URL de la imagen"/>

Ponemos la url de la imagen que queramos y listo.

Menú de páginas en la navbar

Con este sencillo truco podremos poner las secciones del blog en una barra que se mantendrá en la parte superior (en la navbar de Blogger) aún cuando bajemos el scroll. Se trata de una barra normal y corriente, sin buscador ni iconos sociales, sólo con las secciones.

  • Ubicación: plantilla.
  • Proceso:
1º - Buscamos esta línea <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> y justo debajo pegamos este código:

<div id='barra-superior'>
<div id='menu'>
<ul>
<li><a href='URL 1'>Nombre 1</a></li>
<li><a href='URL 2'>Nombre 2</a></li>
<li><a href='URL 3'>Nombre 3</a></li>
<li><a href='URL 4'>Nombre 4</a></li>
</ul>
</div>
</div>

Reemplazamos URL por la dirección de las páginas, y Nombre 1, 2... por los nombres de las secciones. Si queremos añadir más secciones copiaremos la línea <li><a href='URL X'>Nombre X</a></li> justo debajo de la última. Nos aseguraremos que el código completo acaba con estas tres líneas:
</ul>
</div>
</div>
Una vez hecho esto, guardamos plantilla.
2º - Debemos copiar el siguiente código CSS en Plantilla → Personalizar → Avanzado → Añadir CSS y editar a gusto personal los parámetros que se quieran:

 #barra-superior {
background: #B54B01;  /*Color de la barra*/
width:100%;
height:40px; /*Anchura de la barra*/
border-bottom: 5px solid #f0a28a; /*Línea de debajo del menú, si no queréis borrad esta línea*/
margin:2;
position:fixed; /*Para que la barra se quede fija*/
z-index:101; /*Para que la barra se quede fija*/
}
#menu{
margin:0 auto;
width:920px; /*Ancho del menú dentro de la barra, con este valor sobra*/
height:30px;
}
#menu ul{
float:left; /*Donde queréis que quede alineado el menú, right (a la derecha)*/
background:none;
margin:0px;
padding:0;
list-style-type:none;
height:25px;
}
#menu ul li{
display:block; 
float:left; 
height:30px;
}
#menu ul li a{ 
display:block;  
float:left;  
color:#ffffff; /* Color del texto */
font: 12px 'Arial'; /* Tamaño del texto y tipografía que queráis usar*/
text-decoration:none;
padding:12px 20px 0 20px;
}
#menu ul li a:hover{  
background:#000000; /* Color del fondo al pasar el ratón por encima de cada pestaña, yo no quiero que sea diferente, por eso lo tengo del mismo color que la barra*/
color:#ffd0c2; /* Color del texto al pasar el ratón por encima*/
height:20px;
}

¡Y listo! El resultado sería este (clic en la imagen para agrandarla). Si bajamos en el blog, la barra seguirá viéndose arriba de la página:

Captura tomada de Butterfly Kisses

Suscribirse a: Entradas (Atom)