Es muy sencillo, ya lo verás, lo vamos a hacer usando un poco de CSS, aunque si necesitarás ir a la edición de HTML de la plantilla, pero no te asustes, que lo que harás ahí es mínimo y muy fácil, además yo te voy a decir cómo hacerlo ;)
Los botones que les tengo preparados son en 3D, tendrán efecto "push" es decir, parece que los presionas, y eso lo logramos con el cambio de imagen en en enlace activo (cuando haces click sobre éste) y además crearemos efecto hover (cuando pones el puntero del ratón sobre en botón).
Usaremos sólo una imagen que tendrá los tres botones, en lugar de las 3 que necesitaríamos, claro que si estos botones no se adaptan al diseño de tu plantilla, puedes usar otros.
Puedes verlos en acción en la DEMO, y si esto te cierra el ojo, y quieres probarlo en tu blog, veamos cómo hacerlo:
Cómo poner los botones paso a paso
Paso 1: Elige la imagen que quieras con los botones, bájala a tu computadora, y luego la subes a Blogger para obtener la URL:
Opción 1 | Opción 2 | Opción 3 |
 |  |  |
Paso 2: Ve a Diseño ► Diseñador de plantillas ► Avanzado ► Añadir CSS, o si usas la nueva interfaz, ve a Plantilla ► Personalizar ►Avanzado ► Añadir CSS, y en el campo pega este código CSS:
a.home-link, a.blog-pager-newer-link, a.blog-pager-older-link {
display: inline-block;
width: 113px;
height: 35px;
overflow: hidden;
padding: 0;
margin: 0;
font-size: 17px;
color: #494949 !important; /*el color del texto*/
line-height: 190%;
text-align: center;
text-decoration: none;
background: url(URL_de_la Imagen) no-repeat 0 0;
}
a.home-link:hover, a.blog-pager-newer-link:hover, a.blog-pager-older-link:hover {
background-position: 0 -36px;
}
a.home-link:active, a.blog-pager-newer-link:active, a.blog-pager-older-link:active {
background-position: 0 -71px;
}
Nota: Agrega la URL de la imagen que vas a usar, y recuerda dar enter después de una llave de cierre "}" por ejemplo, para que el código sea interpretado. También puedes cambiar el color del texto marcado de rojo , o agregar sombras usando: text-shadow: 1px 1px 0px #00000; (opcional).
Paso 3: Ve a la edición de HTML de la Plantilla, marcas la casilla de expandir plantilla de artilugios, y con la ayuda de ctrl F, busca esto ( pon en el campo la primera linea de código que puse de azul)...
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
...y cámbialo por esto:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Siguiente<span style='padding: 0 0 0 3px;'>»</span></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><span style='padding: 0 3px 0 0;'>«</span>Anterior</a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>Inicio</a>
Si te fijas en ese código, solo estamos cambiando:
<data:newerPageTitle/> por: Siguiente<span style='padding: 0 0 0 3px;'>»</span>
<data:olderPageTitle/> por: <span style='padding: 0 3px 0 0;'>«</span>Anterior
...y <data:homeMsg/> por: Inicio
De ese modo el texto de los enlaces será: Siguiente en lugar de: Entradas más Recientes, Anterior en lugar de: Entradas Antiguas e Inicio en lugar de: Página Principal. Estamos agregando padding, para separar los caracteres del texto "« y »",que agregué en siguiente y anterior respectivamente, si quieres, puedes quitarlos.
Si te resulta más sencillo, puedes sustituir las lineas anteriores para cada enlace en el código.
Paso 4: Checa en vista previa y si todo luce bien guarda los cambios.
Cómo cambiar el orden de los botones (opcional)
Hasta ahí, ya verás los botones, y el enlace de Anterior se muestra a la derecha y el de Siguiente a la izquierda, si quisieras cambiar esto, para que se vea como lo tengo en el DEMO y en la imagen arriba, necesitas buscar esta parte que ya traen algunas plantillas, (aunque no todas sobre todo en las nuevas)...
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
y cámbiarlo por esto:
#blog-pager-newer-link {
float: right;
}
#blog-pager-older-link {
float: left;
}
#blog-pager {
text-align: center;
}
Tip: Si no lo tienes, ya que algunas plantillas nuevas no lo traen, te recomiendo que lo pegues desde el Diseñador de plantillas en añadir CSS, para que no pierdas la opción de editar desde ahí todo el código CSS que has agregado.
De ese modo, el enlace de siguiente se verá a la derecha y el de anterior a la izquierda, personalmente me gusta mas así, pero, tu decides si lo haces o no.
Cómo juntar los botones (opcional)
Si quieres juntar los botones, entonces tenemos que darles margen. Para eso, tomarás en cuenta el botón que tienes a tu derecha para darle margen a la derecha, y mandarlos hacia la izquierda, o si lo quieres hacia la derecha tomarás en cuenta el botón que tienes a la izquierda, o si los quieres todos al centro, tendrás que darle el mismo margen a los botones de Anterior y Siguiente.
Ejemplos:
Caso 1. Supongamos que tienes el enlace de Anterior a la derecha (como aparece por defecto), y quieres mandar todos los botones hacia la izquierda, entonces en: #blog-pager-older-link Agregas:
margin: 0 180px 0 0;
Ajusta el margen cambiando el valor de 180.
Caso 2. Supongamos que tienes el de Siguiente a la derecha (que los invertiste como menciono arriba), y quieres que los botones estén hacia la izquierda, entonces en: #blog-pager-newer-link Agregas:
margin: 0 180px 0 0;
Edita el valor de 180 según tus necesidades.
Caso 3. Si los quieres juntar pero que todos los botones estén al centro, y pensando que el botón de Siguiente está a la izquierda (como aparece por defecto) entonces en: #blog-pager-newer-link Agregas:
margin: 0 0 0 90px; /*margen a la izquierda*/
...y en: #blog-pager-older-link Agregas:
margin: 0 90px 0 0; /*margen a la derecha*/
Edita los valores marcados de rojo, según tu necesidad. Recuerda que el margen se lee: arriba, derecha, abajo, izquierda, y listo, ya tienes botones en los enlaces de navegación con efecto de push!!.
Crédito por los botones: Weboxeur
No hay comentarios:
Publicar un comentario