Como fazer Apresentação de Slides com Banners

Vamos criar uma apresentação de slides com banners no seu blog, o código é um pouco longo, mas depois de instalar você verá que adicionar mais banners ou trocar os que já colocaram é muito simples de fazer é igual a mudar um banner comum. Já publicamos outro código pode ser utilizado para mostrar os banners deslizando pela pagina que também pode criar um bom efeito visual no seu blog.

Veja aqui uma demostração em nosso outro site com uma apresentação de slides com banners se você quiser ver o código em funcionamento, lá também poderá fazer o download dos arquivos javascript usados neste código.
Como fazer Apresentaçao de Slides com Banners
Para colocar esses slides no seu blog entre na pagina Designer (layout), clique para adicionar um gadget, escolha a opção HTML/javascript e cole o código abaixo:


<style type="text/css">
#slider {
width: 400px; /* Largura das as imagens */
height: 300px; /* Altura das as imagens */
position: relative;
overflow: hidden;
}
#sliderContent {
width: 150px; /* Largura das as imagens */
position: absolute;
top: 0px;
margin: 0px;
padding: 0px;
}
.sliderImage img{
width: 400px; /* Largura das as imagens */
height: 300px; /* Altura das as imagens */
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 100%;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {clear: both;}
.sliderImage span strong {font-size: 14px;}
.top {top: 0px;left: 0px;}
.bottom {bottom: 0px;left: 0px;}
ul { list-style-type: none;}
</style>
<script src='http://dl.getdropbox.com/u/1659986/jquery.js' type='text/javascript'></script>
<script src='http://dl.getdropbox.com/u/1659986/s3Slider.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000 /*Representa em milesimos de segundo o tempo de troca de imagem (neste caso temos 3 segundos)*/
});
});
</script>
<div id="slider">
<ul id="sliderContent">

<li class="sliderImage">
<a href="http://dicasparablogs.net"><img src="http://acessoriosparablogs.com.br/dicas/banneranime.gif" border="0"/>
<span class="top">Dicas</span></a>
</li>
<li class="sliderImage">
<a href="http://frasescurtas.com.br"><img src="http://acessoriosparablogs.com.br/dicas/dicas4.jpg" border="0"/>
<span class="top">Frases</span></a>
</li>

 
<div class="clear sliderImage"></div>
</ul>
</div>

Esse código é somente para banners(imagens e links) se para fazer o mesmo com postagens do blog temos outro código no tutorial sobre criar uma apresentação de slides com as postagens recentes do blog.

Veja que a parte final do código é igual qualquer HTML, portanto para trocar os banners ou usar mais só precisa colocar os códigos nesta parte, e claro troque também o endereço do site e o texto que aparece sobre ele:

<li class="sliderImage">
<a href="http://frasescurtas.com.br"><img src="http://acessoriosparablogs.com.br/dicas/dicas4.jpg" border="0"/>
<span class="top">Frases</span></a>
</li>

Mas alguns cuidados são necessários você deve usar banners todos do mesmo tamanho, porque se não forem iguais o código irá distorcê-los, então use um programa para editar as imagens antes de hospedar seus banners.

Outras partes importantes do código que você precisa alterar:

Para ajustar o tamanho da imagem procure esse trecho no código:
width: 400px;
height: 300px;
Ele aparece duas vezes então deve modificar para as dimensões das imagens que utilizará.

Tempo dos slides, isso você controla neste trecho: timeOut: 3000, basta mudar o valor, lembre que 3000 equivalem a 3 segundos, então deixe como desejar.

Mais uma coisa existe dois códigos javascripts que utilizados neste código que estão hospedados no site getdropbox.com:

<script src='http://dl.getdropbox.com/u/1659986/jquery.js' type='text/javascript'></script>
<script src='http://dl.getdropbox.com/u/1659986/s3Slider.js' type='text/javascript'></script>

Se quiser você pode baixar esses arquivos e hospedar você mesmo como já dissemos você pode baixa-los no link de nossa pagina de demonstração que está no inicio desta postagem, assim caso esses sejam deletados ou tenham algum problema você poderá substituí-los. Isso é útil principalmente por se tratar de um site de hospedagem grátis se muitos blogs usarem o mesmo arquivo ele pode ser apagado.
Related Posts with Thumbnails

Link desta Pagina

Compartilhe essa Página

