Widget de paginação Paginator3000 animado para Blogger
Olá amigos blogueiros! Todos sabemos da importância da usabilidade na
hora de navegar por um website. Não só o google gostará de sua atitude,
como os próprios leitores também gostarão mais da página e você terá
mais chances de ver sua taxa de rejeição diminuir.
Pois bem, uma das formas inevitáveis e essenciais de melhorar a acessibilidade e usabilidade do seu blog é possuir paginação (de preferência numérica), pois permite que, de forma super facilitada, os leitores e novos visitantes possam navegar por seus posts mais antigos e assim aumentar a taxa de fidelização e o número de páginas vistas por visitante único.
Hoje trago um super widget, produzido e desenvolvido por Abu Farhan, sob o nome de Paginator3000, que possui um design animado bastante interessante e dinâmico, possibilitando uma fácil e simples personalização!
Pois bem, uma das formas inevitáveis e essenciais de melhorar a acessibilidade e usabilidade do seu blog é possuir paginação (de preferência numérica), pois permite que, de forma super facilitada, os leitores e novos visitantes possam navegar por seus posts mais antigos e assim aumentar a taxa de fidelização e o número de páginas vistas por visitante único.
Hoje trago um super widget, produzido e desenvolvido por Abu Farhan, sob o nome de Paginator3000, que possui um design animado bastante interessante e dinâmico, possibilitando uma fácil e simples personalização!
Instalando no blogger:
1º – Vá na aba Editar HTML, depois de escolher a opção Expandir modelos de widget, procure por:
></b:skin>
></b:skin>
2º – De seguida, imediatamente ANTES/ACIMA do excerto acima referido, adicione este código:
.paginator { margin-top:60px; font-size:1em; } .paginator table {
border-collapse:collapse; table-layout:fixed; width:100%; } .paginator
table td { padding:0; white-space:nowrap; text-align:center; }
.paginator span { display:block; padding:3px 0; color:#fff; } .paginator
span strong, .paginator span a { padding:2px 6px; } .paginator span
strong { background:#ff6c24; font-style:normal; font-weight:normal; }
.paginator .scroll_bar { width:100%; height:20px; position:relative;
margin-top:10px; } .paginator .scroll_trough { width:100%; height:3px;
background:#ccc; overflow:hidden; } .paginator .scroll_thumb {
position:absolute; z-index:2; width:0; height:3px; top:0; left:0;
font-size:1px; background:#363636; } .paginator .scroll_knob {
position:absolute; top:-5px; left:50%; margin-left:-10px; width:20px;
height:20px; overflow:hidden;
background:url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/tAE1hAOX6Ys/s1600/slider_knob.gif)
no-repeat 50% 50%; cursor:pointer; cursor:hand; } .paginator
.current_page_mark { position:absolute; z-index:1; top:0; left:0;
width:0; height:3px; overflow:hidden; background:#ff6c24; } .fullsize
.scroll_thumb { display:none; } .paginator_pages { width:600px;
text-align:right; font-size:0.8em; color:#808080; margin-top:-10px; }
3º -De seguida, vamos aplicar o Javascript. Para tal, procure por:
</body>
4º – Imediatamente ANTES/ACIMA, adicione o seguinte código:
<script
src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js'
type='text/javascript'></script> <script
type='text/javascript'> var home_page="/"; var
urlactivepage=location.href; var postperpage=7; var numshowpage=6;
</script> <script
src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js'
type='text/javascript'/>
Nota: Poderá editar o número de posts por página
trocando o número 7 da parte negritada azul por outro da sua
preferência. Pode ainda alterar o número limite de números presentes na paginação por página, alterando o número 6 por outro de sua preferência na parte negritada a vermelho.
Este foi o tutorial de hoje. Qualquer dúvida basta deixar nos comentários, estaremos cá para o ajudar!
0 Comentários