Sobre o Blog

MamanunesO Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade.

Info

26.8.10

image

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:

image

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

image

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.

image

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(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -50px repeat-x; } .showpageNum a:hover { border:1px solid #888; background: #ccc url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/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(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/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

8 comentários

Ana Karenina

oi Mama

Adorei esta dica, já coloquei no meu blog, adoro estes códigos mais simples que é só colar no em algum gadget do blog e pronto já funciona como mágica, ainda mais pra mim que não sabe inglês e nada de html ajuda bastante.

Este gadget realmente ajuda muito os leitores principalmente na hora de fazer pesquisas no blog.

Muitos obrigada, traga sempre estas novidades pra gente, adoramos :)

Bjs

MamaNunes

@Ana Karenina
Obrigada pelo carinho Ana. Fico feliz por publicar algo útil.
Beijooo

Arierom

Oi Mama,

este funcionou 110%! Fiz uma "acertos" no ".js" e "text/css". Ficou muito bom mesmo! Obrigado pela dica! ;)

Beijo do @Herege!

Anônimo

Aprendi muito

Testes do trechy teen

Olá adorei a dica e funcionou mas quando eu vou passando as páginas ( mesmo que eu tenha colocado para aparecer apenas 8 opções de clics , vai aumentando os botões , como faço para deixar apenas : 1 2 3 4 5 6 next

Kieronny

não funcionou, se eu te mandar uma permissão você coloca pra me ?

O Curiooso

Muito Bom!!!!

Já Instalei em meu blog (com pequenas alterações no código)

http://ocuriooso.blogspot.com

Ótima Postagem!!!

Abraços.

Claudio Junior de Oliveira Fabião

Poxa, queria inserir o efeito de paginação no meu blog mais o site ao qual o seu blog está direcionando foi contaminado por malware, pelo menos é isso que diz o Google Chrome...
Não acessei o site, vou acessar depois com mais segurança, mas recomendo que você mude o modo de exibição do demo, e a forma de ter acesso ao código CSS.
Mas mesmo assim é um bom post!

Postar um comentário

Caso queira informações mais detalhadas, ou encomendar um template personalizado, use o Formulário de Contato ou meu Email. Responderei o mais breve possível.
Obrigada.