13 de abr de 2010

Widget com postagens recentes com efeito slide

Eu tô mais perdida que cego em tiroteio, não sei nem mais o que já postei neste blog que está enoooooooooooooooooooooooorme... Se trata de um widget com os últimos posts de seu blog com efeito de slide. Veja AQUI o modelo.


 Bom, então como não sei posto mais uma vez esse widget. Basta copiar o código e colocar em uma HTML/Javascript e depois colocar o nome de seu blog no local indicado na cor rosa.



  • Claro que se você puder salvar os scripts em seu pc e depois hospeda-los em um servidor de sua preferência é bem melhor e bastante recomendado pois como sabemos o script poderá sobrecarregar a taxa de transferência do servidor e assim fazer com que o código simplesmente não funcione ;-)


Faça uma pequena mudança também no código que está na cor laranja é aí que você colocará seu widget do tamanho certo.


<script src="http://sites.google.com/site/postsrecentesslide/postsrecenteslide/jquery.min.js" type="text/javascript">

</script>
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 800;
var pause = 6500;
function removeFirst(){
first = $('ul#slide li:first').html();
$('ul#slide li:first')
.animate({opacity: 0.5}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#slide').append(last)
$('ul#slide li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
</script>
<style type="text/css">
#slide{
height:190px;
width:95%;
overflow:hidden;
border: 1px solid #C94093;
margin: auto;
padding:5px;
}
#slide li{
margin: 10px 0 0 0;
list-style:none;
}
#slide .news-title{
display:block;
text-align: center;
line-height: 10px;
color: #C94093;
}
#slide img{
float:left;
margin-right:2px;
padding:10px;
border:solid 1px #C94093;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "URL IMAGEN 1";
imgr[1] = "URL IMAGEN 2";
imgr[2] = "URL IMAGEN 3";
imgr[3] = "URL IMAGEN 4";
imgr[4] = "URL IMAGEN 5";
showRandomImg = true;
tablewidth = 950;
cellspacing = 1;
borderColor = "";
bgTD = "#ffffff";
imgwidth = 150;
imgheight = 150;
fntsize = 20;
acolor = "#808080";
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 300;
summaryFontsize = 15;
summaryColor = "#000000";
icon2 = " ";
numposts = 5;
label = "";
home_page = "http://NOME DE SEU BLOG AQUI.blogspot.com/";
</script>
<script src="http://sites.google.com/site/postsrecentesslide/postsrecenteslide/recentepostslide.js " type="text/javascript"></script>


19 comentários:

  1. eu não consegui implementar em meu blog, as imagens das postagens não aparecem... o q eu posso fazer?

    ResponderExcluir
  2. consegui! não graças a ajuda dos moderadores daqui... era só colocar nas configurações de feed, ao invés de sinopse, exibir feed completo.

    obrigado por nada

    ResponderExcluir
  3. Liks - DF , querida como vc é folgada, sem educação e mau acostumada. Aqui ninguém tem a obrigação de lhe servir ou de ir a seu socorro. Quer ajuda exclusiva ? Meta a mão em seu bolso e faça um depósito bancário para poder cobrar ajuda em tempo real.

    ResponderExcluir
  4. primeiro dirija-se a mim como "querido Folgado" e não "querida folgada" (apesar de não parecer eu sou homem) rsrs.

    mais me diz ai elke, custava pelo menos dizer que eu deveria desembolsar R$, não tô dizendo que você tenha obrigação de nada, mas um pouco de consideração com seus leitores aumenta sua credibilidade.

    levei dois meses pra receber uma resposta, e quando recebo é simplesmente uma patada.

    apesar eu não ter muito tempo disponível, sempre que posso forneço um feedback aos meus leitores.

    Afinal, o cliente tem sempre razão.
    e nós leitores somos os seus clientes.

    se vc não sabe, não quer dizer ou simplesmente não está nem ai, pelo menos responda assim podemos procurar uma resposta com quem se importe.

    Minha intenção não era ofender ninguem, apenas deixar claro minha insatisfação.

    ResponderExcluir
  5. Quem mandou não estudar ? Agora "gueeeeeeeeeeenta" !!!!

    ResponderExcluir
  6. Liga não Elke.Tem gente que não sabe agradecer a sorte de ter um blog como o seu que ajuda e muito aos blogueiros.Sou sua fã de carteirinha.

    ResponderExcluir
  7. Hahhaaha Vilma, obrigada pelo apoio...Sei que as vezes exagero mas sabe, sou humana, tenho altos e baixos, mais baixos que altos pra ser exata. Um dia entenderão meu humor ácido (se não entenderem também azar o meu) . Beijos.

    ResponderExcluir
  8. Olá Elke,

    primeiro muito bom o seu blog, grata por compartilhar conosco conhecimento útil.

    Bem, eu geralmente sempre consigo seguir seus tutoriais, mas dessa vez algo não está dando certo... No meu caso a imagem em relação a altura aparece cortado mais da metade.. E so aparece uma pequena fração superior.

    O que pode ser??

    Grata mais uma vez e sucesso!

    ResponderExcluir
  9. Apareceu certinho aqui pra mim.

    Só um problema, ele fica com todas as fotos embaixo do slide.

    Que que eu faço ?

    ResponderExcluir
  10. ola por um acaso vc saberia me dizer como faz um slide desses que vc tem ai em cima do blog sobre o resumo das postagens, queria o codigo, seria muita gentileza de sua parte, me envie para willianbahiamonteiro@bol.com.br, desde ja agradeço

    ResponderExcluir
  11. blog muito bom se as pessoas nao conseguem implementa e por que sao muito burras e so ler mais um pouco e bater cabeça agora ja querem codigo pronto ate com endereço da pagina ae e foda ne --'

    ResponderExcluir
  12. ola meu nome e ysneshy fiz um blogger esse aqui http://x3nab.blogspot.com mas quando emplemento seu slide meu outro slide do blog ele para de funciona e desaparece os botoes queria saber se existe uma maneira de resolver seu slide funciona mas interfere no outro slider do blog que para de funcionar queria ter os dois tem coomo ? ate troquei endereço hospedei outro luagar e alterei nome mas nada faz dois sliders funcionar

    ResponderExcluir
  13. Como posso tirar o negosio de posts recentes eu num queria que fica se aquilo!eu queria que ficase somente o seu link-me comigo,e vc poderia me ensinar a fazer um link-me?!

    ResponderExcluir
  14. ha!adoreiiii demais seu blog eu adicionei o seu blog no meu favoritos,muito muito dez com ele aprendi muito
    Parabens

    ResponderExcluir
  15. Oi Elke, você poderia me dizer por favor, como faço para aumentar a altura? Digo coloquei no cabeçalho,mas ficou bem fininho, mal dá pra ver o slide, tentei de tudo, mas como n saco nada de html resolvi pedir sua ajuda, pode ser?
    Beijão!

    ResponderExcluir
  16. Não está bem organizado, as letras acabam em baixo das imagens, como posso resolver isso?

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube