Coloque páginas numeradas no seu blog

ImageShack, share photos, pictures, free image hosting, free video hosting, image hosting, video hosting, photo image hosting site, video hosting site

Páginas numeradas deixam o seu blog organizado e com um aspecto profissional, além disso facilita a navegação do visitante. Eu procurei como louca um tutorial que ensinasse a fazer isso. Felizmente achei! Créditos ao site SOS VIP. Bom, vamos ao que interessa:

Vá em Design, Editar HTML, dê Ctrl + F e procure por:

]]></b:skin>



e logo ACIMA dele cole o seguinte código:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
background: #cccccc;
margin:0 2px;
padding:5px;
}
.showpageNum a:hover {
border: 0px solid #cccccc;
background-color: #00ffff;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 0px solid #cccccc;
background: #00ffff;
margin:0 2px;
padding:5px;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 2px 0 0;
}
.showpage a {
text-decoration:none;
background-color: #cccccc;
padding:5px;
}
.showpage a:hover {
text-decoration:none;
background:#00ffff;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#000;
}

Obs.: Você pode mudar a cor verde que eu coloquei substituindo as partes destacadas em vermelho pelo código da cor que você quiser. Nessa tabela você encontra o código de várias cores.

Feito isso, procure por:

</body>

e logo ACIMA dele, cole:

<!-- Inicio do codigo de navegacao -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord =&#39;Anterior&#39;;
var downPageWord =&#39;Próxima&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!-- Final do codigo de navegacao -->

Agora visualize. Se estiver tudo certo, salve. Alguma dúvida?

66 comentários:

Thays Ingrid disse...

fofo seu blog *---*

http://cutxiithaysingrid.blogspot.com/

Gabe disse...

Hey, indiquei um selinho pra ti aqui: http://conteudo-g.blogspot.com/2011/02/selos.html
Adoro teu blog! beijos beijos :)

LariMiguelSoares ! disse...

Amei o tutorial, vai ser muito util no TrashLuv, muito mesmo, obg.

BeijoKiss, LariMiguel
www.trashluv.tk

it girls disse...

Achei super útil os tutoriais aqui do blog ^^

http://www.profanofeminino.blogspot.com/

Laurinha ♪♫ disse...

Andreza, seus tutos são bons d+! Obg. AJudou mto. Vou te indigar lá no Girls On Line. Já coloquei seu banner lá. Põe o meu?
Bjjjs!
http://girlson-line.blogspot.com/

Hamanda Sousa disse...

Amei !!! Deu super certo no meu !!
http://blogdahamanduxa.tk/

@AnaCarool disse...

HAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA, eu não acredito que vc postou isso! como vc adivinhou que eu queria isso hoje? suahsuashauhuauhshas

beijo
blogloucamistura.blogspot.com

Everything you need ♥ disse...

Oi, amei esse tutorial!

Eu tenho uma duvida, é meio bobinha, mas eu tenho, hehe!
Que site q vc usa pra hospedar suas iamgens, e qual das opções q eu tenho q pegar? pq tipo sempre quando vou colocar gifs no meu blog, tenho q hospedar, mas n sei qual das opções eu tenho q colocar no lugar da url, pq nunca da certo!
vc poderia me ajudar? responde la no blog, bju!

@lilicaops disse...

Oi flor, deu super certo no meu blog , só oque eu não consegui foi o do menu !

estou seguindo, segue de volta?

http://laiszfrancoo.blogspot.com/

seu blog é demais !

Garotas Cliche disse...

Dicas perfeitas eu vou tentar!

Bruna Morgan disse...

Eu deixei um recado na postagem do menu!

cantinhodeumagarota disse...

Andreza seus tutorias são ótimos ! Parabéns. Amei, seguindo o/!

Ana Luiza disse...

Eu nunca mais te vi no msn D: D: mas com este volta as aulas nem da tempo os nerds precisam estudar não é mesmo?rs.Andreza teu blog é um arraso,tutoriais demais ! Cada vez maior ! Só fico imaginando como você fica quando ve este amor dos seguidores,nos comentários ! Tudo de bom pra você *-* Além de elogiar o seu blog quero pedir uma coisa kk,o meu blog tem uma comunidade agora :D por eu não aceitar parceria criei a comu para publicar o blog entende? Se você puder fazer o favor de participar eu vou ficar muito feliz! Se não puder eu entendo e agradeço mesmo assim pelo seus post que ajudam muito gente *-* Muito mais sucesso querida !
Link da Comunidade:
http://www.orkut.com.br/Main#Community?cmm=111529702

