Como colocar paginação no seu blog?

Como colocar uma linda paginação no blogger não é tarefa fácil, nem na hora de procurar né? rs'
Então vejamos agora um tutorial sem erros.

Exemplo:
[Clique para ampliar]

Faça login no blogger >> Vá em design >> Editar html
Clique na opção "Expandir modelos de widgets"
Aperte Ctrl+F do seu teclado e procure por "]]></b:skin>" e logo em cima cole o código abaixo:


.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://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;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}

Depois aperte Ctrl+F do seu teclado de novo e procure por "</body>"  e em cima desse cole o código abaixo:



<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'/>
Altere como desejar:
var postperpage=7;
var numshowpage=6;

var postperpage=7; é quantos posts por página seu blog irá exibir
var numshowpage=6; é quantas número será exibido em sua paginação

Depois digite Ctrl+F mais uma vez e procure por 'data:label.url' } e substitua esse pelo o código abaixo:


'data:label.url + &quot;?&amp;max-results=7&quot;'

3 é o numero de posts por página, altere como achar melhor!


Espero que gostem e consigam fazer, beijos!

Comente usando seu facebook!


Comente!

  1. Amei aqui! Estou seguindo
    www.maysilvamakeup.blogspot.com
    beijo

    ResponderExcluir
  2. Que fofo aqui ! O desing é diferente,gostei :D
    ja sigo,adorei o tutorial
    http://styleincluded.blogspot.com/

    ResponderExcluir
  3. Oii, fico feliz que seja fã do ChoocoBerry, e quanto ao msn, desculpa mas não estou mais aceitando ninguém, deu alguns problemas e resolvi não aceitar por enquanto. Mas vou criar um separado em breve! Ah, sigo aq, segue de volta?

    ResponderExcluir
  4. Oii tudo bom? Queria avisar que o bomba de glitter está com um sorteio exclusivo, concorrendo a um layout, mini gifs, brushes, cursores, favicons e mais um monte de prêmios! Participe já! http://bombadeglitter.blogspot.com/2011/04/sorteio-yeah-bomb-glitter_28.html

    ResponderExcluir
  5. Adorei aqui *-*
    Primeira vez que visito e já amei hehe
    Estou seguindo.
    Adorei o tutorial, super útil *-*
    Beijos,
    http://paradiisegirls.com
    @paradiisegirls

    ResponderExcluir
  6. Obrigada, funcionou, ficou muito legal, eu adorei! Mas tenho uma dúvida... (sempre tem que ter um chato pra ter duvidas, né?) Então, não tem como mudar a cor? Porque meu blog é todo em rosa, lilás e pá, e o negócio de página ficou em laranja, ficou estranho :/ Beijos.

    ResponderExcluir