Tweet Widget de Paginação Para Blogger

Vamos conhecer seis estilos de paginação disponibilizados por ABU FARHAN, para colocar abaixo dos posts na sua página principal. Esse recurso é bastante útil principalmente quando temos vários posts  porque permite que o leitor possa transitar pelo blog com maior rapidez, , ir e voltar para a página que mais o interessou.

Veja os modelos:

Estilos, demonstração e códigos disponibilizados:

 

* Estilo 1: Demo - Código CSS

* Estilo 2: Demo - Código CSS

* Estilo 3: Demo - Código CSS

* Estilo 4: Demo - Código CSS

* Estilo 5: Demo - Código CSS

* Estilo 6: Demo - Código CSS

 

Para inserir o widget é muito simples:

Faça login ► Clique em Design

Na sua pagina “Design” clique em “Adicionar um Gadget” e escolha um elemento “HTML/JavaScript” . Dentro dele você vai inserir o código CSS e o Script.

EXEMPLO: * Estilo 1 – Código CSS e Script

<style type="text/css">

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #000; text-shadow:0 1px 2px #fff; font-weight: 700; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; border:1px solid #999; -webkit-border-radius:3px;-moz-border-radius:3px; background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtw5MMUJ2Ny51cpQs0fiWHZZwuau6LpIlPLICYyQ6nX1K8nBANooikmYOLKZ25XsqI0dtmTs4DEceyBFdqo3kD6l-FuKDkZ1K2AN3jkPAtK4rt35W7fLFSaob5WnBAQvHJO0Dc4trYEz0/s1600/wp1.jpg) 0 -50px repeat-x; } .showpageNum a:hover { border:1px solid #888; background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtw5MMUJ2Ny51cpQs0fiWHZZwuau6LpIlPLICYyQ6nX1K8nBANooikmYOLKZ25XsqI0dtmTs4DEceyBFdqo3kD6l-FuKDkZ1K2AN3jkPAtK4rt35W7fLFSaob5WnBAQvHJO0Dc4trYEz0/s1600/wp1.jpg) 0 -25px repeat-x; } .showpageOf{ margin:0 8px 0 0; } .showpagePoint { color:#fff; text-shadow:0 1px 2px #333; padding: 3px 8px; margin: 2px; font-weight: 700; -webkit-border-radius:3px;-moz-border-radius:3px; border:1px solid #999; background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtw5MMUJ2Ny51cpQs0fiWHZZwuau6LpIlPLICYyQ6nX1K8nBANooikmYOLKZ25XsqI0dtmTs4DEceyBFdqo3kD6l-FuKDkZ1K2AN3jkPAtK4rt35W7fLFSaob5WnBAQvHJO0Dc4trYEz0/s1600/wp1.jpg) 0 0 repeat-x; text-decoration: none; }

</style>

 

<script style="text/javascript">var pageCount=15;var displayPageNum=15;var upPageWord="Previous";var downPageWord="Next";</script><script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js"></script>

Lá em cima, no começo do post, você pode escolher o estilo que mais combina com seu layout, copiar o código CSS respectivo. Repare que coloquei em negrito o código CSS do * Estilo 1. Substitua pelo que você escolher. (Não apague o script)

Veja NESTE post um outro estilo para paginação com barra rolante (scroll)

 

Fonte: ABU FARHAN

Leia mais...

Tweet Widget de Paginação com barra rolante (Scroll)

ATENÇÃO!
Atualização em  27/07/2010. 
*IMPORTANTE: Para  garantir o funcionamento no caso de problemas com a hospedagem do script, não esqueça de baixa-lo e guarda-lo em seus arquivos como está indicado no final deste post.

A widget de paginação numerada mais comum que vemos em sites e blogs tem essa aparência:

...............................

 ......................................

Esta que veremos aqui foi nossa querida @Gema nos apresentou. Criada por Abu Farhan , tem a mesma função mas com estilo diferente: Não mostra os quadradinhos de navegação nem o  “Pages (…)”. Ela apresenta uma linha com os números e um efeito deslizante (scroll) . Segundo seu criador, o mais importante é que ela pode apresentar mais de 500 postagens. Você poderá ver seu funcionamento na HOME deste blog.

Leia mais...