Widget De Paginação Com Barra Rolante (Scroll)

*IMPORTANTE: Para  garantir o funcionamento no caso de problemas com a hospedagem do script, não esqueça de baixa-lo e guarda-lo em seus arquivos como está indicado no final deste post.

A widget de paginação numerada mais comum que vemos em sites e blogs tem essa aparência:

...............................

 ......................................

Esta que veremos aqui foi nossa querida @Gema nos apresentou. Criada por Abu Farhan , tem a mesma função mas com estilo diferente: Não mostra os quadradinhos de navegação nem o  “Pages (…)”. Ela apresenta uma linha com os números e um efeito deslizante (scroll) . Segundo seu criador, o mais importante é que ela pode apresentar mais de 500 postagens. 

Vamos ao tutorial:

Vá em “Layout” ► “Editar HTML ► e
 ANTES/ACIMA da tag ]]></b:skin> coloque o segunte código CSS:

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

Depois procure pela tag </body> no final do template e cole o seguinte código (Script)

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'/>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

Pronto ele já estará funcionando perfeitamente.

Mudanças de estilo que poderemos fazer, dentro do código CSS:

Mudar a cor da linha deslizante :

.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24; /* Mudar  o código da cor */
}

Background da numeração da página onde estamos:

.paginator span strong {
background:#ff6c24; /*Mudar o código da cor*/
font-style:normal;
font-weight:normal;
}

Mudar a cor dos números

.paginator span {
display:block;
padding:3px 0;
color:#fff; /* Mudar a do número*/
}

Mudar a linha cinza

.paginator .scroll_trough {
width:100%;height:3px;
background:#ccc; /* Mudar a cor */
overflow:hidden;
}

A imagem (setinha) pode ser mudada. É recomendável hospedar em seu proprio blog ou em um site tipo Tinypic para garantir que ela continue lá =) 

.paginator .scroll_knob {
http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif)

*IMPORTANTE: No final do script vemos um outro script que convém descarregar e guardar para o caso de haver algum problema com o site de hospedagem e ele parar de funcionar. Teremos que hospeda-lo em outro site e trocar o endereço.

1 - Copie o endereço abaixo e cole no seu navegador
2- Faça o download para seu PC .
3- Hospede o script em um site de sua preferencia.
Leia ► “Sites de Hospedagem de Arquivos” da Rô Zancheta.

http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js

 ..............................................

 .....................................

Fonte: @Gemablog (Espanhol)

Receba nossas atualizações: