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
Como fazer Apresentação de Slides com Banners
4/ 5
Oleh

133 Comentários

5 de julho de 2010 16:22 delete

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

Reply
5 de julho de 2010 16:25 delete

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.

Reply
5 de julho de 2010 18:56 delete

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

Reply
5 de julho de 2010 18:56 delete

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

Reply
6 de julho de 2010 09:53 delete

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.

Reply
6 de julho de 2010 11:37 delete

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

Não conseguimos comentar...

Reply
6 de julho de 2010 14:53 delete

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

Reply
6 de julho de 2010 21:54 delete

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!

Reply
Anônimo
7 de julho de 2010 12:29 delete

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

Reply
7 de julho de 2010 14:51 delete

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

Reply
7 de julho de 2010 21:33 delete

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

Reply
7 de julho de 2010 22:08 delete

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!!!

Reply
8 de julho de 2010 15:38 delete

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.

Reply
12 de julho de 2010 16:08 delete

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

Reply
12 de julho de 2010 16:19 delete

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

Reply
26 de julho de 2010 17:25 delete

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.

Reply
26 de julho de 2010 17:27 delete

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.

Reply
27 de julho de 2010 14:34 delete

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

Reply
8 de agosto de 2010 14:14 delete

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>

Reply
12 de agosto de 2010 01:34 delete

É 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?

Reply
12 de agosto de 2010 15:03 delete

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

Reply
Aninha
24 de agosto de 2010 02:01 delete

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 =/

Reply
Aninha
24 de agosto de 2010 02:15 delete

só funciona em blogger ou em outros sites tbm?

Reply
24 de agosto de 2010 14:01 delete

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

Reply
1 de setembro de 2010 15:14 delete

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

Reply
10 de setembro de 2010 23:53 delete

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

Reply
11 de setembro de 2010 00:34 delete

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

Reply
11 de setembro de 2010 21:26 delete

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Á?

Reply
11 de setembro de 2010 21:40 delete

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

Reply
11 de setembro de 2010 23:13 delete

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?

Reply
11 de setembro de 2010 23:43 delete

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

Reply
12 de setembro de 2010 14:01 delete

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

Reply
19 de setembro de 2010 18:03 delete

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!!!

Reply
20 de setembro de 2010 18:14 delete

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

Reply
21 de setembro de 2010 14:32 delete

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

Reply
30 de setembro de 2010 21:05 delete

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

Reply
30 de setembro de 2010 22:52 delete

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.

Reply
9 de outubro de 2010 10:13 delete

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

Reply
9 de outubro de 2010 11:57 delete

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

mas assim que encontrar algo mais simples vou publicar

Reply
10 de novembro de 2010 16:05 delete

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

Reply
10 de novembro de 2010 17:03 delete

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)

Reply
10 de novembro de 2010 17:49 delete

É, 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 ^^

Reply
28 de janeiro de 2011 18:46 delete

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

Reply
28 de janeiro de 2011 21:38 delete

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

Reply
4 de fevereiro de 2011 10:08 delete

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

Reply
4 de fevereiro de 2011 14:40 delete

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

Reply
4 de fevereiro de 2011 14:45 delete

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

Reply
4 de fevereiro de 2011 15:10 delete

☂☂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..

Reply
5 de fevereiro de 2011 12:23 delete

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

Reply
5 de fevereiro de 2011 13:26 delete

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

Reply
9 de fevereiro de 2011 12:04 delete

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/

Reply
27 de fevereiro de 2011 13:18 delete

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 ?

Reply
27 de fevereiro de 2011 13:58 delete

Luana
veja aqui sobre Imagem no fundo do blog

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

Reply
10 de março de 2011 13:22 delete

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

Reply
10 de março de 2011 15:50 delete

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

Reply
24 de março de 2011 23:18 delete

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/

Reply
25 de março de 2011 13:19 delete

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

Reply
3 de abril de 2011 14:15 delete

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!!!

Reply
3 de abril de 2011 14:31 delete

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

Reply
17 de maio de 2011 13:23 delete

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

ótimo tutorial abraço

Reply
17 de maio de 2011 15:06 delete

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)*/

Reply
6 de junho de 2011 11:20 delete

vlw pela ajuda so precisava disso vlw....

Reply
27 de junho de 2011 17:41 delete

alguém sabe como colocar fashvortex no blogger?

Reply
27 de junho de 2011 17:49 delete

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

Reply
1 de julho de 2011 15:04 delete

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.

Reply
1 de julho de 2011 20:25 delete

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

Reply
2 de julho de 2011 03:19 delete

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.

Reply
2 de julho de 2011 03:20 delete

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.

Reply
2 de julho de 2011 11:43 delete

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="#".....

Reply
5 de julho de 2011 02:17 delete

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

Reply
5 de julho de 2011 13:28 delete

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!?!?

Reply
5 de julho de 2011 15:17 delete

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

Reply
6 de julho de 2011 09:28 delete

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!!!

Reply
6 de julho de 2011 09:58 delete

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

Reply
6 de julho de 2011 14:49 delete

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.

Reply
6 de julho de 2011 14:59 delete

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

Reply
6 de julho de 2011 15:06 delete

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