Beijos

Mateus Oliveira disse...

oi usei seus codigos da uma olhada...

http://meninoantenado.blogspot.com/

Acho mt util seus tutos....

Gabriela disse...

ooie !
seus tutoriais são maravilhosos, uso vários deles, obrigada por me salvar varias vezes , hehe :D
estou seguindo, viu ! *-*
beijos, http://fashiongirlmania.blogspot.com/

Aninha chies disse...

Amei teu blog floor *--* da uma passada la no meu´ó aninhachies.blogspot.com
Na verdade eu queria uma informação vc fez um template pra um blog parceiro meu queria saber se vc faz pra min ?? *--*
bjs

bia c disse...

nao consegui, por que será?

Paulinha Rios disse...

Adorei o blog!! perfeitão..tem msn?!
preciso conversar com vcc..

www.ajoaninhadeverniz.blogspot.com

Jes disse...

Muito massa

Cah. disse...

Tem selo pra vc lá no blog!

http://meumundoecolorido.blogspot.com/2011/02/selos-meme.html

Camilla Dubus disse...

adoreei, e ja coloque em meu blog :DD

então, gostaria de um tutorial de colocar a data ali do lado (tipo a tua) ja tentei colocar mais não deu =( ...
e tambem como personalisar os comentarios, ja vi alguns tutoriais mais nunca da certo, é conplicado entender unas coisinhas que falarão me enbolei toda

Amanda Krohn disse...

Oi,eu mudei o meu link me,atualiza as parcerias? tanks,fofa! =)

Amanda Krohn disse...

desculpa,esqueci,rsrs,o link do blog é garotaantenada-poramanda.blogspot.com

Is3a - Garota Desigual disse...

Ja tinha visto um site com esse tutorial todo confuso, ainda tava editando mas o seu me salvou de todo o trabalho UHAUAHHHAB'
Nao tenho mais duvidas!

Andreza disse...

@bia c - Não sei, mas já aconteceu comigo. Tentei usar em um outro layout e não deu certo.

@Paulinha Rios - Meu msn é dre.za_oliveira@hotmail.com

@Camilla Dubus - Quando der eu posto, ok? É um pouquinho complicado mesmo.

Helena disse...

acc parceria?? http://theteens4ever.blogspot.com/

Beatriz disse...

Amr,o que é Codigo de navegação,acho que ia conseguir fazer se soubesse que era,mas la ta escrito Inicio e Final.Help me.rsrsrs.Responde lá no blog,se der?Bjo

atualizandoh.blogspot.com

Camilla Dubus disse...

flor, estes dias concegui colocar mais hoje, que estou colocando novo lay não ta aparecendo!
oque eu faço?

camilldubus@hotmail.com

XmusicStar disse...

Oii' Gosteii Mto do Blog, Segue o Meu que Sigo o Seu' http://xmusicstar.blogspot.com.. Você aceita Parceria TBM? AGRADEÇO.

Carol disse...

Amei esse tutorial tbm!Ótimo!

http://theblogcaa.blogspot.com/

Luana disse...

Eu fiz e deu certo! valeuu .

єяi¢α judd Ψ ™ disse...

Ameei *-------------*
Obrigada

http://garotasederivados.blogspot.com/

Cookie ; disse...

D+ =)

http://cookiemaga.blogspot.com/

Chat DOlls Brasil disse...

Ameeiii

Jo Porfirio disse...

Olá,seu blog tá um luxo,
sempre por aqui,bjos.
Visitem,acabei de reformar-lo e se seguir me avisa que eu retribuo.
http://july-83.blogspot.com

Dudaa disse...

ainda bem que seu blog existe! faz muito tempo que eu to procurando isso! amei ele!
simplesmente lindo...
parabéns

www.mixallof.blogspot.com

Vitória Almeida disse...

