Seis nuevos estilos de paginación para Blogger

Estilos disponibles:

• Estilo 1: Demo - Código CSS
• Estilo 2: Demo - Código CSS
• Estilo 3: Demo - Código CSS
• Estilo 4: Demo - Código CSS
• Estilo 5: Demo - Código CSS
• Estilo 6: Demo - Código CSS

Para implantarlo por primera vez debemos incluir en un nuevo elemento html/javascript el script y el CSS (estilo).

CSS: (estilo 1)

<style type="text/css">

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #000; text-shadow:0 1px 2px #fff; font-weight: 700; } .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 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -50px repeat-x; } .showpageNum a:hover { border:1px solid #888; background: #ccc url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -25px repeat-x; } .showpageOf{ margin:0 8px 0 0; } .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 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 0 repeat-x; text-decoration: none; }

</style>

Script:

<script style="text/javascript">var pageCount=15;var displayPageNum=15;var upPageWord="Previous";var downPageWord="Next";</script><script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js"></script>

Colocaremos ambos códigos dentro del mismo elemento html/javascript (uno detrás del otro).

Para finalizar, puedes cambiar el CSS por cualquiera de los estilos disponibles, o personalizarlo a tu gusto.

Los que ya tengan con anterioridad implantado en su blog la paginación, sólo tienen que preocuparse de modificar en widget la parte del CSS.

Fuente | Six Styles Page Navigation