Paginacion sencilla para Blogger


Para la paginación en el blog de blogger este estilo.


Ver en Blog de prueba
Ir a Diseño ►Añadir un gadget ► Html/Javascript y pegar el siguiente código:

<script src='https://sites.google.com/site/scriptccb/home/Paginacion%20para%20Blogger.js'/>
<script>
    var opcionesPaginacion = {/*opciones*/}
</script>
<script src='/feeds/posts/summary?alt=json-in-script&amp;orderby=published&amp;max-results=9999&amp;callback=paginacion'/></script>
<style>
.grupo-botones {
    display: inline-block;
    margin-bottom: 10px;
}
.grupo-botones .boton {
    float: left;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border-left: 0;
}
.grupo-botones .boton:first-child {
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
    border-left: 1px solid #CCC;
}
.grupo-botones .boton:last-child {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}
.boton {
    display: inline-block;
    cursor: pointer;
    color: #515151;
    text-decoration: none;
    font-weight: 600;
    padding: 3px 10px;
    border: 1px solid #CCC;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #d2d2d2;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(#d9d9d9,0),color-stop(#c6c6c6,1));
    background: -webkit-linear-gradient(top, #d9d9d9 0%,#c6c6c6 100%);
    background: -moz-linear-gradient(top, #d9d9d9 0%,#c6c6c6 100%);
    background: -ms-linear-gradient(top, #d9d9d9 0%,#c6c6c6 100%);
    background: -o-linear-gradient(top, #d9d9d9 0%,#c6c6c6 100%);
    background: linear-gradient(top, #d9d9d9 0%,#c6c6c6 100%);
    -webkit-box-shadow: 0 1px rgba(255,255,255,.2) inset;
    -moz-box-shadow: 0 1px rgba(255,255,255,.2) inset;
    box-shadow: 0 1px rgba(255,255,255,.2) inset;
}
.boton:hover{
    background: #E3E3E3;
}
.boton.activo, .boton:active {
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}
.boton.activo {
    background: whiteSmoke;
}
</style>



Si quieren ponerlo dentro de la plantilla pueden pegarlo encima de </body>.


Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top