Existen numerosos tutoriales en la WEB que explican como hacer funcionar el muy útil Widget al final de la pagina del Blog que enumera la cantidad de páginas existentes con entradas o post.
No obstante, hay una cierta limitación, si la fuente del script está en un enlace externo se ve expuesto a que deje de funcionar debido a que el link esté roto o que el proveedor del mismo haya cancelado, quitado etc, etc el lugar donde estaba alojado el archivo JavaScript. Ejemplo:
<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
¿Entonces qué hacer? Lo ideal es que una vez se haya decidido el tema visual a usar, se deje adjunto el código CSS y JavaScript en el área del generador de la página para que sea utilizado como recurso interno las veces que sea necesario. Ejemplo para el JavaScript:
<script type='text/javascript'> /*<![CDATA[*/ //Aquí va el código JavaScript /*]]>*/ </script>
Antes que nada es recomendable hacer un respaldo de la plantilla actual con el fin de poder dar reverso en caso de que los tipos de botones no sean de su preferencia o simplemente dejar todo como estaba. (Hacer respaldo/restablecer plantilla HTML de Blogger)
Paso 1 Configurar la cantidad de entradas por página en las opciones de blogger
Ir al panel "Configuración->Entradas y comentarios->Entradas" para el ejemplo se hará la selección a 10.
No se debe olvidar guardar los cambios.
Paso 2 Preparar el editor del blog en el formato HTML
Ir al panel "Plantilla->Editar HTML"
En el blog http://helplogger.blogspot.com están listados 7 estilos muy interesantes de temas visuales, el cual, muestra el código CSS según la elección.
Para el ejemplo he seleccionado el estilo número 4 (he tabulado el bloque script original para un mejor entendimiento).
<!-- Tema visual --> #blog-pager{
clear:both;margin:30px
auto;text-align:center;
padding: 7px;
}
.blog-pager {
background: none;
}
.displaypageNum a,.showpage a,.pagecurrent{
font-size: 14px;
padding: 5px 12px;
margin-right:5px;
color: #666;
background-color:#eee;
}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{
background:#359BED;
text-decoration:none;color: #fff;
}
#blog-pager .pagecurrent{
font-weight:bold;color: #fff;
background:#359BED;
}
.showpageOf{
display:none!important
}
#blog-pager .pages{
border:none;
} <!-- Fin de tema visual-->
Opcional Se pude agregar la siguiente línea si se quiere ocultar el botón de First y Last
.firstpage, .lastpage {display: none;}
Paso 4 Asignar el tema visual
Haga clic en cualquier parte del área de código HTML dentro del editor del Blog, luego, pulse las teclas control+f para que abra el buscador por defecto de Blog (no el del navegador).
Ubicar con precisión la etiqueta siguiente (al copiar incluir los símbolos):
]]></b:skin>
Inserta el código CSS (Paso 3) en una línea sobre la etiqueta skin.
Paso 5 Asignar el código para controlar el comportamiento de los botones y numeración.
Ubicar con precisión la etiqueta siguiente (al copiar incluir los símbolos):
</body>
Inserta el un tanto extenso código JavaScript del archivo de texto plano "link para obtenerlo" (copiar todo el texto) en una línea sobre la etiqueta body.
Al analizar las 11 primeras líneas del código JavaScript insertado se muestran las variables para personalizar el idioma como la opción perPage que es donde se personaliza la cantidad de entradas por páginas combinado con la opción del (Paso 1), y así, sincronice correctamente.
Para no complicar el ejemplo lo dejé asignado a 10.
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> /*<![CDATA[*/ var perPage=10; var numPages=10; var firstText ='Recientes'; var lastText ='Últimas'; var prevText ='« Anterior'; var nextText ='Siguiente »'; var urlactivepage=location.href; var home_page="/"; /*]]>*/ </script>
....
Paso 6 Ajustar ejecución de las etiquetas labels de la URL asociada al cambio de página con los nuevos parámetros.
Una vez realizados los pasos del 1 al 5 lo que resta es ajustar los labels que reaccionan al evento clic con el fin que que el cambio de página en el blog se produzca de forma adecuada.
Ubicar con precisión los caracteres siguientes sin más ni menos en el cuerpo HTML de la plantilla con la opción control+f del buscador por defecto de Blog (no el del navegador):
expr:href='data:label.url'
Las veces que aparezca la referencia remplazarlo por:
expr:href='data:label.url + "?&max-results=10"'
La sección max-results=10 hace referencia una vez más a la configuración de número de entradas por página del (Paso 1).
Para validar el trabajo se hace clic en el botón "Vista previa de la plantilla" se espera unos breves segundos para mostrar el resultado.
Una vez conforme con los resultados es importante Guardar la plantilla para que los cambios sean aplicados en el Blog y probar al respecto. Posteriormente no está de mas un nuevo respaldo para tener una copia de todo lo realizado.
Para validar el trabajo se hace clic en el botón "Vista previa de la plantilla" se espera unos breves segundos para mostrar el resultado.
Una vez conforme con los resultados es importante Guardar la plantilla para que los cambios sean aplicados en el Blog y probar al respecto. Posteriormente no está de mas un nuevo respaldo para tener una copia de todo lo realizado.
0 comentarios: