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

19.3.10

image 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:
...............................
image
 ......................................
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.

image Vamos ao tutorial:

Vá em “Layout” ► “Editar HTML ► e
 ANTES/ACIMA da tag ]]></b:skin> coloque o segunte código CSS:
.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://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/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;
}

Depois procure pela tag </body> no final do template e cole o seguinte código (Script)
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'/>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
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'/>

Pronto ele já estará funcionando perfeitamente.

Mudanças de estilo que poderemos fazer, dentro do código CSS:

Mudar a cor da linha deslizante :
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24; /* Mudar  o código da cor */
}
Background da numeração da página onde estamos:


.paginator span strong {
background:#ff6c24; /*Mudar o código da cor*/
font-style:normal;
font-weight:normal;
}
Mudar a cor dos números
.paginator span {
display:block;
padding:3px 0;
color:#fff; /* Mudar a do número*/
}

Mudar a linha cinza
.paginator .scroll_trough {
width:100%;height:3px;
background:#ccc; /* Mudar a cor */
overflow:hidden;
}
A imagem (setinha) pode ser mudada. É recomendável hospedar em seu proprio blog ou em um site tipo Tinypic para garantir que ela continue lá =)
.paginator .scroll_knob {
http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif)

*IMPORTANTE: No final do script vemos um outro script que convém descarregar e guardar para o caso de haver algum problema com o site de hospedagem e ele parar de funcionar. Teremos que hospeda-lo em outro site e trocar o endereço.

1 - Copie o endereço abaixo e cole no seu navegador
2- Faça o download para seu PC .
3- Hospede o script em um site de sua preferencia.
Leia ► “Sites de Hospedagem de Arquivos” da Rô Zancheta.

http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js
 ..............................................


image
 .....................................
Fonte: @Gemablog (Espanhol)

13 comentários

alezandri

[Deu erro a tentar enviar o comentário antes, vamos ver se agora dá :) ]

Olá MamaNunes, a 1ª opção mais usual nunca consegui instalar, vamos ver se esta agora vai dar.

É muito interessante e original, ficaria mesmo bem com as cores do diaexotico ;D

Abraço.

alezandri

Mais uma vez não deu, deve ser algum script que pode estar a encrencar... a ver se entretanto descubro.

MamaNunes

Oi Alezandri.
Me diga que erro o Blogger aponta. Talvez tenha que fechar o sript com a tag </script>
Quem sabe?

alezandri

Olá MamaNunes! E Feliz Dia do Blogueiro :)

Não dá nenhum erro, simplesmente não aparece. Já experimentei colocar o script em outros locais em vez de ser antes de /body, mas ficou igual.

Deve ser qualquer incompatibilidade que ainda não descobri... ainda... porque hei-de dar com ela :)

Obrigado pela Sua Atenção. Agora tenho que ir fabricar uma anedota...

Feliz Final de Semana! Com um Forte Abraço.

Thereza

Muito rápido e fácil, ótima explicação!Já adotei no meu!Obrigada!

Arierom

Mamanunes,
no meu estranho templete, só aparecem os números, seja no modelo original acima ou mudando as cores, creio ser da minha personalização toda branca de alguns detalhes.
Devido aos problemas de paginação do Blogger, tenho que deixar o mesmo número de artigos por página no [var postperpage], se não esconde o que for a mais na próxima página. Ainda procurando desnegritar os comments!
Abraços

Arierom

Ps:
Hospedei outra setinha "24x24.gif" mas não aparece também...
[ ]'s

MamaNunes

Thereza!

Que bom! Se deu certo avisa a gente, porque para alguns tremplates, não funciona :(

Arieron
Os códigos desses novos modelos do Blogger ainda são um mistério pra mim. Espero que a gente descubra como mexer com eles.

Abraços

TJ ®

MamaNunes, aqui parece que está tudo OK.

Testado e aprovado.

O blog LPV agradece.

Keep blogging.
Mais sucesso.
TJ do loucosporvirtude | @loucos_virtude

Giuliana Motyczka

Coloquei o widget no meu blog e assim que instalei, ele ficou normal, na cor laranja e aparecendo a barrinha de rolagem cinza e a setinha embaixo. Depois que personalizei mais de duas vezes, a barra cinza e a setinha simplesmente sumiram. Mantive o widget no blog na esperança de que ele volte a funcionar normalmente e também porque é o único widget de paginação que encontrei que realmente funcionou! Se puder dar uma olhada no meu código pra ver se há realmente algo de errado ou não, agradecerei. Ah, e obrigada pelo tutorial, muito bom.

mania geeks

" funciona blzinha , o que ocorre é q algum efeitos vc ñ consegue ver em " visualizar " vc tem que salvar pra dar certo ... Boa Mama !! XD "

Di web

Acho lindoooo esse widget!
Obrigada, deu certinho aki:)

Anônimo

To avoіԁ this, it iѕ highly гeсοmmendеԁ thаt lаtеx glоveѕ be worn ѕo aѕ to takе out all the гіskу еlements іn
геgards to ѕafety and cleanliness.
In faсt, nowadayѕ, ωe also have nail parlοrѕ, thаt give
a beautiful maniсure pluѕ а soοthing
massage to the fingerѕ and hands. The first 11 weеks
wеrе so сhaοtic, κidѕ wегe lіteгally hidіng unԁer tableѕ
and spіnning around in ciгcles, hаll recalls, then whіspers:
then all of a suԁdеn theу
start cοming tοgеther aѕ a group.
.. Thіs massagе theгaρy is іnԁeed well-likеԁ that
many ρerѕοns avaіl it іn pгivatе settings,
foг exаmрle in home baѕed perіοԁs.
Within the cоurѕе of the mіng ԁуnaѕtу (1368-1644),
pеdiаtric maѕѕage thеrapy or tuinа eνοlvеd
into a higher form of therapy whісh is ѕtіll appliеԁ nowаdays!
! Don't forget electrode prep products like creams, solutions and gels for your ecg, tens and defibrillation equipment.. The therapeutic massage therapy sydney also has a sanguine effect on your blood pressures. Repeat the process on your other thigh.

my web-site :: Tantric Massage London
Feel free to visit my webpage - sensual massage in London

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.