Há muito tempo atrás (rs) eu postei aqui no blog um tutorial de paginação numerada, só que ele não funciona muito bem em alguns blogs, então resolvi postar um novo tutorial com o código que estou usando atualmente aqui no CB, como vocês podem ver na imagem abaixo:
Para colocar no seu blog uma paginação assim, é só seguir estes simples passos:
Vá no HTML do seu blog, procure pela tag </body> (Aperte Ctrl+F e digite para facilitar a busca)
Cole acima do trecho pesquisado, o seguinte código:
<script style='text/javascript'> var pageCount=5;var displayPageNum=5;var upPageWord="Anterior";var downPageWord="Próxima";</script> <script src='http://static.tumblr.com/y66747w/DqWm7hhf3/page-nav.js' style='text/javascript'> </script>Agora procure por ]]></b:skin> e cole logo acima, este código:
/* PageNav --------------------------- */
.showpageArea {
font-family:Verdana, Geneva, sans-serif;
color: #000;
font-size:11px;
margin:10px; }
.showpageArea a { padding: 3px 8px;
margin: 2px;
font-weight: 700;
text-decoration: none;
color:#777; /* COR DA FONTE DO LINK PRÓXIMA */
border:1px solid #ccc; /* BORDA DO LINK PRÓXIMA */
background: #eee; /* COR DE FUNDO DO LINK PRÓXIMA */ }
.showpageNum a { padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999; /* BORDA DA NUMERAÇÃO */
background: #ddd ; /* COR DE FUNDO DA NUMERAÇÃO */ }
.showpageNum a:hover {
border:1px solid #888; /* BORDA DA NUMERAÇÃO QUANDO O CURSOR ESTÁ EM CIMA DELA */
background: #ccc; /* COR DE FUNDO DA NUMERAÇÃO QUANDO O CURSOR ESTÁ EM CIMA DELA */ }
.showpageOf{ margin:0 8px 0 0; }
.showpagePoint {
text-decoration: none;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
border:1px solid #999; /* BORDA DA NUMERAÇÃO ATIVA */
background: #666; /* COR DE FUNDO DA NUMERAÇÃO ATIVA */
color:#fff; /* COR DA FOONTE DA NUMERAÇÃO ATIVA */ }
Se não aparecer na hora, não se desespere, as vezes demora um pouco para aparecer no blog. Dentro de alguns dias aparece. A querida Gizaa deu algumas dicas por comentário e achei que seria útil colocar aqui também: Uma coisa que deve ser levada em conta é se os feeds do blog estão certos, as vezes tem algum erro e ai nada funciona, nem posts relacionados,nem paginação e todos widgets que usam jason. Ah e em blog de testes fechado também não funciona. E também o numero de posts por página (configurado no painel) deve ser o mesmo no script -nesse caso é 5-
Espero que tenham gostado, kissus!
Muito bom! Fica show no lay *w*
ResponderExcluir# www.cute-bii.blogspot.com
Não deu aqui, vamos aguardar um pouco mais
ExcluirAh, me lembro que usei esse tutorial mas não resolveu mesmo, talvez eu faça esse *0*
ResponderExcluirBeijos
www.garotadeallstar.com
Legal! E nem é tão complicado assim, né?
ResponderExcluirGostei, beijos...
Batom De Framboesa
Ameei o tuto, como eu estava louca por ele ^^, com toda a certeza no próximo lay usarei, claro, sempre com os devidos créditos . Kissus !
ResponderExcluir#Nhaaac >>>http://the-lovers-official.blogspot.com/
muuito boa e útil essas dicas ! :D
ResponderExcluirentão , posso pedir um favor ? :3
o blog D A Y S A G O mudou de nome e URL , mas ainda da pra acessar pelo contos-da-lua.blogspot.com e ser redirecionado !
Poderia me ajudar a divulgar ?
lá ta cheeio de novidades , look's do dia , manotas e emoções , haha'
conto com você lá ein ? <õ/
beeijos e fique com Deus :*
- P H O R A do O A R -
http://phora-do-ar.blogspot.com.br/
OMG, eu ia te pedir hoje mesmo pra você postar esse tuto, até porque o antigo é muito difícil de personalizar. LIAH, tu é demais, até ler mentes você le -q
ResponderExcluir-----------
Te indiquei em um memê super legal (:
Veja: http://yanmgomes.blogspot.com.br/
Liah, obrigada!
ResponderExcluirAjudou muuito, sério, eu já ia pedir!
Amei <3
ResponderExcluirIrei usar e darei os créditos, ok?
-------------------------------------------
blue---light.blogspot.com
Muito interessante esse tutorial,depois vou usar ele no meu blog,estou fazendo layout novo!
ResponderExcluir#http://sweetmagia.blogspot.com
Adorei o tutorial Liah! Vou usar no meu próximo layout!
ResponderExcluirMuito legal! Talvez eu use no meu blog :)
ResponderExcluirBeijos
http://www.teenage-party.blogspot.com.br/
AMEI! Acho que no próximo layout do blog vou colocar paginação numerada. Ah, e falando nisso, seu blog ficou incrível, não sei como você consegue!E gostaria de agradecer por ter mantido o Tic Tac Girls nos afiliados ^^
ResponderExcluirKisses
Luh
http://tictacgirls.blogspot.com.br/
*O* sempre adorei as paginas numeradas, ainda mais assim, mas acho que não combina com o meu blog :/
ResponderExcluirhttp://omeubrilhantemundo.blogspot.com.br/
Tudo que vc ensina eu fasso no meu blog, más nada dá certo nunca, nenhuma das coisas que vc incinou deu certo
ResponderExcluirhttp://morangocomchantliy.blogspot.com.br/
Adorei Liah, muito obrigada! Poderiam visitar meu blog? Beijos, se puder sigam :)
ResponderExcluirwww.mundo-leticia.blogspot.com
Muuuito obrigada, Liaah!!!
ResponderExcluirAnnjo, eu fiz um template free e ñ sei como colocar para download no blog, vc pode me explicar ? Obbg desde já ! Rafaela :D
ResponderExcluirOiiiii girl! Amei o tutu e usei ! bj !
ResponderExcluirTuto show - deixa o lay muito lindo, talvez eu use no próximo ; com os devidos créditos sempre =)
ResponderExcluirhttp://queridaborrecencia.blogspot.com.br/
Euu amo visitar o blog da Liah! Coisaa mais liinda o Cherry Bomb!
ResponderExcluirEstou usando creditos do CB no meu blog pelos tutoriais que me ajudaram a montar meu novo layout!
sweetmagia.blogspot.com
Fica muito lindo, talvez eu use u-u
ResponderExcluirEi Liah, como você botou aquele player no gadget Welcome? Me ensina? ;3
thefashionwonderland.blogspot.com
Ai, fica lindo, né? Super melhor. Vou usar no blog e creditar <3 Obrigada pela visita, lindona.
ResponderExcluirBeijos,
Anna
http://garota-queen.blogspot.com/
Eu já estou usando e ficou muito lindo! O único tutorial que deu certo no meu blog. Quer ver como ficou?
ResponderExcluirhttp://nataliamedice.blogspot.com.br/
Fica lindo personalizada, mas neste layout não irei usar porque já personalizei a navegação de páginas. Um beijão.
ResponderExcluirhttp://world-cutest.blogspot.com/
O resultado fica muito bonito, acho que vale a pena esperar alguns dias até aparecer no blog, não é? Pra ser bem sinceramente, eu prefiro a navegação mais tradicional mesmo, com Início, Postagem mais recente e mais antiga, mas as páginas numeradas podem ser uma bela saída em alguns layouts mais despojados. Adorei o tutorial, acho que vou usar uma hora dessas! Um beijo.
ResponderExcluirthe-zombie-attack.blogspot.com
Nossa que lindo que fica *o* amei muuuuito ! talvez eu use, se usar, coloco os seus créditos lá, ><
ResponderExcluirbeijos :*
http://siteiloveit.blogspot.com/
vou guardar o post para depois tentar fazer *_*
ResponderExcluirsorteio internacional no blog viver num T0
AMEEEIII!
ResponderExcluirTem que colocar códigos o nome da cor? Ex: roxo ou #912CEE
ResponderExcluirhttp://spectrasdiary.blogspot.com
ResponderExcluirEsse código das paginas numeradas é de lua rs, em algns blogs dá certo noutros não...
ResponderExcluirUma coisa que deve ser levada em conta é se os feeds do blog estao certos, as vezes tem algum erro e ai nada funciona, nem posts relacionados,nem paginação e todos widgets que usam jason
ah e em blog de testes fechado também não funciona rs
e também o numero de posts por página (configurado no painel) deve ser o mesmo no script
bjãoo
Amei *-*
ResponderExcluirCom certeza vou usar!
Beijinhos ;*
beatriz-officiels.blogspot.com.br
Ótimo tuto,fica show!
ResponderExcluirhttp://jessica-alves15.blogspot.com.br/
A-M-E-I !
ResponderExcluiraa aquele seu tutorial de por o slide no cabeçalho não funcionou no meu, tive que achar outro na web.. mais consegui kk' da uma olhadinha la se você puder! layout novo la! bjs
Mundo of Teen
Que lindo Liah... estou pensando em usar em meu blog ♥'
ResponderExcluirbeijos :*
http://sweet-wordeland.blogspot.com/
Ai que show, Liah acabei de fazer isso no meu blog, vou visualizar pra ver se deu certo. Obrigada!
ResponderExcluirBeijos♥
carismaticaoficial.blogspot.com
fofis liah!
ResponderExcluir-->http://smileretro.blogspot.com.br/
Nossa, parece que leu meu pensamento, hein? Andei hoje a manhã inteira procurando esse tutorial e agora acabei achando ele aqui!
ResponderExcluirO outro que você postou não funcionou em meu blog...
Bjs!
http://sorvete--de--morango.blogspot.com/
O blog fica incrível com esse efeito, vale até apena ficar dias esperando para aparecer! Talvez eu uso!
ResponderExcluirhttp://garotavertigem.blogspot.com.br/
É lindo esse efeito,e eu já coloquei no meu outro blog.Beijão
ResponderExcluirrevolutionstartshere-oficial.blogspot.com.br
Caramba! Fazia muito tempo que eu estava procurando esse Tutorial, certa vez eu achei, mas o site era todo em Inglês ¬¬ Daí não consegui prosseguir sabe? Eu acabei de trocar o Layout do Blog, mas pode ter certeza que no próximo eu irei usar *-*
ResponderExcluirBeijão Liah :)
http://blog-part-of-me.blogspot.com/
Oi....Lia um blog copiou todo seu layout...http://cherry-lili.blogspot.com.br/
ResponderExcluirPlágio....coisa errada....Quem fez isso foi uma colega minha chamada Livia Machado
http://cherebebel.blogspot.com.br/
em nome do meu blog Cherebebel
Adorei o tutorial, já estou usando lá no meu blog! Coloquei os créditos lá em baixo onde fica escrito tecnologia do blogger :)
ResponderExcluirhttp://querido-livro.blogspot.com.br/
oii liah, estes dias eu achei um blog que esta te plagiando: http://kawaiitheworld.blogspot.com.br/2012/07/brushes-meninas.html
ResponderExcluirela copiou uma de suas postagens. Espero ter ajudado. Bjinhos
http://thewoag.blogspot.com
Adorei fica bem legal mesmo além do mais voce explica direitinho.
ResponderExcluirhttp://www.jipeblo.com
Adorei,até usei no meu blog,e ficou show.
ResponderExcluirBeijooos
http://ourworldscrazy.blogspot.com.br/
aah! legal, vou tentar!
ResponderExcluirblog-foradecontrole.blogspot.com
Liah , me ajude !!! eu sempre teclo Ctrl + f e apere um negócio em vermelho : 0 de 0 e é por isso que não não faço nada no meu blog que seje de encontrar tag . Me ajuda ? Responda no meu blog : http://mariana-meninasnamoda.blogspot.com.br/ e segue ele por favor !!!
ResponderExcluirLiindo esse tutorial,ameei (:
ResponderExcluirbeeeijos;*
http://sooulteen.blogspot.com.br/
Super útil o tutorial!
ResponderExcluirhttp://waverlyplaceblogger.blogspot.com.br/2012/08/sorteio-de-um-layout-personalizado.html
Fica mais fácil , e bonito (:
ResponderExcluirDetalhes da Moda
Tudo de Photoscape
Está acontecendo um mega concurso entre os blogs: HTML Teen e Princesa Imperfeita! Vai ficar de fora?
ResponderExcluirhttp://htmlteen.blogspot.com.br/2012/08/concurso.html
PERFEITO esse tutorial,amore! *-*
ResponderExcluiradorei o tuto
ResponderExcluiradoooorei a dica, vou usar agora!
ResponderExcluirhttp://bfashionstar.blogspot.com.br/
ah Liah!!
ResponderExcluirNão precisa agradecer, é um enorme prazer ajudar :)
bjooooooo
Oih"" Achei Lindo seu blog,e já to participando vc pode participar do meu tbm?http://blogingridpink.blogspot.com.br/
ResponderExcluirObg ''Deus'' de Já!
Acho que a terceira vez que comento nesse post kk amo esse blog entro sempre sempre sempre, pelo menos 5 vezes ao dia.Queria pedir pra vc um tutorial de como fazer um gadget de status como o seu!
ResponderExcluircom aquele Online,Comentarios e etc!Bjs
http://bangteen.blogspot.com.br/
Peerfeito como sempre !Parabéns Cherry !
ResponderExcluirRetribui? http://teamtutopedia.blogspot.com.br/
Nossa o meu blog é de mONSTER High,ficou muiitoo fofo qnd eu alterei a cor dele obrigado!
ResponderExcluirAmeeeeeei esse tuto *-----*
ResponderExcluirhttp://worldofimaginatioon.blogspot.com.br/
Amei esse tutu *o*
ResponderExcluirhttp://mundootakuotome.blogspot.com.br/
Amei !
ResponderExcluirMais eu não consegui colocar , mais deixa , no seu blog ficou demais !
meupalaciocorderosa.blogspot.com.br
Gostei do tutorial, consegui fazer,obrigado.
ResponderExcluirOi fofa !
ResponderExcluirO blog cherebebel a plagiou.
Muito errado falou de uma tau menina e fez o mesmo.
Denunciei,ele reformou tudo...
www.cherebebel.blogspot.com
denunciei pq achei errado valw !
Muito obrigado!! Muito útil!!
ResponderExcluirhttp://humilhando.blogspot.com.br/
Obrigado pelo ótimo tuto Liah, eu vou usar no novo Lay que estou fazendo, beijos ;)
ResponderExcluirwehearthtml.blogspot.com
Usei em um layout que estava fazendo, e realmente fica muito lindo!
ResponderExcluirSuper útil!
Beeijos
http://unhaseesmaltesdicas.blogspot.com.br
O meu não ficou bonito que nem o do exemplo. Ele ficou com os numeros juntos, e sem fundo nem nada, mas já é alguma coisa :(
ResponderExcluirLiah ,obrigada por disponibilizar esse tutorial pois foi o unico que funcionou no meu blog.Não se preocupe,o nome de seu blog está na page de creditos. Valeu. ^^
ResponderExcluirhttp://ottakunosekaii.blogspot.com.br/
Liah, o tuto deu certo pela metade. Fiz tudo bonitinho e apareceu na mesma hora no blog. O único problema é a segunda postagem do blog sumiu. É um blog de testes, aberto. Tem 4 posts. Aparecem o mais atual e os dois mais antigos, o que deveria estar na página 2 some e aparece a página 4 vazia. O que posso fazer? Bjoooo
ResponderExcluirPerfeito, funcionou na hora e está em uso no blog. Show de bola.
ResponderExcluirAprende muito com teu blog pra poder fazer o layout do meu, rs dá uma olhada e espero que goste http://diiariodeumadiva.blogspot.com.br/
ResponderExcluirObrigada pelo tutorial, Liah. Meu blog ficou uma maravilha! Você sabe como se faz para pôr um top comentaristas no blog?
ResponderExcluirAgradecida!
Obrigada pelo tutorial!!! Perfeito, como sempre :)
ResponderExcluirBjoss
Amei, fazia muito tempo que estava atras deste tutorial.
ResponderExcluirSe puder divulga => http://alucihnadablog.blogspot.com.br/ .
Beijos!
O meu não tinha ficado com o 'outro' tutorial. Mais com esse ficou! Ameei! :)
ResponderExcluirNossa, muito bom messssmo! Amei seu blog! O meu apareceu na hora, suas dicas estão me ajudando bastante!
ResponderExcluirFuncionou na hora!Adorei!Os tutoriais do Cherry Bomb São da Hora!
ResponderExcluirBeijinhos!
Oii, eu mudei o modelo do meu blog, antes eu usava o modelo 'Celestial' em meu blog, mas eu resolvi mudar totalmente o layout e modelo dele, e estou usando no momento o modelo 'Espetacular Ltda.'.
ResponderExcluirAntes quando eu usava o modelo celestial, esse código de página numerada dava certinho, só que agora no modelo novo, esse código não pega.
Ele aparece a numeração das páginas, só que não dá pra personalizar.
Queria saber qual foi o meu erro.
http://michaelahelena.blogspot.com
Como colocar a sombra?! Sou crua em html, você pode me passar o código? Agradeço! ;* http://paisagemdejanela.blogspot.com
ResponderExcluirObrigada me ajudou muito, mas como mudar as cores? pq o meu ficou cinza...
ResponderExcluira-ultima-moda.blogspot.com.br
Seu blog é IN-CRI-VEL. Estou arrumando o meu com todas as dicas que você sugere. Parabens pelo trabalho.
ResponderExcluirbjk'z
Hey mt obg !! e_e
ResponderExcluirO código funciona. Porém a paginação numérica aparece em tons de cinza, quando, na verdade, eu coloquei os códigos dos mesmos tons que a imagem da paginação que você colou no post (rosa, branco e roxo). O que faço para que fique igual a imagem se as cores não funcionam?
ResponderExcluiramei. deu certo obg !!!
ResponderExcluirOwn muito obrigada sua linda =D
ResponderExcluirParabens pelo blog
http://garotailustre-baabi.blogspot.com.br/
Adorei Liah! Sempre acompanho seu blog e você além de ter um blog muito fofo, você explica direitinho pra gente.
ResponderExcluirValeu!
Julianayra.blogspot.com
Ai tem tanta coisa linda aqui nesse blog que eu queria fazer no meu.....
ResponderExcluirColocar a "paginação numerada", slide no cabeçalho....mas eu não consigo. Eu tento fazer esses passos q vc ensina, mas não consigo. Sou tão leiga nesses assuntos...argh que raiva...hahaha
Beijoos
Nossa Super fácil, Adorei!
ResponderExcluirDeu certinho em meu blog
www.paraousar.com
Usei e agora não consigo tirar.
ResponderExcluirAlguem pode me ajudar?
http://sotestejenny.blogspot.com.br/
jennifer_snt@hotmail.com
Perfeito
ResponderExcluiradorei... Beijosss
Gostei, só não vou usar porque eu não preciso ...
ResponderExcluirBeijos!
Joaneta-Chan
meu anjo vlw aqui deu certo vlw abraços ,é para meu novo blog
ResponderExcluirhttp://baixarclipsgratis.blogspot.com.br/
o antigo ja tinha mais passa la
http://wwwshowfilmes.blogspot.com.br/
eu simplesmente ameeeeeeeeeeei! Parabéns! http://sonhosdedirectionersfanaticas.blogspot.com.br/
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirOlá, Cris & Cris, de Tudo Um Pouco agradece sua ajuda.
ResponderExcluirTentei varios outros tutorais e nenhum funcionou. Este funcionou no mesmo momento.
Lindo site.
Muito obrigado.
Funcionou!!!!!!! FICOU LINDO *U*
ResponderExcluirAdorei, Obrigada :) Ficou ótimo no blog :D
ResponderExcluirhttp://imagines1ddiariodeumafa.blogspot.com.br/
Este comentário foi removido pelo autor.
ResponderExcluirMuito bomm...Adoreiiii!! Valew por compartilhar seus conhecimentos com a gente!
ResponderExcluirAqui funcionou na hora! Valeu :D
ResponderExcluiraaawn , amei , plea primeira vez eu consegui fazer *u*
ResponderExcluirobg <33
Adorei,queria mesmo fazer isso e deu super certo,como faço pra creditar vocês?
ResponderExcluirBeijo
brilhoestilo.blogspot.com.br
vlw me ajudo bastante ^^
ResponderExcluirSempre queria fazer isso no meu blog mas não sabia agora graças a voces vou fazer.
ResponderExcluirobg.
Eu procurei a palavra mas não achei.
ResponderExcluirOtimo post! Já implementei no meu blog de tirinhas.
ResponderExcluirhttp://www.tiranicas.com.br/
Muito bom! Coloquei no meu blog de mensagens e textos reflexivos.
ResponderExcluirhttp://textosreflexivosemensagens.blogspot.com.br
Nossa,muito lindo divou!
ResponderExcluirhttp://euamomoda2014.blogspot.com.br/
Excelente, esta de parabéns mesmo!! Fiquei uma semana tentando tudo o que era dica, e o seu foi o único que funcionou, eu recomento, obrigado!
ResponderExcluir