colocar varias paginas blog

Página de apoio ao artigo Páginas Numeradas

Olá, esta é uma página de apoio ao artigo:

Páginas numeradas no Blogger - Novo script

Aqui mostraremos seis estilos diferentes que podem ser aplicados ao recurso de páginas numeradas para que você possa deixar com a sua cara o recurso, ecolhendo o que melhor se adapta ao seu blog.


Veja a demonstração de todos :
 
Estilo 1
Estilo 2
Estilo 3
Estilo 4
Estilo 5
Estilo 6


Agora acompanhe abaixo os trechos de CSS que vocês devem copiar para usar quando estiverem aplicando o recurso de páginas numeradas. Estes estilos serão usado no ítem 4 do PRIMEIRO PASSO:

PRIMEIRO PASSO: Aplicar o estilo

1 - Faça Login no painel  do Blogger e vá até Layout e depois Editar Html.

2 - NÃO marque a caixa "Expandir modelos de widgets".

3 - Encontre esta linha no html do blog:

]]></b:skin>

4 - Cole ACIMA dela (saltando uma linha) este trecho:

CSS DO ESTILO 1:

.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://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -50px repeat-x;
}

.showpageNum a:hover {
border:1px solid #888;
background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/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://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 0 repeat-x;
text-decoration: none;
}

             

CSS DO ESTILO 2:

.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 #919106;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -50px repeat-x;
}

.showpageNum a:hover {
border:1px solid #aeae0a;
background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.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 #919106;
background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 0 repeat-x;
text-decoration: none;
}

CSS DO ESTILO 3:

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #fff;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #363636 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 -25px repeat-x;
}

.showpageNum a:hover {
background: #044697 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 -50px repeat-x;
}

.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #e30000 url(whttp://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 0 repeat-x;
text-decoration: none;
}

.showpageOf{
margin:0 8px 0 0;
}

CSS DO ESTILO 4:

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #fff;
}

.showpageNum a {
padding: 3px 4px;
margin:0 4px;
text-decoration: none;
border-top:2px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -25px repeat-x;
}

.showpageNum a:hover {
border-top:2px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
border-bottom:1px solid #999;
background: #999 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -50px repeat-x;
}

.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
border-top:2px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
background: #000 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 0 repeat-x;
text-decoration: none;
}

.showpageOf{
margin:0 8px 0 0;
}

CSS DO ESTILO 5:

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #fff;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #333 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 -50px repeat-x;
}

.showpageNum a:hover {
background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 -25px repeat-x;
}

.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #06a2b9 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 0 repeat-x;
text-decoration: none;
}

.showpageOf{
margin:0 8px 0 0;
}

CSS DO ESTILO 6:

.showpageArea {
font-family:verdana,arial,helvetica;
color: #fff;
font-size:11px;
margin:10px;
padding:8px 20px;
background: #333;
}

.showpageArea a {
color: #fff;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #666;
}

.showpageNum a:hover {
background: #888;
}

.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #da6100;
text-decoration: none;
}

.showpageOf{
margin:0 8px 0 0;
}

SEGUNDO PASSO: Aplicando o JavaScript

1 - Encontre isso:

</body>

2 - E cole isso acima, saltando uma linha:

            &lt;script type='text/javascript'&gt;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Anterior';
var downPageWord ='Próxima';
&lt;/script&gt;
&lt;script src='http://dl.dropbox.com/u/3626153/scriptsdireto/Tutorial%20Para%20Tudo/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;

  

Mude de acordo com seu blog:

var postperpage=7 - Mude o 7 para o número de artigos que devem aparecer em cada página.

var numshowpage=4 - Mude o 4 para o número máximo de páginas a aparecer em volta da página selecionada. Lembrando que no exemplo usando o 4, aparecerão duas de cada lado da página selecionada, sendo 6, aparecerão três de cada lado...

Pronto meus caros, estes são os estilos a serem aplicados ao recurso de Páginas numeradas para Blogger, escolham o que mais lhes agrada e mãos à obra.