.
Image Map

07 janeiro, 2013

Tutorial: página numerada


Olá pessoal! Como vocês estão?

Como eu ando percebendo que vocês querem mais tutoriais na página, eu vim com um fresquinho pra vocês. Um que eu achei no Cherry Bomb, então todos os códigos (e etc) que está aqui foram retirados de lá. Bom, quer aprender como numerar as páginas do seu blog? Então clica em Mais Informações!

Quando você terminar esse tutorial, e concluir as modificações o resultado será o seguinte:

Suas páginas estarão numeradas!
Vamos ao tutorial?

Vá no HTML do seu blog, marque a caixinha "Expandir Modelos de Widgets" e procure por ]]></b:skin>

Cole antes disso (]]></b:skin>), o código abaixo:
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
background: #cccccc; /*COR DO FUNDO DOS NÚMEROS /*
margin:0 2px;
padding:5px;
}
.showpageNum a:hover {
border: 0px solid #cccccc;
background-color: #00ffff;
}
.showpagePoint {
color:#333; /* COR DO TEXTO /*
text-decoration:none;
border: 0px solid #cccccc;
background: #00ffff; /*COR DO FUNDO DOS NÚMEROS SELECIONADOS/*
margin:0 2px;
padding:5px;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 2px 0 0;
}
.showpage a {
text-decoration:none;
background-color: #cccccc; /*COR DE FUNDO DO "PRÓXIMO"/*
padding:5px;
}
.showpage a:hover {
text-decoration:none;
background:#00ffff; /*COR DE FUNDO  DO "PRÓXIMO" SELECIONADO/*
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#000;
}

No próprio código a Liah colocou as instruções de onde você deve alterar, lembrando que as cores tem que ser em códigos hexadecimais (#000000).

Agora vamos a segunda parte do código.
Procure por </body> no seu HTML e cole acima disso (</body>) esse código:

<!-- 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 -->

Não altere nada! Visualize se funcionou e salve.

Bom, como eu já disse foi a Liah que fez esse tutorial. Eu irei testá-lo e vejo se dá tudo certo mesmo!
Espero ter ajudado!

Um beijão!

3 comentários:

  1. Muito bom esse tutorial!
    http://anonimajaqueenjoasereu.blogspot.com.br/

    ResponderExcluir
  2. Muito bom, Alice!
    Amei seu blockquote, tá lindo e o tutorial foi ótimo!

    Beijo,
    www.vitima-fashion.blogspot.com/

    ResponderExcluir
  3. Flor, você é uma fofa *-* Amei teu comentário no blog e amei teu blog também. É simples e lindo! E amei o nome hehehe. Amei o tutorial, sempre vejo por aí. Só é preguicinha de pôr hahaha

    Just Debee

    ResponderExcluir