Bela navegação deslizante, páginas numeradas!

Salve meus amigos, após apresentar o novo script de navegação por páginas numeradas para Blogger com novos estilos e livre de erros, que você pode ver AQUI, vou agora ensinar um outro método, muito interessante e bonito para tornar a navegação pelas páginas do blog muito mais fácil e visualmente mais bonita e atrativa.

Este modo adicionará a paginação numerada com um efeito deslizante muito interessante. Veja a DEMONSTRAÇÃO.

Páginas numeradas com scroll

Trata-se de um tutorial que, a princípio, parece difícil mas garanto que é muito tranquilo de fazer. è uma alternativa interessante cujo script finte foi desenvolvido pelo Abu Farhan. Seu blog nunca mais será o mesmo, será melhor. Vamos ao tutorial:

PRIMEIRO PASSO: Aplicando o estilo

1 - Abra o painel do blog e vá em Layout >> Editar Html.

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

3 - Use Ctrl + F no teclado para procurar por isso:

]]></b:skin>

4 - E substitua por isso:

.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}

.fullsize .scroll_thumb {
display:none;
}

.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
]]></b:skin>

SEGUNDO PASSO: Aplicando o JavaScript

1 - Encontre isso:

</body>

2 - E cole antes este trecho , saltando uma linha:

<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

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...

Está pronto meus amigos, podem salvar o modelo e ver como ficou. Espero que gostem e qualquer dúvida comentem ou juntem-se aos nossos grupos de discussão:

Na internet:  http://tutorialparatudo.groups.live.com/?lc=1046

Chat ao vivo no MSN em grupos ou privado: group1142627@groupsim.com

Posted in: Blogger, Ferramentas, Widgets