Páginas numeradas (efeito diferente)

Porque ninguém comentou no post do 30STM? :( Fiquei triste.

Vocês já devem ter visto o paginator daqui do blog, e em outros lugares, não é? Pois essas páginas numeradas do Abu Farhan são simples e lindas, além de personalizáveis! 

Clique em leia mais para aprender a colocá-las em seu blog.

Este é o paginator. (Abu Farhan)

Passo 1: Aplicar o JavaScript

Procure por:

</body>

E logo acima cole:

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/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://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

Modifique as partes em vermelho:
postperpage=7:  Troque o 7 pelo número de posts no início do seu blog
numshowpage=6: Troque o 6 pelo número de páginas que você quer que apareçam no paginator


 Salve as alterações.

Passo 2: Aplicar estilo

Procure por

]]></b:skin>

E Logo acima cole:

.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;/*cor dos números*/
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;/* cor do fundo dos números*/
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; /* Cor da barrinha*/
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAXsMOt46WRL_H0AXHMECPpUVzecwmgSHOQn4ZgxMHUy1iDXhkYS7Ntrp0gOKLXGjP7BAveW_LWSj-2cy3HkmxOpCDVocxN5ALtpbQkxdRo1Pk4JoubO5OE_NBtWZLdXIzQe6IoWYv3k4/s1600/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;/* Cor da barrinha selecionada*/
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}

Você pode editar as cores a seu gosto com as instruções no código. Espero que tenha dado certo.

Beijos.