126 comentários:

  1. OI retirei todas as postagens plagiadas do meu blog inclusive a do seu !
    da uma olha da lá !

    http://reidobloguinho.blogspot.com/2010/07/postagens-plagias-retiradas.html

    ResponderExcluir
  2. francinelson
    foi uma ótima iniciativa, afinal copiando postagens só consegue problemas com outros blogueiros e com o google, afinal o google não vai mostrar um blog que é denunciado por plagio.

    ResponderExcluir
  3. Fabiano,
    Adorei (mais uma vez) a dica! Aliás, tenho acompanhado várias dicas e tenho ficado bem satisfeita. Parabéns!
    Posso usar esse tipo de slide para textos?
    Grande beijo,
    Jackie

    ResponderExcluir
  4. Fabiano,
    Adorei (mais uma vez) a dica! Aliás, tenho acompanhado várias dicas e tenho ficado bem satisfeita. Parabéns!
    Posso usar esse tipo de slide para textos?
    Grande beijo,
    Jackie

    ResponderExcluir
  5. Fabiano,como sigo seu blog todos os dias deixo uma dúvida.Me deparo com pessoas mais idosas que não visualizam bem as letras do Blog.Como colocar um ícone para que a pessoa possa clicar e aumentar a fonte.Desde já agradeço e parabenizo pelo Blog.

    ResponderExcluir
  6. Sabe o que está havendo com os comments dos Bloggers?

    Não conseguimos comentar...

    ResponderExcluir
  7. Pat.
    deve ser um erro momentaneo no blogger, agora parece normal

    Jackie Freitas
    esse código é feito para imagens e textos, mas vou tentar separa-los para usar somente com imagens ou texto, assim que terminar publico aqui no Dicas para Blogs

    ResponderExcluir
  8. Olá, Fabiano Roberto!

    Gostaria de saber se existe alguma forma de editar os comentários no Blogger. No Wordpress (pelo menos, na versão paga) eu sei que existe essa função. Há como acoplar alguma coisa pra fazer tal função no Blogger?

    Aguardo resposta.

    Abraço!

    ResponderExcluir
  9. No meu blog os comentários não estão aparecendo na página inicial, só quando clico abre a "janela pop out" e aparece 7 comentários, por exemplo, e a confirmação vizual tbm não aperece. Sabe o que pode ser e como resolver?

    Ps..

    ResponderExcluir
  10. Victor Faria

    acho que não tem isso no blogger, só a opção apagar o comentário.

    Anônimo
    o blogger apresentou algumas falhas nos comentários, mas parece que está voltando ao normal

    ResponderExcluir
  11. OLÁ FABIANO EU COLOQUEI O CODIGO NO MEU BLOG MAS NÃO FUNCIONOU , E TAMBEM TE INDICO UM SITE BOM PARA SE COLOCAR BANNERS EM ROTAÇÃO EU USO NO MEU BLOG É O: banner.wmonline.com.br
    VISITE É GRATIS E VOÇE CRIA UMA CONTA RAPIDO E JÁ PODE COMEÇAR A COLOCAR SEUS BANNERS

    ResponderExcluir
  12. OLá Fabiano!

    Cara eu estava atrás disso há algum tempo. Quando abri meu e-mail e vi seu tutorial, festejei. A minha única dúvida é a seguinte: você fala no final que podemos baixar e hospedar os arquivos javascript em outro lugar, que não seja o getdropbox, como eu faço isso? Por exemplo, posso baixá-lo e hospedar no Google Docs, seria isso?

    Aguardo retorno, um abraço e parabéns pelo blog!!!

    ResponderExcluir
  13. ovendedordelivros.com.br
    seria isso sim pode hospedar em varios lugares o google sites, ou qualquer outro site que aceite esse formato de arquivo, não é necessário, mas é bom ter os arquivos guardados como opção, as vezes essas hospedagens grátis deletam arquivos e sem eles o resto do código não funciona.

    ResponderExcluir
  14. ooi eu sou lucas Araújo Dono do blog http://tuning-rio.blogspot.com

    Eu Gostaria de sabe se tem como tira a imagem do marcado do blog que fica do lado do slide ? Olha so la meu Blog
    http://tuning-rio.blogspot.com

    ResponderExcluir
  15. Lucas Araújo


    entre na pagina editar html e procure por

    .sidebar ul li {
    background:url("http://www.finatec.org.br/site/images/M_images/arrow.png") no-repeat 0px .25em;
    margin:0;
    padding:0 0 3px 16px;

    e apague background:url("http://www.finatec.org.br/site/images/M_images/arrow.png")

    depois diminua o numero 16px na ultima linha para tirar o espaço vazio, mas isso vai alterar seu marcadores também.

    ou pode criar um estilo assim no html do seu blog:

    #HTML3 ul li{background-image: none;padding: 0px;}

    veja mais aqui:

    Barra de rolagem em qualquer parte do blog

    ResponderExcluir
  16. Olá amigo adorei mesmo esta sua dica muito obrigado mesmo Flws


    Agora gostaria de saber pois sou novo nisto ainda sei que e noob este pergunta mais como faço para hospedar ou seja fazer o que foi dito aqui Pois usei o código funcionou mais não entendo nada ainda destas coisas falo sobre esta parte


    Citação:

    < s cr ipt src='http://dl.getdropbox.com/u/1659986/s3Slider.js' type='text/javascript'>

    Se quiser você pode baixar esses arquivos e hospedar você mesmo como já dissemos você pode baixa-los no link de nossa pagina de demonstração que está no inicio desta postagem, assim caso esses sejam deletados ou tenham algum problema você poderá substituí-los. Isso é útil principalmente por se tratar de um site de hospedagem grátis se muitos blogs usarem o mesmo arquivo ele pode ser apagado.

    ResponderExcluir
  17. Olá amigo adorei mesmo esta sua dica muito obrigado mesmo Flws


    Agora gostaria de saber pois sou novo nisto ainda sei que e noob este pergunta mais como faço para hospedar ou seja fazer o que foi dito aqui Pois usei o código funcionou mais não entendo nada ainda destas coisas falo sobre esta parte


    Citação:

    Se quiser você pode baixar esses arquivos e hospedar você mesmo como já dissemos você pode baixa-los no link de nossa pagina de demonstração que está no inicio desta postagem, assim caso esses sejam deletados ou tenham algum problema você poderá substituí-los. Isso é útil principalmente por se tratar de um site de hospedagem grátis se muitos blogs usarem o mesmo arquivo ele pode ser apagado.

    ResponderExcluir
  18. quero dizer para hospedar o arquivo em outro lugar, tem varias opçoes incluisive o google sites.

    quer dizer salvar os arquivos depois criar um conta num site de hospedagem, enviar os arquivos pra lá e usar esses arquivos no código.

    vou fazer um tutorial sobre hospedar arquivos, é muito complicado para explicar num comentáro

    ResponderExcluir
  19. as imagens você muda neste trecho:

    <li class="sliderImage">

    <a href="http://frasescurtas.com.br"><img src="http://acessoriosparablogs.com.br/dicas/dicas4.jpg" border="0"/>

    <span class="top">Frases</span></a>

    ResponderExcluir
  20. É o seguinte, quero colocar esse código coloco uma vez com as imagens e quando coloco em outro HTML, o que eu já tinha colocado no blog some, pq isso?

    ResponderExcluir
  21. Gibson Dantas
    não entendi direito seu problema, depois que colocou esse código não consegue editar os outros gadgets de html?

    ResponderExcluir
  22. Olá! Adorei a ideia desse banner... coloquei o código no meu blog, mas não funciona, pq será? deixei exatamente como tá aqui e só mudei as fotos =/

    ResponderExcluir
  23. só funciona em blogger ou em outros sites tbm?

    ResponderExcluir
  24. esse código é para funcionar com feeds, pode tentar com outros blogs também, mas não tenho certeza que funcionará .

    ResponderExcluir
  25. agradeço muito a ajuda de vcs, vcs ensinaram certinho, vlw.

    ResponderExcluir
  26. OLÁ FABIANO GOSTARIA DE UMA AJUDA SUA..INSTALEI ESSE SLIDE COM BANNER DE PARCERIAS DO MEU BLOG POREM AO CLICAR NO BANNER NAO ABRE A PAGINA DA MARCA E ABRE OUTRA PAGINA DO MEU BLOG DIZENDO Q DEU ERRO...TEM A OPÇÃO DE AO CLICAR ABRIR A PAGINA REFERENTE AO BANNER(A MARCA? OU É ASSIM MESMO? ME AJUDEEEEE...GRATAA...

    www.nesisnhacarina.blogspot.com

    ResponderExcluir
  27. Nêssinha Carvalho
    você colocou o http:// no endereço dos blogs parceiros? se não colocar isso certamente dá erro.

    ResponderExcluir
  28. NOSSA FABIANO FOI REALMENTE ISSO O TAL DO HTTP RSS....GRATA VIU,
    OLHA SÓ EU DIMINUI NESSE LUGAR width: 400px; /* Largura das as imagens */
    height: 300px; /* Altura das as imagens */
    position: relative;
    overflow: hidden;

    AS DIMENSÕES PARA Q AS IMAGENS DO BANNER FICASSEM MENOR MAIS NAO MUDOU NADA PQ SERÁ?

    ResponderExcluir
  29. essas medidas aparecem duas vezes, veja aqui também: .sliderImage img{
    width: 400px; /* Largura das as imagens */
    height: 300px;

    ResponderExcluir
  30. OLÁ FABIANO, OLHA SÓ AGORA JA CONSEGUI POREM SO TA ACEITANDO 2 BANNERS EU COLOQUEI 4 E NÃO MOSTRA OS 4 SÓ 2
    PQ SERÁ?
    TEM Q MUDAR ALGO P/ACEITAR VARIOS BANNERS?

    ResponderExcluir
  31. Nêssinha Carvalho, esse código aceita quantos banners você quiser, não sei pq está acontecendo isso, envie o código como está usando no blog para meu email e vou testar

    ResponderExcluir
  32. OLÁ FABIANO..AGORA TA TUDO CEDRTINHO.BRIGADÃO VIU...EU AJUSTEI AS IMAGENS TODAS DO MESMO TAMAMNHO, POREM AINDA FICARAM DISTORCIDAS, É MELHOR Q ELAS FIQUEM GRANDES OU PEQUENAS? MESMO ASSIM JA ESTOU SATISFEITA RSS..FOI O UNICO CODIGO Q CONSEGUI Q DESSE CERTO TODOS OS OUTROS Q TENTEI NAO DERAM CERTO, DESDE JA AGRADEÇO.
    OLHA LÁ COMO FICOU???(ainda está em construção)
    www.nessinhacarina.blogspot.com

    ResponderExcluir
  33. Olá Fabiano, estou montando um blog com alguns amigos, e estamos com um problema com essa apresentação de banner, montamos o código e colamos no nosso "blog de testes" e funcionou certinho, quando colamos no blog que estamos montado, o mesmo código, não funciona!!!
    Sabe dizer qual o motivo? sera q tem outro código interferindo?

    Valew... teu site é show, não sabemos nada de montar blog e html e essas coisas, e mesmo assim parece estar ficando legal o nosso blog!!!

    ResponderExcluir
  34. Olá Fabiano, descobri qual era o problema, o Blog não aceita dois códigos de apresentação de slides ao mesmo tempo, e eu jah tinha colocado um das "pastagens recentes".
    Agora gostaria de saber, tem alguma forma do blog passar a aceitar dois códigos ao mesmo tempo???

    valew...

    ResponderExcluir
  35. realmente se colocar muitos códigos no blog eles podem gerar conflitos(um atrapalha o outro)

    ResponderExcluir
  36. Meu email é edv.martins@uol.com.br e gostaria de saber se tem uma solução para colocar as fotos no blog sem precisar ficar arrastando ela do topo para lugar que eu quero.
    Toda vez que escrevo um artigo e coloco mais de uma foto, ela aparece no topo e não no lugar que eu coloco o cursor.
    Eu gostaria de não ter que ter este trabalho pois ele consome muito tempo.
    Vocês tem uma solução?
    Ed

    ResponderExcluir
  37. não tem jeito, quando você publica uma imagem na postagem do blog ela aparece no inicio da postagem, tem que arrastar ou copiar e colar o código em outra parte no lugar que você achar melhor.

    ResponderExcluir
  38. caro administrador, você poderia por acaso refazer esta postagem retirando ou incluindo alguns .js's? eu n sei mt como mexe com html.. so sei o basico para um blog sobrevivente kkkkk' mas ficou mt bom sua apresentaçao, sem complicaçoes como mudar o html de seu site, mas qndo eu coloco no meu, fica com ´tima visualizaçao no firefox, mas en outros sistemas como cgrome e IE a visualizaçao fica estranha, cortada.. poderia dar uma formatadinha em seus codigos para talvez melhorar a visualizaçao em outros navegadores q nao utilizem sistemas do firefox? mt obrigado pela atençao desde ja! sucesso

    ResponderExcluir
  39. esses codigos para slides são mesmo complicados, tem que usar javascript

    mas assim que encontrar algo mais simples vou publicar

    ResponderExcluir
  40. Bom, como no caso desse codigo vc colocar no html de adicionar um gadget eu suponho que a apresentação de slides vai aparece rna minha barra lateral ou em qualquer barra que eu coloque o gadget, certo?
    O problema é que eu queria colocar os slides no lugar do banner do meu blog que no caso tem que se mudar direto pelo html, então eu queria saber se não tinha jeito de aplicar esse código direto do html do blogger, por exemplo, se eu quiser alteral a imagem desse banner eu mudo o link aqui:

    #header1 { margin:0px;
    height:300px; float:left; width:500px;
    background: $bgcolor url("ENDEREÇO DO LINK");
    border: 2px solid $bordercolor;
    text-align: center;
    color:$pagetitlecolor;
    }

    não tem como eu mudar a imagem do banner pela seção de elementos da página do blogger, e por isso não teria como eu aplicar o código adicionando gadget. Entõ o que eu queria saber era isso mesmo que eu já perguntei, tem como aplicar esse códio direto no html do blogger

    ResponderExcluir
  41. você pode adicionar um gadget de html/javascript embaixo do seu banner e usar uma imagem de banner bem pequena ou mostrar o titulo do blog em forma de texto(excluindo a imagem do cabeçalho)

    ResponderExcluir
  42. É, eu cheguei a pensar nessa possibilidade também mas por fim acabei optando por fazer um gif, o efeito deu certo. Ainda assim esse código dos slides é bem interessante, obrigada ^^

    ResponderExcluir
  43. Como colocar o slide no meio não no canto...????
    responde na minha c-box do meu blog !!!!

    ResponderExcluir
  44. neste código não temos como alterar a posição da imagem

    ResponderExcluir
  45. Muito bom o blog já usei alguns códigos daqui rsrs
    To tendo um problema no meu código, coloquei o primeiro corretamente num novo gadget, e o código javascript coloquei junto com os outros scripts no editar HTML porém não estou conseguindo visualizar as rolagens, inicialmente ainda não modifiquei os links e fotos pois ainda nao sei se estaá certo...

    http://noiscompartilha.blogspot.com

    ResponderExcluir
  46. Dresper
    rolagens? o que está tentando fazer no seu blog? esse tutorial não fala sobre isso

    ResponderExcluir
  47. Fabiano preciso da sua ajuda se puder,olha estou tentando colocar uns selinhos que ganhei como apresentação de slides são uns 7 selos fiz todo o procedimento que ensinou com tamanho e tudo mas na hora de colocar os selos não aparecem todos e eu me perco muito na hora de colocar os links.
    Quantas imagens pode colocar?
    Será que poderia fazer um tuto em video por favor se não for pedir demais...

    ResponderExcluir
  48. ☂☂DrikaBello☂☂
    esse código não tem limite para quantidade de imagens, envie o código como está usando para meu email e vamos olhar..

    ResponderExcluir
  49. Olá Fabiano, Estou usando o código mas quando coloco no blog não aparece absolutamente nada. Vc sabe o pq?

    ResponderExcluir
  50. Mya Kaulitz
    provavelmente usou algum endereço errado nas imagens ou apagou algo no código que não deveria, envie o código como tentou usar para meu email e vou procurar o erro

    ResponderExcluir
  51. Oi Fabiano meu querido eu consegui,eu estava colocando o end das imagens tbm onde vai o link da url do site então estava dando erro ...
    Obrigada viu ,adoro passar aqui sempre tem novidades e estou deixando o meu blog muito legal com suas dicas..
    Obrigadão mesmo..
    Beziquinhos doces ...
    http://drikabello.blogspot.com/

    ResponderExcluir
  52. Olha , não sobre esse assunto , mas eu gostaria de saber como colocar uma imagem de fundo na sidebar . Eu vi num outro blog(www.planetclubpenguin.blogspot.com) , e gostaria de fazer algo parecido no meu ! Você pode me ajudar ?

    ResponderExcluir
  53. Luana
    veja aqui sobre Imagem no fundo do blog

    se usar o código no estilo #sidebar a imagem aparecerá somente no menu

    ResponderExcluir
  54. Oi Fabiano,

    > Consegui inserir os codigos e trocar o endereço de destino, apareceu tudo certinho.... Estava com o banner do meu parceiro há 1 semana... e hoje pela manhã notei que as imagens sumiram... fica um "X" no lugar... mas se clicar nele vai p/ o site de destino.... mas as imagens ñ aparecem... Penso q possa ser o tal arq de javascript mas não consigo alterar.... Pode me ajudar? Dá uma olhada no meu blog e ve como aparece... a imagem do bonequinha é outro parceiro... esse ñ tem slide (esta certo)!
    http://www.mamebebe.blogspot.com
    Estou no aguardo!
    Joyce

    ResponderExcluir
  55. se as imagens pararam de aparecer pode ser problema no site de hospedagem, veja se as imagens ainda funcionam....

    se não der certo terá que hospedar novamente

    ResponderExcluir
  56. Oi Fabiano, coloquei o codigo e ficou super show, adorei....isto no mozila.
    Quando abri o blog no explorer o slide show aparece só metade.
    Por favor voce poderia me ajudar...alguma dica para resolver este problema??
    Já estou muito grato pela ajuda, fiquei super feliz de ter conseguido fazer o slide show!!!
    abs
    Antonio
    http://viagemafora.blogspot.com/

    ResponderExcluir
  57. com a atualização dos navegadores alguns códigos derão problemas... vou pesquisar algum outro jeito de fazer os slides

    ResponderExcluir
  58. Olá! Achei muito bom!!! Uma pergunta, como faço para colocar um ao lado do outro? preciso colocar três slide deste um ao lado do outro e não concigo. Queria saber se dá para fazer isso.

    Grato!!!

    ResponderExcluir
  59. Ytschac benAvraham Soher

    veja esse tutoriail: Imagens Lado a Lado, Fazer Colunas nos Gadgets

    aqui fala de imagens, mas o código para fazer as colunas funciona com qualquer conteudo até slides

    ResponderExcluir
  60. olá gostaria de saber se tem como mudar a transção das imagens.

    ótimo tutorial abraço

    ResponderExcluir
  61. mocidadeluzdoentardecer
    só é possivel alterar a velocidade neste trecho:

    timeOut: 3000 /*Representa em milesimos de segundo o tempo de troca de imagem (neste caso temos 3 segundos)*/

    ResponderExcluir
  62. vlw pela ajuda so precisava disso vlw....

    ResponderExcluir
  63. alguém sabe como colocar fashvortex no blogger?

    ResponderExcluir
  64. R. Béssia
    o site dá um código pronto para colocar no blog...

    então é só entrar na pagina design e adicionar um gadget de html/javascript e colar o código

    ResponderExcluir
  65. Olá Fabiano, Gostaria de saber como faço para retirar o espaço entre o título do blog e o banner. Pode dá uma olhada no meu blog http://pacotetailandia.blogspot.com/

    Obrigado pela atenção.

    ResponderExcluir
  66. seria necessário fazer testes para descobrir o problema.... talvez seja o css que você colocou dentro da postagem... tente colocar essa parte depois do código das imagens... mas isso é um improviso...

    ResponderExcluir
  67. Ola Fabiano, aproveitei essa dica para fazer um slide normal, sem ter que clicar na foto para ir p/ alguma pagina, mas preciso saber onde deleto para nao aparecer a maozinha e nao da para clicar em sima da imagem.

    ResponderExcluir
  68. Ola Fabiano, aproveitei essa dica para fazer um slide normal, sem ter que clicar na foto para ir p/ alguma pagina, mas preciso saber onde deleto para nao aparecer a maozinha e nao da para clicar em sima da imagem.

    ResponderExcluir
  69. a base do código é feito para trabalhar com links... mas pode trocar o endereço pelo sinal # assim mesmo se clicar no link não acontece nada, assim:

    <a href="#".....

    ResponderExcluir
  70. Fabiano,
    muito bom o gadget!
    Só queria saber como faço para
    ou tirar a legenda
    ou diminuir o tamanho dela pois estou usando para os banners e o espaço da legenda ocupa a metade do tamanho do banner.

    Obrigado
    Bruno Thomaz

    ResponderExcluir
  71. Olá mutio obrigado pelo codigo, mas estou com um problema.
    Eu fiz um slide show pequeno sem problemas, mas agora quero fazer um com diemnsões de imagem 700x500, eu substitui os valores e mesmo assim as imagens continuam pequenas.

    Pode me ajudar!?!?

    ResponderExcluir
  72. veja no código se alterou todos os trechos: width eles são a largura

    ResponderExcluir
  73. Aleteri sim todos os trechos dê uma olhada como está ...

    Salvei no bloco de notas e postei no mediafire, baixe aí e me ajude a corrigir este problema por favor...

    http://www.mediafire.com/?zfql745g1n7qlmp

    Aguardo anciosamente!!!

    ResponderExcluir
  74. Tem mais uma coisa eu usei o programa WOW SLIDER e adorei, ele faz o slide perfeito pro que eu quero, ele também gera o html.

    Só que não sei como incorporar o slide em uma postagem do blog.

    Veja o programa:

    http://www.baixaki.com.br/mac/download/wow-slider.htm

    Se puder me ajudar nisto tbm eu agradeço...

    ResponderExcluir
  75. Moderador
    veja esse trecho do código:
    $(document).ready(function() {
    $('#slider').s3Slider({
    timeOut: 4000
    });
    });
    </script>


    os sinais }); aparecem duas vezes, mas no arquivo que usou como exemplo só tem uma vez... deve ser essa a causa do erro.

    ResponderExcluir
  76. Já fiz isso e troquei muitas outras coisas também, mas continuam pequenas a s imagens. não sei mais o que fazer!!!

    ResponderExcluir
  77. Observei que quando troco o li class="sliderImage" por li class=".sliderImage" as imagens ficam grandes mas perdem o efeito e ficam uma abaixo da outra sem ser slide...

    ResponderExcluir
  78. nos testes que fiz foi só alterar os valores no trecho

    .sliderImage img{
    width: 400px; /* Largura das as imagens */
    height: 300px; /* Altura das as imagens */
    }

    para mudar o tamanho da imagem

    ResponderExcluir
  79. É seria bom se pudesse incorporar o do WOW Slider, mas não tenho idéia de como fazer issso.

    valew pela ajuda kara...

    ResponderExcluir
  80. Olá amigo, parabens pelas dicas. tenho uma dúvida de como fazer a troca das fotos dos banner, não estou conseguindo, pois preciso colocar as fotos com o link para a materia sobre a foto (eventos). Aguardo.

    ResponderExcluir
  81. é no trecho final, precisa colocar o endereço de outras imagens, aqui:

    <li class="sliderImage">

    <a href="http://frasescurtas.com.br"><img src="http://acessoriosparablogs.com.br/dicas/dicas4.jpg" border="0"/>

    <span class="top">Frases</span></a>

    </li>


    e claro repetir esse trecho para cada imagem que desejar

    ResponderExcluir
  82. Deu ceto Porrraaaaa.
    Cara deu certo, eu tava luco.
    Porra meu tu é foda

    ResponderExcluir
  83. Nessa apresentação tem como colocar uma seta ou algo assim para alternar entre slides ? Obrigado.

    ResponderExcluir
  84. Ola! Como eu faço pra tirar as legendas ou pelo menos diminuí-la? No meu caso estou usando o código para apresentar banners de sites parceiros, mais a legenda atrapalha um pouco a visualização pois os banners que quero usar estão do tamanho de 75 de altura por 214 de largura. Fico no aguardo. Abraços

    Thyago Pinhead

    ResponderExcluir
  85. no codigo tem como alterar o tamanho da imagem

    width: 400px; /* Largura das as imagens */
    height: 300px; /* Altura das as imagens */
    }

    ResponderExcluir
  86. olá fabiano, gostaria de saber se há a possibilidade de colocar a escrita na parte de baixo e não em cima, já tentei mudar para bottom mas ai ele desaparece, desde já agradeço

    ResponderExcluir
  87. @Rodrigo Klinguelfus tente alterar essa linha

    .top {top: 0px;left: 0px;}

    deixe assim

    .top {bottom: 0px;left: 0px;}

    ResponderExcluir
  88. Olá. Estou tentando utilizar o código no meu blog, mas as imagens não andam aparecendo por completo (apenas até a parte onde a legenda desce) mesmo com as medidas certas do tamanho da imagem. Eu já mudei o site de hospedagem mas não adianta. O que pode estar acontecedo?
    (eu já havia utilizado esse codigo antes e havia dado certo)

    ResponderExcluir
  89. @Mandy se já utilizou antes e deu certo então deve ter faltado algum detalhe agora ou tem algum outro código gerando erro

    ResponderExcluir
  90. poxa Fabiano tem como colocar as setas para passar as imagens? ou um código q tem setas? porque se passa uma imagem o leitor terá que esperar passar todas para voltar a que ele queria ver! :/

    ResponderExcluir
  91. esse código não tem a opção de setas, mas estou pesquisando e testando outros que tenham as setas

    ResponderExcluir
  92. Oi Gostaria de saber se tem algo parecido mais só com imagens do picasa...

    ResponderExcluir
  93. Daniel Lira
    veja aqui: http://support.google.com/picasa/bin/answer.py?hl=pt-BR&answer=19533

    mas nunca testei os slides do picasa.

    ResponderExcluir
  94. queria saber como fes queles que as palavras aparecem como?

    ResponderExcluir
  95. o texto é nesta linha onde escrevemos frases, veja que na outra parte do codigo está escrito dicas mas o resto é igual

    < span class="top" >Frases< /span >< /a >

    ResponderExcluir
  96. Ola fabiano!!!
    poxa me ajude num problema, coloquei esse slide tudo certo..perfeito. Porém o meu slide principal do meu template simplesmente fica parado!! Me deu a impressão que só um dos slides podem rodar? é isso mesmo? Você sabe o que pode ter ocorrido?
    depois que tipo esse slide, então o meu slide principal volta a funcionar !

    desde já agradeço se puder me ajudar!!
    aquele abração e fique com DEUS

    ResponderExcluir
  97. Rogerio Rocha se você já tem outro slide funcionando no blog é possivel o código deles gerar erros quando estão juntos.

    se for esse o caso seria precisa reescrever um código trocando todos os nomes de estilos e nomes de javascript

    ResponderExcluir
  98. Ola fabiano mais uma vez obrigado por responder de forma tão rápida...é só que não entendo, afinal meu slide principal está no corpo do template, já esse novo slide que eu inseri eu usei a opção adicionar uma "gadget html", por isso que não entendi o porque de apenas um deles funcionarem..mas se tiver que trocar os códigos você diz desse slide aqui ou o meu? e como farei essa troca?

    mais uma vez desde já agradeço...

    ResponderExcluir
  99. na pagina layout tem adicionar gadget e quando clica tem varias opções de gadgets inclusive um que é html/javascript que é um gadget para colocar codigos

    ResponderExcluir
  100. nao conssegui apareceu o slide de vçs cocpiei mas onde coloco o meu endereço

    ResponderExcluir
  101. ENTRETENIMENTO composiçoes

    veja esse trecho:

    <li class="sliderImage">

    <a href="http://dicasparablogs.net"><img src="http://acessoriosparablogs.com.br/dicas/banneranime.gif" border="0"/>

    <span class="top">Dicas</span></a>

    </li>

    esse é o código de cada imagem e link, então só precisa trocar os endereços.

    ResponderExcluir
  102. Só tenho uma coisa a dizer... muito obrigado, depois de dois dias de trabalho exaustivo de pesquisa e tentativas de por um slid no blog, achei esta postagem que resolveu o meu problema. Que Deus lhe abençoe sempre. Estamos juntos.

    ResponderExcluir
  103. Eu gostaria de fazer isto com os banner dos sites / blogs que fasso parceria você não tem uma dica destas no seu site falando sobre isso?

    ResponderExcluir
  104. mas esse código já é para usar com banners

    ResponderExcluir
  105. olha e dificil ficar editando essas coisas!!

    ResponderExcluir
  106. este código esta com problemas será vc pode arrumar preciso muito destes códigos...

    ResponderExcluir
  107. o problema é que o código está correto e funciona bem fora do blogger.

    tem algo em alguns templates gerando o erro e não tem como corrigir

    ResponderExcluir
  108. Show d bola! mas, tem como tirar a tarja q desce com a Frase ???

    ResponderExcluir
  109. só precisa retirar a linha

    < span class="top" >Frases< /span > < /a >

    ResponderExcluir
  110. Fabiano,
    Cidade web,acabou?
    Cliquei na postagem barra deslizando e não aparece cidade web.
    Copiei este código aqui,vou testar.
    Obrigada valeu,beijos

    ResponderExcluir
  111. o cidadeweb parou de funcionar faz algum tempo...

    mas era somente um site para testes.

    ResponderExcluir
  112. Eu não consegui fazer ele funcionar,em outros widgets,apenas funcionou eu um!
    Eu queria colocar em 4 widgets no rodapé do blog.

    ResponderExcluir
  113. Léo Elias seria mais facil colocar um gadget de html/javascript e criar colunas nele com html e css.

    Se quiser testar o código é assim:

    <div style="float:left; width:24%">conteudo aqui</div>

    <div style="float:left; width:24%">conteudo aqui</div>

    <div style="float:left; width:24%">conteudo aqui</div>

    <div style="float:left; width:24%">conteudo aqui</div>

    para dividir em 4 gadget precisa modificar o html do seu blog, mas não tenho código pronto para isso.... então o jeito seria adaptar esse código do cabeçalho

    Dividir Cabeçalho do Blogger em Dois – Design do Modelo

    ResponderExcluir
  114. EI CARA eu estava a procura de um banner desse tipo,
    vou te dizer q procurei muito mas não achava um ideal para meu site,e depois de procurar muito e quase desistir, eu achei este, é OTIMO parabens pelo seu trabalhoABS

    ResponderExcluir
  115. Boa noite! O código deixou de funcionar, acho que porque não está mais achando os dois códigos javascripts que utilizados neste código que estavam hospedados no site getdropbox.com não estão mais acessíveis. Você teria como ajustar ou disponibilizar esses códigos? Essa apresentação é muito boa e não consigo mais usá-la! Muito obrigado!

    ResponderExcluir
  116. Adriano vou verificar, mas se o javascript foi mesmo apagado não tem como recuperar

    ResponderExcluir
  117. OLÁ AMIGO REALMENTE É UM OTIMO SLIDE PARA PUBLICIDADE MAS INFELIZMENTE PAROU DE FUNFAR.SE TIVER OUTRO COMPARAVEL OU MELHOR DEIXE NO SITE Q EU TO SEMPRE VOLTANDO PRA VER AS NOVIDADES OBRIGADO.

    ResponderExcluir
  118. Boa noite Fabiano, me dá uma ajuda!
    Fiz num blog de teste e funcionou normalmente, mas no meu blog atual não apareceu nada! Ficou o espaço em branco como se houvesse alguma coisa lá, mas na verdade nada aparece.
    Sabe me dizer onde tenho que configurar para que esse slide venha a funcionar no meu blog atual?
    Obrigada!

    ResponderExcluir
  119. Cristina Boldi o feed deste outro blog está funcionando corretamente?

    qual o endereço do blog que deu erro?

    ResponderExcluir
  120. Deus te abençõe! Funcionou 100% ! Valeu msm!

    ResponderExcluir
  121. Não funciona com mais de duas imagens?

    ResponderExcluir
  122. para usar mais imagens apenas repita esse trecho do código:

    <li class="sliderImage">

    <a href="http://frasescurtas.com.br"><img src="http://acessoriosparablogs.com.br/dicas/dicas4.jpg" border="0"/>

    <span class="top">Frases</span></a>

    </li>

    ResponderExcluir