Poner Paginación en Blogger Fácilmente
Hora veremos cómo hacerlo, así que si tu blog aun no tiene una barra de paginación y quieres agregar una, en este post veremos cómo podemos agregar dicha barra de una manera muy fácil y rápida.
El meto que usaremos es sencillo ya que sólo tenemos que agregar el código de estilo CSS en la plantilla, y añadir un gadget HTML/Javascript. Para ello tienes que seguir los 2 pasos siguientes:
1. Ve a Diseño > Edición de HTML > busca ]]></b:skin> justo antes pega el siguiente código:
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
Ahora ve a Diseño > Añadir gadget > elije HTML/Javascript y pega el siguiente código:
<style type='text/css'>.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#d10000;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord="Anterior";var downPageWord="Siguiente";</script><script style='text/javascript' src='http://dl.dropbox.com/u/3373498/PazosBlogger-blogger-page-nav-v2.js.txt'></script>
Una vez guardado el código muévelo debajo de las entradas.
Configuración:
var pageCount=5; (el código está predeterminado para mostrar 5 entradas por página, cambialo por el número que tu quieras, está en rojo en el código).
var displayPageNum = 5; (número de páginas en la lista, está en azúl).
También podemos cambiarle el color a la barra de navegación, combinándola con la plantilla que usemos. Les dejo un generador de códigos de colores.
Fecha: 09/11/2018
Fuente: masaudaz.
Publicado por:
0 comentarios:
Publicar un comentario