02/12/2013

Tutorial: Paginação numerada ² (Utilizando Widget)

||

Oiiiiie meus coelhos maravilhosos! Hoje o dia foi agitado, por isso estou postando a essa hora da madrugada. Desculpa mesmo bunnie's. Hoje venho trazer um tutorial fresquinho para vocês, vou ensinar como colocar paginação numerada através de um Widget. Super, super simples mesmo!
1) Vá em Layout! Abra um novo gadget javascript e dentro cole:

<!-- Páginas numeradas para blog-->
<style type="text/css">
#blog-pager{ font-size:12px; /* TAMANHO DA LETRA */
padding:10px 0; clear:both;
}
.showpageArea{
font-family:verdana,arial,helvetica; /* TIPO DA LETRA */
color:#000; /* COR DA LETRA */
font-size:13px; 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 #f2dd9d; /* COR DA BORDA EM ESTADO NORMAL */
 -webkit-border-radius:3px; /* GRAU DE ARREDONDAMENTO DO FUNDO */
-moz-border-radius:3px; /* GRAU DE ARREDONDAMENTO DO FUNDO */ background:#f2dd9d; /* COR DE FUNDO DA NUMERAÇÃO EM ESTADO NORMAL*/
color: #000;
}
.showpageNum a:hover{
border:1px solid #ec92c6; /* COR DA BORDA DA NUMERAÇÃO EM ESTADO HOVER */ background:#ec92c6; /* COR DE FUNDO DA NUMERAÇÃO EM ESTADO HOVER */
color: #fff; /* COR DA FONTE DA NUMERAÇÃO EM ESTADO HOVER */
}
.showpageOf{
margin:0 4px 0 0 }
.showpagePoint{
color:#fff;  /* COR DA FONTE DA NUMERAÇÃO ATIVA */
text-shadow:0 1px 2px #333;
padding:3px 8px;
margin:2px;
font-weight:700;
-webkit-border-radius:3px;
 -moz-border-radius:3px; /* COR DE FUNDO DA NUMERAÇÃO */
border:1px solid #999;  /* COR DA BORDA DA NUMERAÇÃO ATIVA*/
background:#9460b8;  /* COR DE FUNDO DA NUMERAÇÃO ATIVA*/
text-decoration:none }
</style>
<script style='text/javascript'>     var numshowpage=5; /* NÚMERO DE PÁGINAS EXIBIDAS*/     var postperpage =5; /* NÚMERO DE POSTS POR PÁGINA*/     var upPageWord="Anterior";     var downPageWord="Seguinte";     var home_page="/";     var urlactivepage=location.href; </script> <script style='text/javascript' src='http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pagenavi.js'></script>
<!-- Final do código-->

Arrume como desejar e quando terminar arraste para o final do blog. Créditos Juju & Balinha.

Nenhum comentário:

Postar um comentário