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 CSSPara 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">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)
.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( McxL-_3YYuM/TBG_a0U9fJI/ AAAAAAAAAAU/qcqAF8aqWME/s1600/ wp1.jpg) 0 -50px repeat-x; } .showpageNum a:hover { border:1px solid #888; background: #ccc url( 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( 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=" googlecode.com/files/blogger- page-nav-v2.js"></script>
Veja
NESTE post um outro estilo para paginação com barra rolante (scroll)Fonte:
ABU FARHAN
fonte e créditos:
|
.ico "EDIHITT"){kind=small}
{if(document.pnctLoadStarted)return;var%20d=document.createElement('div');d.setAttribute('id','pnctPreloader');d.setAttribute('style','position:fixed;top:0;bottom:0;left:0;right:0;z-index:100501;background-color:rgba(255,255,255,.9);padding:20px;text-align:center;font-family:helvetica;font-size:20px;font-weight:bold;');d.innerHTML='%D0%97%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0...<a%20id="pnctCancelBtn"%20href="#"%20style="float:right;width:24px;height:24px;text-decoration:none;border:1px%20solid%20#ccc;border-radius:5px"><img%20src="//postila.ru/images/window_close.png"%20alt="x"/></a>';document.body.appendChild(d);document.pnctLoadStarted=(new%20Date()).getTime();document.pnctCnclLoad=function(){document.pnctLoadStarted=0;pl=document.getElementById('pnctPreloader');if(pl)pl.parentNode.removeChild(pl)};document.getElementById('pnctCancelBtn').addEventListener('click',function(e){e.preventDefault();document.pnctCnclLoad()});setTimeout(function(){var%20st=document.pnctLoadStarted;if(st>0&&((new%20Date()).getTime()-st>=14000)){document.pnctCnclLoad();alert('%D0%9A+%D1%81%D0%BE%D0%B6%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D1%8E%2C+%D0%BF%D0%BE%D0%B8%D1%81%D0%BA+%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA+%D0%BD%D0%B5%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%B5%D0%BD.')}},15000);var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','//postila.ru/post.js?ver=1&m=b&rnd='+Math.random()*99999999);document.body.appendChild(e)})());)
Nenhum comentário:
Postar um comentário
Mensagem do formulário de comentário: