Como adicionar paginas numeradas no blogger

ô confronto 08:16

]

Hoje amigos vamos compartilhar alguns códigos para paginas numeradas em vários estilos diferentes para você adicionar em seu blog paginas numeradas, se você anda personalizando seu blog alterando algumas coisas e esta atrás de paginação, deixar seu blog mais bonito e profissional agradável a instalação desse código é bem simples tendo apenas que adicionar o código dentro de um gadget JavaScript abaixo da sua área de postagens como no exemplo baixo.

Modelo 1

Copie o código abaixo e cole dentro de um gadget JavaScript

<style>#blog-pager{clear:both;margin:20px 0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float: left;}#blog-pager-older-link{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em 0;}.profile-textblock{line-height:1.6em;margin:0.5em 0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px 0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{background:#188e36 repeat-x;border:1px solid #fff;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpageOf,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background:#272727;border:1px solid #000000;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}</style>

<script type='text/javascript'>var postperpage=3;var numshowpage=3;var upPageWord="Prev.";var downPageWord="Next";var urlactivepage=location.href;var home_page="/"</script><script src='https://dl.dropboxusercontent.com/u/261625350/hb-page-navi.js' type='text/javascript'></script>

Procure por esse trechos para alterar a cor dos números botões #188E36

Coloque a cor que preferir: Para alterar o hover procure por esse trecho abaixo

background:#272727;

Coloque a cor que preferir:

------------------------------------------------------------------------------------------------------------------------

Modelo 2

Copie o código abaixo e cole dentro de um gadget JavaScript

<style>
.showpageArea {
font: normal 20px 'Verdana';
color: #000;
margin:20px; }
.showpageArea a { padding: 6px 13px;
margin: 2px;
text-decoration: none;
color:#777; border-radius: 3px;/* COR DA FONTE DO LINK PRÓXIMA */
background: #FFFFFF; /* COR DE FUNDO DO LINK PRÓXIMA */
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-transition: all 0.15s ease;
-moz-transition: all 0.15s ease;
-ms-transition: all 0.15s ease;
-o-transition: all 0.15s ease;
transition: all 0.15s ease;
}
.showpageArea a:hover
{
color:#FFFFFF;
background: #2e5a98;
}
.showpageNum a { padding: 6px 13px;
margin:0 4px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
text-decoration: none;
background: #FFFFFF ; /* COR DE FUNDO DA NUMERAÇÃO */
-webkit-transition: all 0.10s ease;
-moz-transition: all 0.10s ease;
-ms-transition: all 0.10s ease;
-o-transition: all 0.10s ease;
transition: all 0.10s ease;
}
.showpageNum a:hover {
color:#FFFFFF;
background: #2e5a98; /* COR DE FUNDO DA NUMERAÇÃO QUANDO O CURSOR ESTÁ EM CIMA DELA */ }
.showpageOf{ margin:0 8px 0 0; border-radius: 3px; }
.showpagePoint {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-decoration: none;
padding: 6px 13px;
margin: 2px;
color:#FFFFFF;
background: #2e5a98 ;
/* COR DE FUNDO DA NUMERAÇÃO ATIVA */
/* COR DA FOONTE DA NUMERAÇÃO ATIVA */ }
.msg
{
width:300px;
font:normal 14px/15px 'Noto Sans';
color:#FFFFFF;
text-align:center;
}
#frase
{
width:auto;
height:20px;
float:left;
text-align:center;
color:#FFFFFF;
font:18px Verdana;
text-transform:uppercase;
margin-left:30px;
margin-top:90px;
text-shadow: 0px 0px 1px #FFFFFF;
filter: dropshadow(color=#FFFFFF, offx=0, offy=0);
}
#ch-pager-newer-link,
#ch-pager-older-link {
position: fixed;
top: 50%;
z-index:99999999;
-moz-opacity: 0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter:alpha(opacity=70);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#ch-pager-newer-link:hover,
#ch-pager-older-link:hover {
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter:alpha(opacity=100);
}
#ch-pager-newer-link {
left: 20px;
}
#ch-pager-newer-link:hover {
left: 5px;
}
#ch-pager-older-link {
right: 20px;
}
#ch-pager-older-link:hover {
right: 5px;
}
#ch-pager-newer-link > a,
#ch-pager-older-link > a {
background: transparent url('http://3.bp.blogspot.com/-sf2BwsscKxs/UczlxehoUEI/AAAAAAAACTQ/JDj3PGG2TwA/s78/arrows.png') repeat-x 0 0;
height: 92px;
width: 30px;
color:#FFFFFF;
}
#ch-pager-newer-link > a {
float: left;
}
#ch-pager-older-link > a {
background-position: 30px 0 ;
float: right;
}
#textpostOlder
{
width:80px;
font:normal 15px 'Noto sans';
position:relative;
top:53px;
right: 30px;
color:#FFFFFF;
text-shadow: 1px 1px 5px #000000;
}
#textpostNew
{
</style>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='«';
var downPageWord ='»';
</script>

<script src='https://dl.dropboxusercontent.com/u/261625350/opage-nunber.js'></script>

Procure por esse trecho dentro do código para alterar a cor dos botões números hover

background: #2e5a98 ;

E altere pela cor preferida:

Para alterar a cor do fundo normal procure por:

background: #FFFFFF ; /* COR DE FUNDO DA NUMERAÇÃO */

font: meublogdicas

Postar um comentário

0 Comentários