Reply
6 de julho de 2011 15:44 delete

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

Reply
6 de julho de 2011 15:52 delete

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

valew pela ajuda kara...

Reply
19 de agosto de 2011 10:06 delete

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.

Reply
19 de agosto de 2011 12:35 delete

é 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

Reply
27 de setembro de 2011 21:12 delete

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

Reply
1 de outubro de 2011 11:30 delete

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

Reply
1 de outubro de 2011 13:28 delete

Rodrigo, não tenho código com setas

Reply
1 de novembro de 2011 23:02 delete

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

Reply
2 de novembro de 2011 18:12 delete

no codigo tem como alterar o tamanho da imagem

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

Reply
17 de dezembro de 2011 00:47 delete

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

Reply
17 de dezembro de 2011 01:17 delete

@Rodrigo Klinguelfus tente alterar essa linha

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

deixe assim

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

Reply
25 de dezembro de 2011 17:02 delete

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)

Reply
25 de dezembro de 2011 20:31 delete

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

Reply
Anderson
10 de janeiro de 2012 19:11 delete

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! :/

Reply
11 de janeiro de 2012 17:10 delete

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

Reply
Daniel Lira
1 de fevereiro de 2012 00:32 delete

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

Reply
1 de fevereiro de 2012 15:32 delete

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

mas nunca testei os slides do picasa.

Reply
2 de fevereiro de 2012 13:41 delete

queria saber como fes queles que as palavras aparecem como?

Reply
2 de fevereiro de 2012 15:27 delete

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 >

Reply
21 de fevereiro de 2012 00:07 delete

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

Reply
21 de fevereiro de 2012 01:30 delete

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

Reply
21 de fevereiro de 2012 20:00 delete

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

Reply
22 de fevereiro de 2012 00:36 delete

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

Reply
24 de fevereiro de 2012 15:44 delete

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

Reply
24 de fevereiro de 2012 19:05 delete

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.

Reply
3 de março de 2012 09:09 delete

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.

Reply
6 de março de 2012 19:38 delete

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?

Reply
7 de março de 2012 14:18 delete

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

Reply
15 de abril de 2012 16:49 delete

olha e dificil ficar editando essas coisas!!

Reply
11 de maio de 2012 10:54 delete

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

Reply
11 de maio de 2012 11:27 delete

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

Reply
31 de maio de 2012 11:02 delete

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

Reply
31 de maio de 2012 11:14 delete

só precisa retirar a linha

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

Reply
30 de novembro de 2012 23:24 delete

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

Reply
1 de dezembro de 2012 00:12 delete

o cidadeweb parou de funcionar faz algum tempo...

mas era somente um site para testes.

Reply
20 de janeiro de 2013 22:17 delete

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

Reply
21 de janeiro de 2013 12:25 delete

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

Reply
26 de abril de 2013 03:20 delete

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

Reply
17 de maio de 2013 01:12 delete

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!

Reply
17 de maio de 2013 08:26 delete

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

Reply
9 de junho de 2013 08:10 delete

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.

Reply
6 de julho de 2013 01:35 delete

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!

Reply
6 de julho de 2013 10:10 delete

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

qual o endereço do blog que deu erro?

Reply
5 de setembro de 2013 09:48 delete

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

Reply
27 de dezembro de 2013 18:14 delete

Não funciona com mais de duas imagens?

Reply
27 de dezembro de 2013 22:53 delete

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>

Reply
10 de setembro de 2014 17:04 delete

Fabiano... Achei que fosse conflito com outro código, mas coloquei em um blog de teste sem qualquer outro código e mesmo assim não funcionou. Não sei realmente o que fiz errado.
Estou enviando o código por email. Se você puder me ajudar ficarei grata.

Reply
10 de setembro de 2014 20:23 delete

o código mais recente que testei com slides foi esse aqui:
Como Colocar Slides no Blogger: Slides das Postagens Recentes

porém a maioria deles depende de arquivos externos que podem apresentar falhas a qualquer momento

Reply
1 de novembro de 2014 03:28 delete

Oi Fabiano, tudo bem? O slide estava funcionando até ontem no meu blog, mas hoje sumiu. Tentei acessar os dois códigos javascripts mas não abrem, então baixei os arquivos que você postou, hospedei e troquei os links, mas mesmo assim continua em branco o espaço que ele deveria ocupar no blog. Tem uma outra solução para que ele funcione?

Abraços

Reply
1 de novembro de 2014 11:12 delete

se baixou e hospedou os javascript talvez tenha algum erro nos códigos na hora de salvar

infelizmente alguns códigos antigos dão erros com o passar do tempo

Reply
Gustavo T.
3 de novembro de 2014 16:36 delete

Mesmo problema que a Tammy Caldas aqui, utilizava esse javascript em 4 blogs e parou nos 4, alguém sabe como resolver por favor?

Reply
Gustavo T.
3 de novembro de 2014 16:38 delete

Mesmo problema que a Tammy Caldas aqui, alguém sabe como resolver por favor? Utilizava em 4 blogs e simplesmente parou de funcionar em todos.

Reply
Gustavo T.
3 de novembro de 2014 22:32 delete

Consegui resolver galera, se alguém precisar de ajuda é só me avisar!

Reply