Pular para o conteúdo principal

Paginação clean com css

Paginação com css

Já foi o tempo em que a paginação do seu blog/site eram aquelas simples setas, botões ou o simplesmente textos. Hoje o CSS os permite criar o que quisermos de forma simples e descomplicada.

O tutorial a seguir pode ser utilizado na páginação do blogger por exemplo.


Passo 1 – Corpo da paginação

Defina sua paginação no html


<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>

Passo 2 - Css


ul {
display:block;
font: bold 15px Arial, times, Serif;
}
ul li {
display: inline;
text-align: center;
}
ul li a {
border:3px solid #9b59b6;
color: #9b59b6;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
padding:10px 15px;
transition: all 0.3s linear;
}
ul li a:hover {
background: #9b59b6;
color:#fff;
}

O efeito de transição no preenchimento da paginação se deve a propriedade "transition". Agora é só aplicar em seus projetos.

Comentários

  1. Adorei, mas não entendi em que parte do HTML colocar o primeiro código :(

    ResponderExcluir
    Respostas
    1. Prezada,
      Na verdade esse seria um exemplo puro, em html apenas. Para adaptar ao blogger eu precisaria mexer com todos os demais códigos da plataforma. Estou preparando um novo, já adaptado ao blogger.

      Excluir

Postar um comentário

Postagens mais visitadas deste blog

Seleção brasileira iphone wallpapers

Em clima de despedida de copa, apresento o mais novo conjunto de wallpapers para o seu iphone. Vista a camisa e junte-se a nova seleção que ressurgirá.

Formulário de contato no blogger com o google docs

Como o blogger ainda não incluiu um formulário de contato nativo, temos que adaptar algumas maneiras para que isso seja feito. Há alguns tutoriais na web com widgets e serviços que funcionam de forma satisfatória, porém, neste tutorial, irei ensinar como usar o próprio google para realizar essa tarefa.Google docsO googledocs é uma suite de aplicativos assim como o Microsoft Office e o BrOffice (gratuito), com a vantagem de funcionar online direto do browser e de ser gratuito. 1º passoAcesse o site do Google docs e faça seu login. 2º passoClique em criar novo e selecione formulário. 3º passoNeste passo, iremos configurar nosso formulário. Entenda a estrutura e como irá funcionar: Nosso formulário terá 4 campos sendo eles: Nome, Email, Site e Mensagem. Os dois primeiros campos da imagem acima que eu não numerei são auto explicativos. Você define um título e se quiser um texto de informação sobre o formulário.1- Define o texto do campo. Deixe-o como nome. 2- Texto adicional, que po…

Crie um elegante menu com css e html

Neste tutorial você vai aprender como criar um elegante menu utilizando a dupla Html e Css em poucas linhas de códigos. Lembrando que o tutorial é voltado para o usuário iniciante, que está se aventurando como desenvolvedor front-end ou que desenvolve por hobbie.