Numeração de Páginas no Blogger - Uncomplicated Works

Numeração de Páginas Blogger

Boas pessoal! Bem-vindos a mais um tutorial do Blogger Uncomplicated Works, e hoje irei ensinar como colocar numeração de páginas no blogger. No blogger podemos definir o número de postagens por página, contudo se não aplicarmos nenhum código apenas irá aparecer postagens antigas, ao colocarmos a numeração no blogger o leitor poderá navegar de uma forma mais simples pelo nosso blog. Então vamos aprender a colocar numeração de páginas no blogger. 

A primeira etapa para instalarmos a numeração de página no blogger é inserirmos um script, para isso pressionamos CTRL + F e pesquisamos por </body> depois de encontrar adicionamos este script acima:

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<script type='text/javascript'>

  /*<![CDATA[*/

    var perPage=7;

    var numPages=6;

    var firstText ='Primeiro';

    var lastText ='Último';

    var prevText ='« Anterior';

    var nextText ='Seguinte »';

    var urlactivepage=location.href;

    var home_page="/";

  /*]]>*/

</script>

  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>

</b:if>

</b:if>

var perPage=7; é o número de mensagens na primeira página definidas no seu blogger

Numeração de Páginas - Blogger

Os valores devem ser os mesmos.

var numPages=6; é o número de páginas que irá aparecer no numerador de páginas.

Agora vamos adicionar o código css para melhorarmos o aspeto do nosso numerador de páginas, para isso pressionamos CTRL + F e pesquisamos por ]]></b:skin> e antes disso vamos colocar os códigos desejados:

1º Menu

.pagecurrent { text-decoration: none; background-color: #FF7B01; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…AiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+); background-image: -webkit-gradient(linear, 0% 0%, 100% 100%,color-stop(0, rgb(172, 79, 79)),color-stop(1, rgb(254, 244, 150))); background-image: -webkit-repeating-linear-gradient(top left,rgb(172, 79, 79) 0%,rgb(254, 244, 150) 100%); background-image: repeating-linear-gradient(to bottom right,rgb(172, 79, 79) 0%,rgb(254, 244, 150) 100%); background-image: -ms-repeating-linear-gradient(top left,rgb(172, 79, 79) 0%,rgb(254, 244, 150) 100%); border-top: 5px solid rgb(254, 244, 150); } .displaypageNum a:hover, .showpage a:hover { text-decoration: none; background-color: #FF7B01; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…AiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+); background-image: -webkit-gradient(linear, 0% 0%, 100% 100%,color-stop(0, rgb(172, 79, 79)),color-stop(1, rgb(254, 244, 150))); background-image: -webkit-repeating-linear-gradient(top left,rgb(172, 79, 79) 0%,rgb(254, 244, 150) 100%); background-image: repeating-linear-gradient(to bottom right,rgb(172, 79, 79) 0%,rgb(254, 244, 150) 100%); background-image: -ms-repeating-linear-gradient(top left,rgb(172, 79, 79) 0%,rgb(254, 244, 150) 100%); border-top: 5px solid rgb(254, 244, 150); border-bottom-right-radius: 1em; border-bottom-left-radius: 1px; } .displaypageNum a, .showpage a, .pagecurrent { padding: 5px 10px; margin-right: 5px; color: #3C3737; background-color: #404042; -webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53); -moz-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53); box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53); background-color: #d5a273; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…AiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+); background-image: -webkit-gradient(linear, 0% 0%, 100% 100%,color-stop(0, rgb(254, 244, 150)),color-stop(1, rgb(172, 79, 79))); background-image: -webkit-repeating-linear-gradient(top left,rgb(254, 244, 150) 0%,rgb(172, 79, 79) 100%); background-image: repeating-linear-gradient(to bottom right,rgb(254, 244, 150) 0%,rgb(172, 79, 79) 100%); background-image: -ms-repeating-linear-gradient(top left,rgb(254, 244, 150) 0%,rgb(172, 79, 79) 100%); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.2s ease; }

2º Menu

.displaypageNum a:hover, .showpage a:hover, .pagecurrent { text-decoration: none; color: wheat; background: rgb(69,72,77); background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); border-bottom: 5px solid wheat; border-radius: 5px; } .displaypageNum a, .showpage a, .pagecurrent { padding: 5px 10px; margin-right: 5px; color: wheat; background-color: #404042; -webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53); -moz-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53); box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53); background: #7d7e7d; background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.2s ease; }

Feito isto, temos a numeração de páginas implementadas no nosso blog, espero que tenham gostado do tutorial do Uncomplicated Works, e se tiverem alguma dúvida sobre como colocar numeração de página no blogger deixem nos comentários. Hoje aprendemos a colocar numeração de página no blogger.