Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498464358
Vida do cache: 1498507558
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Widget

Widget Posts Recentes com Efeito Rotativo no Blogger

Você já viu aqui neste post, como incluir um widget que lista suas postagens recentes na sidebar.
O widget foi desenvolvido pelo Blogger Tricks, porém, eu consegui editar o widget original adicionando a ele um outro efeito, o que resultou em um widget com as últimas postagens do blog com efeito rotativo em forma de um pequeno slide onde mostra a lista de seus ultimos posts publicados no blog.


Se você quiser conferir o efeito veja aqui.

Se você quiser inclui-lo também em seu blog, vá no menu “layout” ? Clique em “Adicionar gadget” ? Escolha tipo ‘HTML/Javascript’.

Copie e cole o código abaixo:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#spywrapper {/*container geral*/
margin-top:5px;
padding:0px 0px;
height: 100%;
overflow: hidden;
position: relative;
}
#spywrapper ul{
width:auto;
overflow:hidden;
text-align:left;
padding: 0px auto 0;
margin:0px auto 0px;
}
#spywrapper li {
width:auto;
padding: 5px;
margin:0px 0px 6px 0px;
overflow: hidden;
background: #000; /*edite a cor de fundo*/
border:1px solid #B22222; /*edite cor da borda*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

#spywrapper li a {
text-decoration:none;
color:#fff; /*cor da fonte dos titulos*/
font-size:13px; /*Tamanho da fonte*/
text-align:justify;
height:30px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 5px 0px;
}
#spywrapper li img {
float:left;
margin-right:20px;
margin-top:5px;
margin-bottom:5px;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/-CWrZRsSmrk4/UCnHxw68iRI/AAAAAAAAALE/zmJehc16px0/s1600/icon.jpg";
imgr[1] = "http://3.bp.blogspot.com/-CWrZRsSmrk4/UCnHxw68iRI/AAAAAAAAALE/zmJehc16px0/s1600/icon.jpg";
imgr[2] = "http://3.bp.blogspot.com/-CWrZRsSmrk4/UCnHxw68iRI/AAAAAAAAALE/zmJehc16px0/s1600/icon.jpg";
imgr[3] = "http://3.bp.blogspot.com/-CWrZRsSmrk4/UCnHxw68iRI/AAAAAAAAALE/zmJehc16px0/s1600/icon.jpg";
imgr[4] = "http://3.bp.blogspot.com/-CWrZRsSmrk4/UCnHxw68iRI/AAAAAAAAALE/zmJehc16px0/s1600/icon.jpg";

showRandomImg = true;
boxwidth = 300;
cellspacing = 6;
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
asize = 1;
acolor = "#8B8989";
aBold = true;
text = "comentarios";
summaryPost = 40;
summaryFontsize = 13;
summaryColor = "#fff";
numposts = 10;
home_page = "ENDEREÇO-DO-SEU-BLOG";
limitspy=4
intervalspy=4000
</script>
<div id="spywrapper">
<script src="http://mundoblogger.webs.com/scripts/posts-recentes-rotativo.js"></script>
</div>

Você pode personalizar o widget de acordo com as cores do seu template para dar mais destaque e uma boa aparência.
Marquei as partes editaveis no código para facilitar, agora é só usar a imaginação.

Este widget só funciona no Blogger.

[alerta]Lembrando que, a funcionalidade deste script pode variar de acordo com o template.
Templates que possuem muitos scripts, acabam gerando “conflitos” entre si, por isso alguns arquivos javascript dão erro pra alguns, mas funcionam perfeitamente para outros.
Caso este script não funcione em seu blog, faça uma avaliação de quais realmente são mais necessários.
Para melhor entendimento, leia esta dica: “Por que alguns scripts não funcionam no meu blog”.
Só ative este recurso se você não estiver usando nenhum outro efeito com scriptaculous ou prototype, pois quando usados juntamente com o JQuery, no mesmo template, entram em conflito.[/alerta]

Artigo atualizado em ago/2012.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

