Páginas numeradas (efeito diferente)


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

Tumblr_ku8gcgfkmo1qzvjtno1_500_large

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.

Paginator3000
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(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/tAE1hAOX6Ys/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.


5 comentários:

Sâmi C. disse...

Oi linda!


Adorei o seu cantinho, e já estou seguindo aqui!!
Ficaria muito feliz se puder me seguir também :)

Beijinhos,
Boa noite!

stille_edicao_pink disse...

Amei, nem conhecia este tuto.
Amei seu blog viiu?Amei o estilo azul misturado com vintage, seguindo aqui e comentando retribui?
http://universophotoscape.blogspot.com/

Dasi // Heart Diamont disse...

Obrigado por seguir amor, volte mais vezes ao Trashy Star / Heart Diamont ok? Beijos

heartdiamont.tk

Laurinha ♪♫ disse...

Obrigada a todas vcs, já sigo vossos blogs, (rs) mas tô sem net, e fica difícil de retribuir...
Essa semana ganho meu notebook e fica mais fácil. Assim tenho tempo de ver os blogs de vcs.
Bjs.

Ҩ. luana oliveira ! disse...

Divulgandoo o meu blog akie : www.paradateen1.blogpsot.com
visita e se gostar segue :**