El código fue creado por Abu Farhan
Yo le he hecho algunas mejoras al código, separando las clases para un mejor diseño personalizado, traducirlo al español, solucione unos errores que encontré y le agregué un botón para ir a la página principal, que solo se ve cuando navegamos por las etiquetas o label.
Consejo: Antes de hacer algún cambio, respaldar la plantilla.
Es muy sencillo aplicarlo, solo en 3 pasos.
Paso 1: (Insertar código JavaScript)
Ir a Diseño, Edición de HTML, Expandir plantillas de artilugios.
Buscar bien abajo: </body> (Ctrl+F o F3)
Y justo arriba poner el siguiente código:
<!-- Paginación - Vku - http://loseasi.blogspot.com -->
<script type='text/javascript'>
//<![CDATA[
var postperpage=10;
var numshowpage=4;
var total_pag='Página:';
var upPageWord ='« Anterior';
var downPageWord ='Siguiente »';
var img_paginicio='https://......... IMAGEN 16 x 16 ..../casita.png';
var widget_pag='Agrégalo a tu blog';
//]]>
</script>
<script src='https://dl.dropbox.com/u/19457418/paginacion/paginacion-vku-min.js' type='text/javascript'/>
<!-- Paginación fin -->
El archivo JavaScript lo pueden descargar y subirlo a su propio servidor.
Esta comprimido para mayor rapidez de carga.
Hacer los siguientes cambios:
var postperpage=10;: Números de entradas mostradas por página. ( IMPORTANTE!! tiene que ser la misma configurada en el blog, la que muestra la cantidad de entradas por página )
var numshowpage=4;: Números de cuadraditos que se mostrán por delante y detrás de la página activa.
var total_pag='Página:';: Texto.
var upPageWord ='« Anterior';: Texto del botón de las páginas anteriores.
var downPageWord ='Siguiente »';: Texto del botón de las páginas siguientes.
Acá cambiar el link de la imagen (casita). Tamaño recomendado 16 x 16.
var img_paginicio='https://......... IMAGEN 16 x 16 ..../casita.png';: Imagen (casita), para ir a la página principal, que solo se ve cuando navegamos por las etiquetas o label.
var widget_pag='Agrégalo a tu blog';: Texto de Widget.
Paso 2: (Cambiar código para Etiquetas o Label)
Buscar (Ctrl+F o F3) el siguiente código:
'data:label.url'
Cambiar por este otro:
'data:label.url + "?&max-results=10"'
El cambio se tiene que hacer en todas las coincidencias que encuentren.
En mi plantilla encontré 3 coincidencias, pueden ser mas.
Tener en cuenta el número de entradas, en el ejemplo yo puse 10.
Cambiar por el que configurarón antes. (Ver primera imagen)
Paso 3: (Insertar código CSS)
Vamos mas arriba de la plantilla y buscamos (Ctrl+F o F3): ]]></b:skin>
Justo arriba poner el siguiente código:
/* Números páginas */
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
color:#fff;
}
/* Página x de x*/
.showpageTotal {
margin:0 8px 0 0;
}
/* Casita en label */
.showpageInicio a:hover {
border:1px solid #888;
background: #ccc;
}
.showpageInicio a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
/* Página actual marcada*/
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}
/* Anterior - Siguiente */
.showpageAS a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpageAS a:hover {
border:1px solid #888;
background: #ccc;
color:#fff;
}
/* Widget creador */
.showpageWidget{
font-size: 10px;
float: right;
margin: 10px 10px 0 300px;
}
Adaptar los códigos para el diseño de su blog, cambiar los colores. (Tabla de colores)
a:hover es cuando pasamos el cursor por encima.
En la siguiente imagen van a ver a que pertenecen las distintas clases:
Ya hechos los cambios hacer vista previa, y si todo esta bien, Guardar.
El ejemplo lo pueden ver en mi blog.
Van a ver un link el cual dice: Agrégalo a tu blog
Si pueden dejarlo mejor, como reconocimiento a mi trabajo.
Gracias.
Pero, si deciden quitarlo, solo agregar: display:none; a la clase .showpageWidget
Si pueden dejarlo mejor, como reconocimiento a mi trabajo.
Gracias.
Pero, si deciden quitarlo, solo agregar: display:none; a la clase .showpageWidget
0 comments:
Post a Comment