Acessórios Efeitos Imagens Vanessa S.
Imagens Deslizantes com JQuery Slider
Em outro artigo publicado, você já viu Como Instalar um Slide no Blog.
Agora neste tutorial você aprenderá um outro modelo de Slider usando o JQuery.
Para aplicação, é necessário usar HTML, CSS e Javascript.
Clicando na imagem abaixo você pode ver um exemplo deste efeito em funcionamento.
Demo
[becape]Só para lembrar, sempre é bom que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.[/becape]
Para instalar este Slider,siga os passos a seguir:
1.Instalar o arquivo Javascript:
Acesse o painel do blogger, no menu “modelo”, vá em “Editar HTML” e procure pela tag </head>
e cole logo ACIMA dela o conteúdo deste arquivo.txt.
Salve as modificações!
2.Aplicar estilos ao Slide – código CSS:
Agora volte no menu “Modelo” >> “Editar HTML” , e procure pela tag ]]></b:skin>
e cole ANTES dela:
/*--Container geral--*/
.main_view { float: left; position: relative; }
/*--Estilos do container das imagens--*/
.window {
height:289px;
/*-- as imagens devem ter a mesma altura ou mais-- */
width: 800px; /*-- as imagens devem ter a mesma largura ou mais-- */
border:1px solid #610000;
overflow: hidden;
position: relative;
}
.image_reel { position: absolute; top: 0; left: 0; }
.image_reel img { float: left; }
/*--Estilos do container da numeração--*/
.paging { position: absolute;
bottom: 40px; right: -1px;
width: 220px; height:41px;
z-index: 100; text-align: center;
line-height: 40px;
background:url(http://4.bp.blogspot.com/_q4j3j-JA2ro/S0TDw0n697I/AAAAAAAANBw/XhlF84popQU/s000/transparencia.png);
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-topleft: 15px; border:1px solid #000;
display: none; }
/*--Estilos do link da numeração--*/
.paging a { outline:none; padding: 5px 10px; text-decoration: none; color: #999;
background: #000;border: 1px solid #000; -moz-border-radius: 17px; -khtml-border-radius: 17px;
-webkit-border-radius: 17px; }
/*--Estilos do link ativo da numeração--*/
.paging a.active { font-weight: bold; border: 1px solid #000; color: #fff;
background: #920000; -moz-border-radius: 17px; -khtml-border-radius: 17px;
-webkit-border-radius: 17px; }
/*--Estilos do link hover da numeração--*/
.paging a:hover { font-weight: bold; }
Salve!
3.Editando cores de fundo, bordas, altura e largura do Slide:
Em .window , edite os valores de height(altura) e widht (largura) total do seu slide. Personalize de acordo com o tamanho de seu template (Coloque o mesmo valor para largura que possuir a sua Header)
Lembrando que as imagens utilizadas devem ter a mesma largura ou mais!
Edite as cores de bordas em “border“.
Edite cor de fundo em “background“.
Em .paging, onde está background:url(http://4.bp.blogspot.com/_q4j3j-JA2ro/S0TDw0n697I/AAAAAAAANBw/XhlF84popQU/s000/transparencia.png), eu usei uma imagem como exemplo, mas você pode trocar por uma imagem de sua preferência, basta alterar a url (endereço) de sua imagem.
4.Escolhendo local que ficará o slide:
Agora você deve escolher onde quer posicionar o slide.
4.1. Abaixo do cabeçalho:
Um excelente local é logo abaixo do cabeçalho, ou abaixo do menu(caso seu blog tenha um menu instalado abaixo do cabeçalho).
Vá no menu “layout” verá um campo para “Adicionar Gadget” bem abaixo do cabeçalho do blog, é lá que você irá colar o código do slide que você quer instalar.
Se não houver um campo para “Adicionar Gadget” abaixo do cabeçalho, você terá que fazer algumas modificações no código do template. Siga este artigo e veja como Como Instalar Gadgets abaixo do Cabeçalho
5.Código HTML:
Vá para o menu “Layout” .
Clique em “adicionar um gadget”, escolha o modo HTML/javascript e cole o seguinte código:
<div class="main_view">
<div class="window"> <div class="image_reel">
<img src="url-imagem-1" alt="" />
<img src="url-imagem-2" alt="" />
<img src="url-imagem-3" alt="" />
<img src="url-imagem-4" alt="" />
</div></div>
<div class="paging">
<a href="insira-seu-link-1" rel="1">1</a>
<a href="insira-seu-link-2" rel="2">2</a>
<a href="insira-seu-link-3" rel="3">3</a>
<a href="insira-seu-link-4" rel="4">4</a>
</div></div>
Para fazer com que a numeração que aparece no slide funcione como um menu que redirecione para determinada postagem, você poderá, basta inserir a url da sua postagem onde está “insira-seu-link”.
Se você quiser inserir um link diretamente nas imagens, basta inserir
<a href=”link-para-imagem-1″> antes de <img src=”url-imagem-1″ alt=”” />
devendo ficar assim:
<a href="url-link-para-imagem-1"> <img src="endereço-imagem-1" alt="" /></a>
Slide somente na página inicial (opcional):
Se você quiser que ete slide apareça somente na página inicial do seu blog, você terá que incluir o código da condicional.
Você deve colar o código de abertura da condicional logo ACIMA da linha que inicia o código html do slide, e APÓS o código de encerramento do slide, você deve colar e a tag de fechamento da condicional.
Deverá ficar assim:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class="main_view">
<---restante do código--->
</div></div>
</b:if>
O código destacado em “azul” é a condicional.
O código destacado em “laranja” é o código de instalação do slide.
[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, verifique se você já tem instalado algum outro script que conflite com o JQuery. Para melhor entendimento, leia: Por que alguns scripts não funcionam no meu blog.[/alerta]
Caso queira aprender como ocultar ou exibir este slide que você instalou, em determinadas páginas, leia o artigo:
• Ocultar Elementos em Página Específica
Eu gostaria de saber como editar meus links do menu?
Tipo, Home tá ok eu acertei, mas quanto a “Entrevistas” eu quero que quando cliquem apareça todas as minhas postagem onde eu estou entrevistando alguém. Como faço isso?
Quanto ao slide acertei também =D
Vanessa Me ajdua porfavor Eu quero adicionar o slide eu tou conseguindo mais eu queria saber se da pra adicionar texto pra quando as pessoas virem a imagem teja o texto na frente ou quando coloca a seta emcima aparecer o texto tem como?
O efeito deste slide é este que está ai. Se existe outra forma de altera-lo, desconheço. Vc terá que testar e descobrir por sua própria conta.
ola
eu queria saber como que tira esse slide do meu blog
porque agora meu blog se atualiza automaticamente
Tente fazer o processo inverso.
ja fiz e ainda ta do msm jeito
Vanessa
Por incrivel que pareça eu achei o efeito de um slider 2D ,sem ter que colocar uma estrada de codigos como exige,um mega slider em um site australiano e outro americano.
O que diferencia o tal slider…è a forma de apresentar as imagens com 4 quadros cortados e invergados.
Mas estou testando esse aqui,para colocar em 4 quadros separados.
Se der certo…
Te dou um toque!
😉
Olá, coloquei o slide no meu blog, e coloquei link para cada imagem, mais ta dando um problema, em vez de ficar so o link q eu adicionei, fica 2 juntos o link da HOME + o link da pág q eu coloquei.
O código:
Como aparece o link no slide:
oque posso fazer para resolver esse problema?
Vc deve ter feito algo errado,lamento, mas não tenho como saber.
ola vanessa
eu fiz tudo certo so não conssegui coloca os links na imagens
pra clica na imagem e ir pro post?
teria como explica mais sobre isso?
O tutorial já explica como fazer isso.
eu sei mais eu não entendi direito
ola natanael eu posso le ajudar va no seu blog entre nele va em posyagens clique na postagem que quer qeu apareça la em cima tera a url dessa postagem voce copia e coloca ontem tem colocar link Vc apaga aquele nome e cola o link
Olá, muito bom o tutorial e o código, mas estou com um problema:
as imagens vao ficando atrasadas, de forma que na terceira ou quarta, vejo metade da anterior, e metade da seguinte. Como corrijo?
Se no seu blog está aparecendo de forma diferente, lamento, mas ou vc fez algo errado ou pode ser algum problema relacionado ao seu template e para tentar descobrir, teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso. De qualquer forma, agradeço pelo comentário.
Obrigada Vanessa, vou revisar o código se tem algum erro ou tentar outros templates!
Vivi
Boa rainha!
Eu tambem tinha o mesmo problema e quebrei o cranio,atè dar 2px a mais no tamanho do quadro da imagem e…inserir medidas x e y nas imagens do slider.
E pronto!
Ou seja dentro do link da imagem coloque width800 e heigth.499
Beijao e boa sorte!
Eu não estou conseguindo colocar a imagem,você poderia me ajudar?Passo a URL das imagens e você coloca no HTML do tamanho igual da DEMO.As imagens já estão prontas, se você puder me ajudar me envie um e-mail.Obrigada pela atenção…
Lamento, mas eu não posso e nem tenho tempo para prestar customização individual, inclusive nos termos de uso já deixei o aviso falando a respeito. De qualquer forma, agradeço o comentário.
Eu queria saber como faz para colocar as imagens ja que elas são estão aparecendo, se tiver como me ajudar me responde por favor.
O tutorial já ensina. Leia com atenção o passo 4 que lá já explica isso.
O efeito é ótimo só que gostaria de saber como centraliza-l0 no blogger, mas desde já muito obrigado.
oi meu anjo!!!
parabéns pelo blog, mas eu não consegui fazer essa ” imagem deslizante” sera que poderia me ajudar?
desde já obrigado
Como faço pra configurar quando clicar nas imagens e irem pra postagem?
No tutorial já tem a informação que vc quer.
Olá querida.
Hoje depois de muito tempo que eu já havia instalado este slide no meu blog notei que no internet explorer ele está dando um erro: a última imagem do slide simplesmente não aparece. No Mozila e Crome, o slide roda normal. VC Sabe o que pode ser feito para que ele funcione corretamente no IE? Bjs
Infelizmente o IE é sempre um problema…as vezes funciona pra alguns corretamente, e para outros não..e não sei como resolver.
Nem me fala, detesto ter que ficar adivinhando o que fazer pra tudo funcionar normal nesse IE…
Descobri uma solução, pra quem tiver o mesmo problema:
É só definir o tamanho do slide 2 pixels maior que as imagens que você for usar.
Por exemplo, eu usei imagens de 849 pixels. Então defini o slide para ter 852 pixels.
Agora está rodando normalmente no Mozila e IE.
Bjs
Oi! Tem como deixar os slides mais rápidos?
Obrigado pelo tutorial!
Foi o único que deu certo no meu blog.
Bjos!
Eu adicionei com sucesso o slide no entanto as imagens não aparecem.
Imagina o que possa ser?
Lamento,mas não sei o que pode ter ocorrido…
Olá, eu fiz todos os passos no meu blog igual está ai, mais não funcionou a imagem ficou parada, não desliza nem nada. o que eu faço?
Recursos que funcionam a base de arquivo javascript a sua funcionalidade pode variar de acordo com o template. Templates que possuem muitos scripts, acabam gerando “conflitos” entre si.
Oi flor!
Acabou que eu achei o lugar certinho de trocar as cores.
Mais uma vez agradeço por partilhar conosco. Bjs
Olá! Adorei, está ótimo esse baner, obrigada por compartilhar.
Queria saber se tem como mudar as cores do quadrinho onde ficam os números, onde no código eu devo mudar? Queria trocar o preto/vermelho por rosa/verde. Bjs
Olá, eu to com uma duvida: Se eu quiser colocar 2 slides deste? como faço? Mudo o que no codigo?
obrigada
Dani,eu nunca testei..mas acredito que o que deverá mudar é somente o local que vc escolher para colocar o 2º slide.
exatamente. eu adicionei o codigo (que deve ir no gadget) novamente e não apareceu nada. Tentei mudar o nome das id’s mas mesmo assim nao deu. O que me sugere?
Olá, estou usando um template desses novos do blogger, que eh aqueles com slides e tal.
gostaria de saber como que eu faço pra quando clicar na foto ou titulo dela, o usuario va diretamente pra uma postagem do proprio blog?
Agradeço desde ja. Valeuu
Não consigo aumentar o número de imagens 🙁
Já tentei até macumba!!!
Coloco a numeração, as imagens e nada!
O link é templatefleury.blogspot.com.br
Beijos!
Daniela, não tenho como te ajudar, pois eu nunca testei aumentar a quantidade de imagens neste slide. Não sei te informar se é possível.
é só repetir esse código:
Tem que repetir os códigos e aumentar o container da numeração!
No meu blog não tem a tag:]]> o que eu faço?
Funcionou quase tudo certo, o unico problema é que as imagens não trocam, fica sempre a mesma. O que eu faço?
Já descobri! Só precisei ler o post novamente 😀
Oi, o tutorial é ótimo, mas gostaria de saber se tem como fazer com que a imagem seja clicável, já que para ir ao post correspondente à imagem é necessário clicar no número do slide.
Obrigada!
@Caio
O efeito deste hack é esse que está ai..se existe uma outra forma, eu desconheço.
Vc terá que pesquisar e ver se encontra algo por ai.
Tem como colocar um espaço para escrever na parte de baixo do slide?
Muito bom valeu.
Caramba, vocês, sãod emais, deu certinho no meu, valeeu ae a todos!
Eu novamente. Gostei bastante, ele funciona quase perfeitamente. O problema é o link, não redireciona para o post. Mas como o DEMO que você colocou como exemplo, também apresenta o mesmo probleminha, creio, que saiba onde está o erro.
Mensagem do seu Google Docs:
"Este documento irá em breve ser atualizado para a versão mais recente de documentos do Google."
Será por isso que o link não funciona?
Ficou tão bonito, mas só que quando vou clicar na imagem para redirecionar para o post, não acontece nada. Continua a seta, a mãozinha indicando que é um link, não aparece. Ó único problema é esse. Tem como resolver.
Fico grato.
e para postar em wordpress ? não encontrei a parte do em lugar nenhum, faço como dai? :S
DeskP o meu também só consigo se for como Gadget se for na postagem ou na Pagina não consigo fica do mesmo jeito que o seu
Amigo, esse slide continua aparecendo nas páginas/postagens internas do blog? Estou precisando de algo assim, para banners, mas teria q continuar exibição internamente. Aguardo resposta. Grato.
No meu blog só aparece a 1ª imagem, e só. Não aparece os numeros e nem ficam passando as outras imagens. o que faço ?
Saudações Clau…
Antes de mais, quero expressar minha profunda gratidão pelas dicas valiosíssimas que tem dado. Acredito que demanda tempo e muita atenção para testar os codigos, preparar os posts e depois publicá-los. Como se não bastasse, tem que responder às nossas questões e dúvidas. Estou imensamente grato pela força que dá a cada um de nós.
Seu slide funcionava, só que havia umas alterações a fazer, pois "desarrumava" o layout que estou a usar. No entanto, depois de ler o seu artigo umas 4 vezes e refazer os passos vez após vez, e lendo outros artigos sobre personalização e os locais ideais para se colocar o código, eu cheguei la, e ainda mudei umas coisinhas para adequa-lo ao que queria.
Se desejar dar uma olhada no blogue de teste cá vai ele: http://manicoteste.blogspot.com/
O meu único problema é que as imagens demoram a ser carregadas e olha que já comprimi elas ao ponto de nao perderem a qualidade.
Tem como adicionar um codigo qualquer que possa so mostrar o blogue ou o slide quando as imagens estiverem já carregadas?
Abraços de Angola.
Para aumentar a quantidade de Slide… aparecer mais de 4
acrescente em:
.main_view {
float: left;
numResults : 10; (acrescente isso…. 10 é a quantidade de slide)
position: relative;
depois aumente o tamanho do container de numeração em:
.paging {
position: absolute;
bottom: 5px;(aqui modifica a posição dos números em no slide)
right: -1px;
width: 800px; (aqui aumenta o tamanho do container para caber mais numeros de fotos)
height:5px; (aqui modifica o tamanho do fundo preto transparente)
z-index: 100;
text-align: center;
line-height: 5px; (aqui tambem modifica a posicao dos numeros no slide)
PRa finalizar:
Depois é só acrescentar a mesma quantidade de fotos que vc quiz aumentar no codigo html aplicado no Gadgets
______________________________
Olá… Estou sem conseguir habilitar o slideshow.
Bom, primeiramente, peguei meu template do blog
http://evelyns-place.com.br/
Bom, o gadjet e o primeiro código HTML deram certo, porém o segundo código não funciona.
Aparecem dois tipos de mensagens:
"The element type "body" must be terminated by the matching end-tag"
ou
"Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente."
Kayo, M1$@eL:
Lamento, mas eu não tenho como ajudar, pois pode ser algo relacionado ao template e para tentar descobrir, teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso. De qualquer forma, agradeço pelos comentários.
Olá Clau, tenho a mesma duvida do Kayo.
Coloquei o slide no blog : http://www.lenegros.blogspot.com/
Notei que a PRIMEIRA imagem aparece inteira, porém as proximas aparecen cortadas e a última tem um espaço em branco do lado direito.
As imagens são exatamente do tamanho do slide , então , porque tem espaço sobrando no final??!
Me ajuda aee!
Olá…Eu coloquei o slide no blog
Link:http://adolescente-pop.blogspot.com/
Mas aconteceu que ficou um espaço em branco no final da ultima foto do slide….Eu procurei o motivo e descobrir que tinha que colocar um url de imagem no "paging" e eu fiz isso…Mas quando eu fiz isso o slide parou de funcionar,as fotos não passavam mais e os numeros sumiram….Como eu faço pra preencher esse espaço branco com o slide funcionando normalmente???
Clau,
Sempre fica as mesmas imagens no slide? Tem como a cada nova postagem, automiticamente "puxar" imagens do novo post? Ou teria que fazer isso sempre, manualmente?
Obrigada!
Sarah
Divulgacion RBD
No final do artigo já tem um link para o tutorial que trata sobre o assunto.
Beatriz
Estão no código do passo 2. Usa crtl+f qdo quiser localizar algo no html do seu template.
clau onde encontro esse window e paging , nao entendi ?
Tem como colocar o gadget somente na página inicial do blog?
Rock in Barro
Não sei te informar pq nunca o fiz e nunca testei. Vc terá que testar ai pra ver se dá ou não.
Há possibilidade de tirar esses números e essa barra preta fazendo apenas as imagens deslizarem?
Backstage
O efeito deste hack é esse que está ai..se existe uma outra forma, eu desconheço.
Vc terá que pesquisar e ver se encontra algo por ai.
Clau, eu consegui fazer e tals, as imagens os números… Tudo direitinho, mas será que não tem como eu colocar títulos nesses slide, como o titulo da postagem?
Obrigado desde já, vou esperar a resposta!
André
Tenta fazer o teste e seguir a dica que o René Gustavo deu.
René
Obrigada pela ajuda viu? 😉
Meu amigo, não tenho certeza, mas para por esse slide em uma postagem, você tem que seguir os mesmo procedimentos, e quando chegar no procedimento 4, não crique o gadget com HTML/java, basta criar uma postagem, com a opção de HTML, e colocar o HTML do procedimento número 4. Ok?
Não tenho certeza, porém, acho que pode dar!
OBS: Não esqueça de editar a altura e a largura do slide para que não fique irregular na postagem!
Abraços!
Como posso colocar um slid assim em uma postagem?
Carol
Se vc quiser alterar o tempo do efeito da transição, vai ter que mexer no arquivo javascript, e editar ele todo.
onde muda o tempo de transição das imagens ?
Natineces
Eu não sei te dizer, pq eu não testei.
Nossa vlw mesmo ficou perfeito.
http://neceslove.blogspot.com/
Eu só queria lhe fazer uma pergunta…da pra ser mais de 4 imagens??Tipo a gente mesmo adicionar mais um numero??
Se não der não tem problema por que eu já gostei do mesmo jeito kkkkkkkkkk bjs e parabéns pelo site ele é incrível…to sempre aqui agora *-*
Jorge
Este tipo de slide foi projetado para ser apresentado assim desta forma. Se vc quer colocar descrição, é melhor colocar a descrição na própria imagem.
Se vc precisa de um slide que tenha possibilidade de colocar descrição e títulos em textos, sugiro que escolha um outro modelo de slide.
Nossa muito bom seu tutorial consegui fazer =)
Muito Obrigado pela dica, mas gostaria de saber como colocar uma legenda como nesse no slide como nesse abaixo
https://www.mundoblogger.com.br/2009/11/instalando-um-slide-no-blog.html
Olá Clau blz, Faz tempo que eu queria um slide assim para finalizar meu projeto e hoje eu terminei graças a você. De uma espiada pra tu ver como ficou VideoAulasd.blogspot.com
Pena que você não faz Vídeo Aulas por que se fizesse eu já teria postado no por la.
Um Abração.
Eduardo Chaves.
Bom, consegui resolver o problema de larguras… (que a animação ia cortando progressivamente a imagem no meio)
Eu declarei a width da img nas propriedades da imagem no gadget e resolveu o problema.
Se alguém passar por esse mesmo problema já sabe a resposta hehe
Onde eu arrumo a distância do slider? Tipo… ele tá cortando progressivamente um pedaço de cada imagem, provavelmente é no Jquery que está programado para percorrer uma distância X e parar, porem essa distância é menor que a imagem/css… se alguém conseguir me ajudar agradeço :]
Obrigado ficou muito bom no meu blog novo quando eu abro no chrome mas qd eu abro no Internet Explorer os botoes ficam quadrados pq será isso????
abçs
Obrigado
Fico muito bom melhor Slider que já vi!
Ai,como que deixar mais lento um pouco.
está muito bom o código. Obrigado. Sou um blogueiro de Portugal!!!
ta tendo um problema no meu slide, o slide 1 passa muito rapido e fica tudo branco, da outra vez que eu tentei foi o slide 4 qu ficou tudo branco. onde estou errando a unica coisa que eu mudei foi o tamanho
Você é muito Inteligente,saca mesmo do assunto e está me ajudando muito,desde já agradeço por compartilhar tantas informações valiosas.
Eu consegui postar a galeria,mas os números ficaram na vertical,preciso saber como faço pra colocar eles na horizontal.
vlw!!
Coloquei no meu blog esta ferramenta. o que deu um ar de muito profissionalismo ao meu blog. quem quiser conferir como ficou: http://www.chicoetutoia.blogspot.com
Clau, eu instalei esse slider no meu blog, o beembolado.blogspot.com
O que acontece é que as imagens ficam sempre lado a lado e nunca aparecem os botões "1", "2", "3" e "4" para passar as imagens.
Sei que você não pode me ajudar a selecionar o erro no meu blog sem ver o código, mas será que você poderia me dizer o que é que pode estar dando errado no meu código, e uma possivel solução para este erro.
Ficaria muito feliz em receber uma resposta satisfatoria sua. Queria dizer também que metade do meu blog foi construido a partir de dicas daki!! ;P
muito obrigado desde já!! ;D
Oiii to tentando fazer o seguinte.
hoje em um site uso o lightbox para ambliar minhas fotos direto do banco de dados, ate ai tudo bem, mas estou atualizando o site layout e tudo , e coloquei aquele jquery para fazer passar os banners do topo do site, o problema que os dois juntos nao funciona somente um ou outro.
você saberia me dizer porque isso acontece e se tem um mode de resolver?
Gostaria de aproveitar a oportunidade de te parabenizar pelo seu site / blog. Ele é excelente. Tem muitas dicas para todos os níveis e sempre com a preocupação de ser o mais didático possível, deixando fácil o que muitas vezes poderia ser e é complicado.
Parabéns mesmo.
Continue assim.
Boa tarde.
Consegui colocar em prática esse post e deu tudo certo, eu até mudei as configurações dele.
Sou novato no assunto blog e html, e me surgiu um problema que gostaria de saber se você consegue me ajudar: coloquei os slides deste post e usei a última dica que você colocou, para quando clicarmos na foto ele encaminhar para o link que colocamos. Só que tem um probleminha, quando coloco um site qualquer ele não vai, porque no atalho antes tem o url do meu blog, tem como tirar isso?
Exemplificando:
Cliquei na foto e ela encaminhou para:
nomedoblog.blogspot.com/www.algunsite.com.br
Mas eu gostaria de tirar a primeira parte e quando clicar na foto ou no número me direcionasse para:
http://www.algunsite.com.br
Tem como?
Agradeço desde já a atenção dispensada.
Um abraço
Clau, não tem como eu adicionar legenda não?
vlw clau!!!
Rhuann Tavares
Sobre o problema que ocorrer no seu blog, não tenho como ajudar.
Sobre o recurso que vc perguntou: procure o tutorial "Instalar ferramenta breadcrumbs".
Ei Clau…
to em processo de criação do meu blog e ja mudei bastante coisa do slide original mas….
heheheh… (tinha que ter um mas)
a área de comentário sumiu e não sei como fazer pra voltar a aparecer d novo, sei nem quando que sumiu, só a gora que me dei conta…
e outra, tenho rodado pela net procurando de tudo quanto nome um gadget que localiza as páginas como se fosse um mapa tipo esse que você tem no seu blog.
[[[Inicio » Efeitos Imagens » Slides » Imagens Deslizantes com JQuery Slider]]]
me ajuda!!??
vlww desde já…
Clau, me desculpe pela inha ignorancia!!
Acabei de descobrir que vc jah publicou isso!!
Desculpe por te fazer perder tempo!
Seu site é demais!!
Parabéns!!
Querida Clau…
Gostaria de saber se teria como usar esse slider, mas no lugar das imagens apaenas, colocar imagens dos últimos posts publicados no meu blog, como o gadget de postagens recentes, com links para os determinados posts!!
Aguardo uma resposta sua…
PS.: Bem que você poderia fazer um tutorial sobre isso se você souber fazer esse efeito é claro!!
Beijos!!
José Filho
Que bom que deu certo 😉
Clau,
desculpa ter te incomodado. Eu mudei meu template, deu certinho. Muito Obrigado pela sua dica excelente!
http://newspepperblog.com
José Filho
Vc deve ter feito alguma coisa errada. Não tenho como te ajudar e nem saber o q aconteceu no seu template. Se vc verificar no blog de testes ele está funcionando perfeitamente.
Ah e não esqueça que as imagens utilizadas devem ter a mesma largura ou mais q o slide.
Não consegui, eu acho que tem algo errado com o CSS, porque quando eu instalo o gadget, aparece uma imagem ao lado da outra (às vezes até em baixo), e em baixo aparecem os números em formas de links. Me ajude por favor! Eu achei lindo esse slide e quero botar no meu blog http://www.newspepper.tk/, além do mais eu confio bastante no conteúdo do seu blog.
andraD,
X-Pro Games
Este tipo de slide foi projetado para ser apresentado assim desta forma. Se vcs quiserem colocar descrição, terão que colocar a descrição na própria imagem.
Se quiserem um slide que tenha possibilidade de colocar descrição e títulos em textos, tem outros tipos de slides publicados, eu sugiro que deem uma olhada no marcador "slide" e escolham outros modelos.
Gostaria de saber se há como colocar uma descrição nas 4 imagens que ficam passando. Se possível, crie um tutorial para nós!
Ótimo trabalho o seu!
Como coloco uma descrição nas imagens?
Christian:
Eu quem agradeço pelo comentário. Obrigada!
Gabriel Braganholo:
Vc deve ter feito alguma coisa errada na hora de instalar os códigos. Não tem como eu saber especificamente o q ocorreu no seu template.
Clau, vim agradecer a sua disposição de disponibilizar todo esse utilíssimo material e a sua atenção em sempre sanar as nossas dúvidas… muito obrigado!!!! 😀
Christian
Clau, vim agradecer a sua disposição de disponibilizar todo esse utilíssimo material e a sua atenção em sempre sanar as nossas dúvidas… muito obrigado!!!! 😀
Christian
Certo, eu consegui, mas aconteceu outro probleminha, se puder me ajude por favor, a última imagem nunca aparece, eu coloco mais imagens e tudo, mas nunca aparece a última, nem mesmo com as quatro. Obrigado. Parabéns pelo blog, tudo muito bem feito.
Gabriel Braganholo:
Vc tem que ajustar as medidas e ir testando. A parte referente a numeração já está marcado no código, agora é só ir ajustando e fazendo testes ai.
Oi, poderia me ajudar?
O menu com as números ficou desalinhado, ele ficou para fora do slide.
imagine – comunicação impressa e digital:
Mas vc deve estabelecer a flutuação no código CSS (passo nº 2 do tutorial) e não em postagem, vc terá q editar o float do código e ir testando.
Ah, e eu já o coloquei onde vc indicou, coloquei como postagem e centralzei, mas não muda!!!
grato
Oi CLau, tudo bem?
Eu tenho seu blog favoritado aqui porque é muito bom… tem me ajudado muito… vlw!!!
Mas tenho uma dúvida… Eu consegui colocar essas imagens deslizantes no bog, porém, ele fica ao lado esquerdo da tela. Mudei o float para right e ele vai para o lado direito. Coloquei margin-left e funcionou, porém, numa resolução menor ele não fica centralizado. Vc pode me dar alguma dica para q eu possa centraliza-lo…
Novamente tenho q falar, suas dicas tem me ajudado muito… VLW
Agradeço…
@gabriel
é que este tutorial é para ser aplicado apenas para blogs da plataforma blogger.
@Carlos antonio correia de farias:
Deve ser algo relacionado ao template que vc usa. O funcionamento deste slide pode variar de template para template, pois funciona a base de um script, e para cada caso é um caso. Não há como eu saber especificamente qual o problema q ocorreu no seu.
@Usina Gamer
Eu acredito que para este slide não seja possivel fazer isso que vc quer. A não ser que vc coloque a legenda diretamente na imagem, ou utilize outro tipo de slide.
Se quiser dá uma olhada neste: Instalando um Slide no Blog.
gostaria de colocar Legendas nas imagens , como faço isso?
não consigo colocar no meu blog….
mim ajuda por favor…
Me ajuda meu site é okayflash.com
gostaria de por um deslizante so que pequeno dentro so site como faço
, também naum achaa essas tags ]]>
espero uma resposta aqui mesmo
ok obrigado, é que de vez em quando os números atrapalham
mais se você souber de um outro tutorial que tenha um parecido com este: (navegação e legenda) por favor me avise meu email (caso não publique este comentário)
agradecido; Yan Carlos
@karatuca:
Olha vc pode tentar mexer no CSS,e alterar o posicionamento. Eu não sei se vai resolver,é só uma sugestão, mas vc pode tentar e testar, mas eu aconselho a vc só fazer isso se entender bem sobre códigos, caso contrário é melhor vc procurar e usar outro modelo de slide.
tem como mudar a posição dos números que aparecem as imagens, como colocar abaixo das imagens ou acima?
Queria reproduzir esse estilo : é possivel? que modificações teria q fazer?
@Diário da Erva:
Acredito que deva ser a versão do seu navegador, pq pra mim ele está normal. Eu uso a última versão do mozilla.
Muito bom msm, o código está perfeito !!!! Antes de tudo obrigado !! o único problema foi que desalinhou acredito eu no position no firefox, no ie e no chrome esta perfeito, não sei o q fazer mais,,passei quase uma noite inteira tentando acerta esse problema, mas se eu ajeito no firefox desalinha no chrome e no ie, se vc puder dar uma olhada, meu blog é esse .
Mas desde já lhe agradeço pelo código e vou continuar na busca do posicionamento perfeito. até mais…
@Video Aula:
Pq provavelmente já tem Crosscol habilitada em seu template e vc deve estar tentando acrescentar mais uma…isso causa erro mesmo. Verifique o código do seu template.
ei,,pq quando vou colocar aquele dvi crosscol dá erro?
Adiciono abaixo do menu bar,que é onde eu quero..mais ele da erro no html..pq?
@Derick Furlanetto:
Fico feliz que tenha conseguido! Volte sempre.
Obrigado deu certo!
@Enzzopaiva:
Leia a postagem com atenção que no tutorial já explica como fazer isso.
Olá, como eu posso adicionar links nas fotos ? assim, a pessoa vê a foto, clica em cima e é redirecionada pra uma outra pagina ???
@Renatto França:
Vc não deve ter copiado o código do campo nº 4 todo,copiou? é o que está abaixo de : div class="paging"
ou então vc precisa ajustar, no CSS, as cores dos numeros de acordo com as cores do seu template.
No meu não fik os numeros "1, 2, 3, 4" só as imagens passando
pena que no meu blog nao fica bom se eu nao colocaria. era disso que eu tava prescisando, mas eu vou add nos favoritos vou ver se colocou em algum outro blog