Fiz tudo certo , mais não ficou :(

Karine Matos disse...

Oi Andreza, esta dica foi super útil pra mim, deu tudo certo no meu blog.

Estou repassando pra você uma tag e um selinho.

http://viajandonaadolescencia.blogspot.com/2011/06/primeiro-selinho-eu-amo-seu-blog.html

http://viajandonaadolescencia.blogspot.com/2011/06/primeira-tag-10-coisas-preferidas.html

Até a próxima

Tássyla Fontinnely Ϟ disse...

[aa] ' perfeiito amr *-*. ta de parabéns viu ?

seguiindo o/ , segue de volta ? *o*
www.blogdatsyla.blogspot.com

Natasha disse...

Obrigada, estava procurando isso há muito tempo
patrulhafeminina.blogspot.com

Vanessa disse...

Oi amei o tutorial, ontem eu tinha visto um em inglês, achei que tinha errado em alguma coisa. Mas o problema é que eu uso o layout do blogskins então não tem o ' ]]> ' você poderia me dizer aonde eu colo ele para dar certo, eu preciso urgente de páginas enúmeradas! Este é o blog parisblody.blogspot.com, se puder me ajudar... Beijos!

Mary. disse...

Adorei o tutorial, fiz lá no meu blog e deu certo! Obrigada flor (:

blogbelasmulheres disse...

Ameiiii, me ajudou e muito

Gabriela Ortega da Silva disse...

Não fpoi Nada

Docinho disse...

Amei a dica, já fiz em um dos meus blogs onde não aparecia aquele básico "início" e "postagens antigas". Ficava sempre só na primeira página (tinha que ir em marcadores pra acessar as outras). Me poupou dessa dor de cabeça!

Bell Kerthünz disse...

Muito obrigada me ajudou bastante, acabei de entra no mundo blogger. >,,<

RafadeOliveira disse...

Andreza, já sigo seu blog há algum tempo e fiz esse tutorial no meu blog. Ficou legal mas o problema é que essa barrinha ficou grande demais e eu queria diminuí-la. Fiquei um bom tempo mexendo no html do código pra ver se conseguia mas não consegui. Pode ver lá no meu blog como ficou. Será que você poderia me ajudar?

Muito obrigada
Rafa
rafadeoliveira-tudosobrequalquercoisa.blogspot.com

Trashy Girl disse...

descobriu o que houve andreza? to precisando muito!

Elizabeth Passos disse...

Miga esse deu certo! perfeiro! Só o MN mesmo pra colocar coisinhas novas no meu bloguinho! Bligado!!!!
Bjks do elizabethpassos.blogspot.com

Anônimo disse...

eu fiz tudo certinho mais nem deu :S #tensa

me ajuda :D

beijocas sua fã

Jeu Dantas disse...

nao funcionou :/
nao teria qe ter algum codigo como gedget?

eduardo disse...

http://jogosdahorapc.blogspot.com

eduardo disse...

fiz como pediu mais não ficou a mesma coisa!!!!!!!!!!!!! pq ?

Thaty Mello disse...

Oiiie!! Amei o seu blog! Eu uso TODAS as coisas do seu blog... mas algumas não consigo! Tipo... Como colocar imagem invés de texto no gadget.
Bjuus \Fofa/.

blogdathatymello.blogspot.com

Geronda disse...

O meu problema, não com esse tutorial. Depois de numerar as páginas do meu blog, passou a ter UM post por página, e tá feio! Eu já refiz esse tutorial, mas continua.

Geronda disse...

No meu blog não tá funcionando! Eu fiz e refiz 5 VEZES e não funciona.

Andreza disse...

@Geronda - Pois é, isso aconteceu comigo também :/ Tentei aplicar em outros templates e também não vai. Não sei como resolver, mas assim que descobrir eu atualizo esse post, ok?

Beijos e desculpe não ajudar muito.

Luria Corrêa . disse...

Adorei esse tutorial. Todas as suas dicas são muito fáceis de entender e fazer Andreza, parabéns, valeu :D

Beijo.

Franciele Valadão disse...

Eba! Consegui fazer!

Camila Mabeloop disse...

aah esse eu não consegui fazer :/

Bruna. disse...

Oi, ótimo tutorial!
Consegui... Mas queria diminuir a fonte, tem como? Obrigada

By trashysplash.blogspot.com

Isabelle disse...

ei me fala na minha cbox pq o meu nao deu certo direito, eu acho que o teu codigo ta errado:
mimosdemoda.blogspot.com

Ana Lola disse...

Amei também!
Só melhora a imagem porque está meio distorcida.
Beijos,
Ana Lola

http://maioucherry.blogspot.com
http://maious2.blogspot.co,

Walquiria disse...

eu não consegui direito, tipo, ficou muito grande os números e algumas postagens sumiram .. oq eu faço ?

Babi Anger disse...

acessem meu blog
http://modaforgirls.blogspot.com/
vai? pf aceita parceria?

aninha √ii૮k disse...

Oi, esse menu ficou muito grande,como faço pra diminuir?