Personalizar el enlace de "Más información"

Esta es una opción de blogger que traer instalada en cualquier tema, la cual nos sirve para mostrar una parte de la entrada y con solo dar clic a un pequeño texto que dice "Más Información" al final de la entrada nos dará acceso a toda por completo. Esto nos sirve para que podamos mostrar varios elementos en la pagina de inicio y estos carguen rápidamente.

El día de hoy les mostrare como activar, usar y personalizar  esta sección.

 Este se activa  en la edición de las entradas (post) simplemente insertamos un "Salto de Linea"

Esto nos insertara una barra gris con una linea negra punteada, la cual solo es visible desde la edición de entradas ya al ver nuestro blog lo veremos como el texto "Más información".

Ya esta listo y funcional ahora vamos a  Personalizar.

Lo primero que haremos es cambiar este texto, esto se hace entrando a Diseño, luego hacemos clic en editar en el widget Entrada de blog,  nos saldrá una venta con el nombre "Configurar las entradas de blog" en la segunda linea  veremos  "Texto del vínculo de la página de entrada:" aquí es donde quitaremos el texto que trae en la caja, los mas usados son  "Ver mas »" o "Seguir Leyendo »", pero podemos poner lo que a nosotros mas nos agrade.

Personalización en codigo:

Aplicando lo siguientes cambios tendremos el siguiente resultado:

Hola soy un boton

Ahora convertiremos este texto en un boton esto lo haremos de la siguiente manera.

Entramos a Plantilla | Editar HTML , damos clic a cualquier parte de el codigo de nuestra plantilla y luego apretamos las teclas Ctrl + F para sacar la caja de busqueda y ahi buscamos

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>

Aquí solamente agregaremos  class='button' despues de <a quedando así:

<a class='button' expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>

Si ya tenemos estilos para los botones estos se aplicaran para esta seccion tambien ya que la convertimos en un boton, si no los tenemos los aplicaremos de la siguiente forma:

Buscamos ]]></b:skin> y justo arriba de esta colocamos los estilos CSS del boton.

.button {
background: #00B0F0;  /* Color de fondo del boton*/
text-decoration: none;
font-size: 14px; /* Tamaño de texto*/
padding: 2px 10px;
display: inline-block;
line-height: 31px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.button:hover { /* Estilos al pasar el cursor sobre el boton*/
background: #000; /* Color de fondo del boton */
color: #fff; /* Color de letra*/
text-decoration: none;
font-size: 14px; /* Tamaño de letra*/
padding: 2px 10px;
display: inline-block;
line-height: 31px;
}

En Naranja puse identificadores de para que sirven cada uno de los códigos  para que podamos modificar como gustemos.

Para finalizar damos clic a guardar cambios y listo!!!