21 de jan. de 2013

Adicionar páginas numeradas no blog

Uma coisa que ajuda bastante no crescimento e desenvolvimento de um blog é a forma como o blogueiro costuma tratá-lo, criar um blog é muito fácil, mas cuida da aparência e ainda por cima escrever conteúdo relevante não é nada fácil. Porem você pode começar a dar mais atenção para seu blog introduzindo alguns recursos que poderão ajudar a melhorar a navegabilidade de seus leitores em seu blog.
Demonstração


1º Acesse o painel do seu blog e vá até Modelo, editar HTML, clique em expandir modelos de widgets,  (De um CTRL + F ) para abrir uma barra de localização, tendo aberto a barra de localização cole este código. 


]]></b:skin>

Tendo encontrado o código acima dele cole este outro código:

.showpageArea {
font-family:Verdana, Geneva, sans-serif;
color: #FFF;
font-size:12px;
margin:15px; }

.showpageArea a {
margin: 2px;
padding: 7px 7px 7px 7px;
font-weight: 700;
text-decoration: none;
color:#fff; /* COR DA FONTE DO LINK PRÓXIMA */
border-radius: 7px 7px 7px 7px; /* Edite a Borda */
background:#000; /* COR DE FUNDO DO LINK PRÓXIMA */ }

.showpageNum a {
padding: 7px 7px 7px 7px;
margin:0 4px;
text-decoration: none;
border-radius: 7px 7px7px 7px; /* Edite a Borda */
background:#000; /* COR DE FUNDO DO LINK PRÓXIMA */ }

.showpageNum a:hover {
font-size:13px
border-radius: 7px 7px 7px7px; /* Edite a Borda */
background: #000; /* COR DE FUNDO DO LINK PRÓXIMA */ }

.showpageOf{ margin:0 8px 0 0; }

.showpagePoint {
text-decoration: none;
padding: 7px 7px 7px 7px;
margin: 2px;
font-weight: 700;
border-radius: 5px 5px 5px 5px; /* Edite a Borda */
background: #000; /* COR DE FUNDO DO LINK PRÓXIMA */ }
color:#fff; /* COR DA FOONTE DA NUMERAÇÃO ATIVA */ }

2 Agora vamos para a segunda parte.
Copie este código e cole na barra de localização

</body> 

tendo encontrado cole este outro código acima dele:

<script style='text/javascript'> var pageCount=5;var displayPageNum=5;var upPageWord=&quot;Anterior&quot;;var downPageWord=&quot;Próxima&quot;;</script> <script src='http://static.tumblr.com/y66747w/DqWm7hhf3/page-nav.js' style='text/javascript'> </script>

Agora visualize e modifica do jeito que seja seu agrado, se não deu nenhum erro você salva e confere como ficou.

3 comentários:

  1. o link do js ta com defeito !!

    ResponderExcluir
  2. obrigado pelo aviso, vou rever o erro e comcertalo

    ResponderExcluir
  3. Eae, queria saber se tem como delimitar o número de páginas, por exemplo o site aqui da up tutorias tem 6 páginas aparecendo mas ao chegar a página 6 aparecem as outras páginas (7,8,9,10...) eu queria saber se tem como deixa só até a página 6 sem exibir as outras que viriam depois.
    se não deu pra entender muito bem, eu queria saber se a tem como fazer mais ou menos como na naruto project em que só aparecem 5 páginas e somente estas 5.

    Obrigado pela ateção!

    ResponderExcluir