Tuga Design Web: Numeração de Páginas

Numeração de Páginas - Blogger

Boas, hoje vou ensinar como colocar numeração de páginas no blog. No blog temos a opção de definir o número de postagens por página, contudo não é possível colocar numeração, em vez disso aparece "Postagens mais antigas" e "Postagens recentes". Ao colocarmos numeração fica mais fácil para o leitor navegar em seu blog, e hoje vão aprender a colocar numeração.

Colocar numeração, em primeiro lugar vamos adicionar o script, este não foi feito por mim. Vamos a Template -> Editar HTML e pressionamos Ctrl + F

E adicionamos este script acima:

var perPage=7;

É o número de postagens, você deve definir consoante seu blog.

Estes números devem corresponder.

var numPages=6;

É o número de páginas que aparecerá no navegador.

Adicionado o script, vamos adicionar o CSS e este sim foi elaborado por mim com ajuda de geradores para melhor o aspeto do nosso numerador de páginas

Adicionamos este código acima de:

Que se encontro em Template -> Editar HTML, para encontrar pressionamos Ctrl + F

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 o nosso numerador de páginas para blog concluído. Espero que gostem, se quiserem outro design peçam nos comentários.

Ler Mais

Tuga Design Web

Tuga Design Web. Aprenda a como criar um blog na web. Tutoriais e dicas de como alterar o deisgn seu blogger. Monte um blog na Web com sucesso. E aprenda um pouco de design web!

Online

Unordered List

quinta-feira, 11 de setembro de 2014

Numeração de Páginas - Blogger

Seguidores

Mete like :3

Parcerias

Postagens Populares

Tags