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!
Códigos
<!-- 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-->
<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