37 Comentários

  1. Angelus disse:

    Oi, o widget está funcionando direito. Mas as imgens das postagens não estão aparecendo. Quando ponho o link de outro blog no código, as imagens aparecem.
    Eu nao sei ver qual o tipo de script para dizer onde está a incompatibilidade. Será que tem solução?
    Abraço.

    • Vanessa disse:

      Como vc pode verificar, isso não aconteceu no blog de testes que eu usei(veja blog Demo). Se tiver ocorrendo algum conflito de script só vc poderá saber, pois tem que ver quais os scripts que vc tem no seu template. Sendo assim, lamento, mas não tenho como te ajudar, de qualquer forma agradeço pelo comentário.

  2. .:: Nessa ::. disse:

    @Lina
    Não sei o que pode ter acontecido, pq eu verifiquei no blog de testes está aparecendo normalmente. Lamento,mas não tenho como te ajudar.

  3. Lina disse:

    Não ta dando certo!!! Eu modifiquei as cores pra ficar igual ao do meu template, isso deu certo, mas as imagens que aparecem não são as das postagens, são as imagens que aparecem nos favicon do bloguer não foi modificado. Eu já tentei mexer no lugar onde as imagens estão, mas não consegui. Já reinstalei e continuou o erro. O que eu faço?

    • Gielisee disse:

      Também não sei o que acontece, fiz do jeito que foi explicado, e no meu não aparece absolutamente nada.

      • Vanessa disse:

        Leia o aviso que tem no final do post que fala a respeito de conflitos de scripts, pode ser que seja isso. Lembrando que este widget só funciona no Blogger ok?

  4. Antonio Batalha disse:

    Quero agradecer, pelas dicas e por tudo o que pôe à dispusição dos blogueiros, coluquei esta minipulação e está muito bom.

  5. CASA CUTE disse:

    oi, fiz tudo certinho mas não aparece nada, só os créditos,preciso retirar ou mudar algum outro código além de colocar o endereço do meu blog? não tenho nenhum template diferente, só o do blogger mesmo…grata Rahyssa
    http://casa-cute.blogspot.com/

  6. deturistaaviajante.com disse:

    O meu não deu certo, que pena. Adorei o eleito.

  7. Gaby Oliveira disse:

    O meu não ficou com efeito rotativo, fora isso tá legal, mas oque será que aconteceu?

  8. .:: Clau ::. disse:

    Czar Download
    Sim, esse link são os créditos do widget e não podem ser retirados.Afinal de contas, me deu trabalho personalizá-lo completamente e disponibiliza-lo para vcs, então nada mais justo que os créditos se mantenham no widget.

  9. Czar Download disse:

    o unico defeito deste script e porque fika "BY mundoblogger" ai fika chato -.-

  10. TV ZORRA disse:

    Como faz para os links abrirem em outra página (href)??

  11. Alfa Universo disse:

    Muito Bom! Vou usar!

  12. [ADM]eglondurock disse:

    muito legal esse tutorial parabens^^

    tem como aumenta a largura dele?

  13. Twilight Lovers Brasil disse:

    Oii, bom eu tentei colocar no blog mais eu não sei o qe é a parte CONTAINER GERAL…. me explica??

  14. .:: Clau ::. disse:

    GeeH
    Valeu pela dica 😉

  15. GeeH disse:

    Dica: para retirar os comentários procure a tag ".spycomment" e adicione dentro das conchetes: "display: none;"

    eu fui adicionar este widget no Tumblr, e tbm queria ocultar os comentários, tentei via CSS ja que não entendo de JS, por sorte deu certo. fica a dica!!!

    Bjos Clau, se cuide =D

  16. carros-envenenados disse:

    Eu gostaria de ter, mas gerou conflito.
    Valeu =D

  17. Brasigrega disse:

    Não consegui colocar esse aplicativo em meu blog!

  18. -=|G¡äñ|=- disse:

    Outra dica que funfo legal no meu blog.

    VLW Clau

    um abaço e sucesso pra vc e seu site. XD

  19. Matheus Rezende disse:

    @clau quem quiser modificar a parte do numero de posts e so modificar isso limitspy=4

    onde 4 e o numero de posts no meu esta 2

  20. ::Clau:: disse:

    @Matheus Rezende:
    Tente alinhar as medidas em #spywrapper{

  21. Matheus Rezende disse:

    como faço para alinhar ele esta muito para o lado direito e queria que ficasse no centro

  22. Matheus Rezende disse:

    @Kakashi e so ver a cor do texto onde diz os comentarios e mudar para a cor do background do seu template

    se seu template for branco mude a cor para branco

  23. Fabio disse:

    Não ta funcionando pow q faço ? em

  24. ::Clau:: disse:

    @Os passatempo da Carracita:
    Pode ser conflito de scripts no seu template.
    Este widget utiliza script da biblioteca JQuery, e muitas vezes ele conflita com outros scripts já instalados.
    De inicio achei que o erro seria causado pelo fato do script estar hospedado no Google Sites, visto que em blogs que possuem domínio próprio, scripts hospedados no Google Sites NÃO funcionam, mas não é o seu caso.Acredito eu que seja a 1ª opção mesmo.

  25. Os passatempo da Carracita disse:

    Achei este widget interessante para colocar no meu blog, mas sei o que corre errado. Depois de salvar não funciona, não aparecem os posts.
    Experimentei o outro script de postagens recentes com imagens e este funcionou direitinho. Terá mesmo algum erro no script ou estou a esquecer de fazer uma alteração para alem do endereço do blog?

  26. meninadabahia.com.br disse:

    Clau, eu estou procurando um widget ultimos posts/mais vistos que nem do site eu maquio -> http://www.eumaquio.com/

    Qdo puder posta?? please, please, please.

  27. Kakashi disse:

    tudo bem, vou dar uma fusada e fazer uns testes se eu conseguir eu posto um comentario aqui lol
    seu blog é muito massa e tem me dado muitas dicas
    bjs gata

  28. ::Clau:: disse:

    @Kakashi:
    Não há como retirar. Esse widget funciona a base de script, somente quem tem um conhecimento bem avançado e souber editar arquivos javascript que poderia tentar retirar o que vc quer. Infelizmente não poderei te ajudar, sorry.

  29. Kakashi disse:

    como eu tiro os comentários (deixando só a imagem e o titulo do blog)

  30. ?Carla_Witch Princess? disse:

    Ai, que alívio!
    Voltou a funcionar, Clau.

  31. ?Carla_Witch Princess? disse:

    Clau, não sei o q aconteceu…
    O widget não está aparecendo mais…
    O código está lá, mas os títulos dos posts não aparecem…
    Help…
    Bjinhossssssssss

  32. ::Clau:: disse:

    Dead Again:
    Obrigada pelo comentário! O seu blog tb está de parabéns, adoro ir lá pegar umas discografias..=)

    Carla:
    Q bom q gostou…é pra usar mesmo…=)

    .::Clau::.

  33. ?Carla_Witch Princess? disse:

    Uau!
    Adorei esse widget!!!!
    Já tah lá no bloguinho… kkkkk…
    Show, Clau!
    Bjinhosssssssss

  34. Jeffrey Dead disse:

    Só passei mesmo para dar os parabéns pelo ótimo blog…….muito bom seu trabalho ^^

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.