
Este artigo é realização do pedido de Joel Sorio por e-mail no qual ele quer colocar um slide em seu blog (parceiro do GdT). Então vou ensinar a como colocar no Blogger, a mesma plataforma que ele usa, com a ferramenta JQuery que aumenta os efeitos durante a transição das imagens.
Para colocar o slide no seu blog, é preciso escolher as imagens que farão parte da animação. Neste tutorial, vou usar a configuração com o tamanho máximo de 580 pixels por 325 pixels. Edite as imagens conforme o tamanho máximo em um programa de imagens de sua preferencia e logo após envie todas pro Picasa (Servidor da Google).
Pode ver um pequena demostração acessando nossa página de testes. Está funcionando perfeitamente e sem erros na página, na plataforma Blogger.
Recomendo que faça o backup do template antes de seguir com este tutorial, para que possa voltar caso haja um erro na edição ou no layout.
Indo ao editor do template
Primeiramente, acesse o seu painel do Blogger, abra o menu dropdown e elcolha a opção “Modelo”. Depois clique no botão chamado “Editar HTML” e “Prosseguir”.
Editor HTML do Blogger |
Colocando o script no template
Depois de ter acessado o editor HTML, pesquise a seguinte linha utilizando a ferramenta do próprio navegador (Ctrl+F):
</head>
Encontrou? Caso tenha visto, copie os códigos abaixo e cole em cima da linha pesquisada:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->
<script type='text/javascript'>
$(window).load(function() {
$('#featured').orbit({
advanceSpeed: 5000,
'bullets': true,
'timer' : true,
'animation' : 'horizontal-slide'
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>
Adicionando estilos ao slide
O próximo passo é adicionar os estilos (ou CSS).
Para colocar no template, pesquise por:
]]></b:skin>
E cole acima as seguintes linhas CSS:
/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}
div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}
div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}
span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhPl2pVcI/AAAAAAAAAas/O7A5Aa7ZMhs/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}
span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}
span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TMHhQItQqeI/AAAAAAAAAaw/afLXhP0yQI8/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}
span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPCHG1JI/AAAAAAAAAak/EiGTzJCfL1c/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}
div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }
div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}
div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }
div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}
div.slider-nav span.right {
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPefIDjI/AAAAAAAAAao/Gyy0k0F5Hzw/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhNd07EPI/AAAAAAAAAaY/_k9SqP88gV8/s1600/left-arrow.png);
left: 10px;
}
.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}
.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhLtWyUXI/AAAAAAAAAaU/8MQ8LP5flS8/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: #222; background-position: -7px 0;
}
Colocando as linhas HTML no template
Por fim, ensinar a colocar algumas linhas adicionais para visualizar o slide na página do seu blog. Para isso, crie um novo gadget na página layout no painel do Blogger e cole dentro o seguinte código:
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='featured'>
<a href="LINK_IMAGEM_1"><img rel='foto1' src="URL_IMAGEM_1" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto1'>DESCRIÇÃO_IMAGEM_1</span>
<a href="LINK_IMAGEM_2"><img rel='foto2' src="URL_IMAGEM_2" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto2'>DESCRIÇÃO_IMAGEM_2</span>
<a href="LINK_IMAGEM_3"><img rel='foto3' src="URL_IMAGEM_3" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto3'>DESCRIÇÃO_IMAGEM_3</span>
<a href="LINK_IMAGEM_4"><img rel='foto4' src="URL_IMAGEM_4" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO_IMAGEM_4</span>
</div>
</b:if>
Coloque os links do artigo que representa a imagem onde está escrito “LINK_IMAGEM”, adicione a URL da imagem onde está aparecendo “URL_IMAGEM” e descrição em cada linha.
Qualquer duvida é só comentar, até mais!
vlw man massa ajudo muito ^^
ResponderExcluirFico feliz que tenha conseguido colocar o slide em seu blog, ficou muito legal.
ExcluirAbraço!
Eu não consegui ! Por que ?
ExcluirVocê deve seguir os passos desse tutorial de forma correta e com extrema atenção!
ExcluirComo deixar que ele atualize as postagens recentes??
ResponderExcluirNa plataforma Blogger ainda não é possível...
ExcluirVlw!Infelizmente
Excluirtutorial muito bom parabéns!
ResponderExcluirhttp://www.jcminishop.com/blog/
Olá jocelioblog,
ExcluirObrigado pelo elogio!
Abraço :D
Muito, muito Obrigado pelo tutorial! Há um tempo estava procurando um bom Slide, mas, quando achava algum não pegava. Só o seu que pegou, e foi o mais bonito que achei! Obrigado :D
ResponderExcluirDe nada!
ResponderExcluirÉ um prazer ajuda-lá.
Por que demora pra carregar a página?
ResponderExcluirNo meu blog ele parece funcionar, mas a largura dele ficou como se fosse 1 pixel, porque? o.o
ResponderExcluirÉ porque a divisão do seu template está por cima do slide...
ResponderExcluirOlá Fabiano! Você poderia dizer, por favor, como se conserta este problema da divisão do template ficar por cima do slide?
ExcluirTambém estou com esse problema, poderia me ajudar?
ExcluirParece que o template fica por cima do slide e só aparece uma linha de pixel.
Olá, peço que envie uma screenshot ou endereço da página para eu verificar o problema com o slide. Qualquer dúvida basta comentar aqui no artigo!
ExcluirSegui o tutorial e deu super certo. Muito obrigado! Uma dúvida: que código eu colocaria pra, em vez de deslizar, as imagens fizessem a transição em fade?
ResponderExcluirTente usar a mesma jquery do Wow Slider... Abraços!
ResponderExcluirÉ por causa dos scripts excessivos na página.
ResponderExcluircomo colocar um tipo de slide com um tamanho de imagem convencional em um template já com um slider diferenciado com imagens mais compridas que o normal ???
ResponderExcluirlink do blog = http://nfswvicio.blogspot.com.br/
ass : Gabriel walker
Para diminuir o comprimento do slide, basta modificar os valores de "width" e "height" nas linhas CSS do mesmo.
ExcluirNao tem mano to tentando diminuir este slide faz um tempao
ExcluirOlá, obrigado pelo slide como já foi dito é o melhor e mais fácil de pegar da net, já o tamanho dele no blogger não consegui no CSS mas no "width" e "height" das imagens no gadget do Blogger, mas fica a dica que tem que reduzir ou aumentar todas as imagens apreferência.
ExcluirCurti os tutoriais mais to levando uma surra aqui. to pra começar um blog adulto e queria deixar o slide funcionando na página inicial logo acima dos posts.
ResponderExcluirMas existe alguma maneira do slide ser baseado no feed ?
Estou usando o template 00343 @ templateparablogspot.com
Esse slide é configurado manualmente, pois foi feito para blogger e o mesmo não tem opções avançadas...
ExcluirÉ possível colocar mais imagens no Slide, obviamente? Se sim, saberia me dizer se existe um limite? Ou poderia ir adicionando novas imagens (com links para minhas postagens e tudo mais) sem medo de um dia parar de funcionar por excesso de imagens? Se puder responder minha dúvida, eu agradeço! Até mais.
ResponderExcluirOlá Mr. Game World,
ExcluirO slide não traz nenhum tipo de limite, mas recomendo que não exagere na quantidade de imagens para não deixar a sua página pesada demais!
Abraço.
vlw, consegui, deem uma olhada: http://www.downloadroid.blogspot.com.br/
ResponderExcluirMuito show esse tutorial.
ResponderExcluirFácil, prático e funcional.
Exatamente como eu queria.
funcionou legal, muito top
ResponderExcluirCara parabéns pelo tutorial. Porém, eu gostaria que o slide aparecesse somente na Página Inicial. Tem como adicionar alguma linha de comando para isso?
ResponderExcluirAbraços e parabéns pelo seu site, está demais!
Olá Viagem a Cores,
ExcluirVocê pode fazer o seguinte, poderá utilizar o seguinte código:
< b:if cond='data:blog.url == data:blog.homepageUrl' > - Retire os espaços -
------ Código do Slide ------
< /b:if > - Retire os espaços -
Espero ter ajudado, um grande abraço!
Muito obrigado cara, deu certo!!!
ExcluirFabianou ou Viagem... infelizmente não funcionou.
ExcluirMuito bom..confira em www.lagosesportivo.com.br
ResponderExcluirComo faço para aumentar o tamanho do slide??
ResponderExcluirOlá NatsuOwn,
ResponderExcluirVou mostrar a linha aonde pode ser aumentada o tamanho, lembrando que todas as imagens devem seguir sofrer a mesma definição...
Vou deixar em negrito a linha css para mudar o tamanho da largura e altura das imagens:
< a href="LINK_IMAGEM_2">< img rel='foto2' src="URL_IMAGEM_2" style='width:580px; height:325px;' />< span class='orbit-caption' id='foto2' >DESCRIÇÃO_IMAGEM_2< /span >
Aonde esta em negrito é feita a modificação do tamanho das imagens deste slide e devem ser feitas também na imagem 1, 3 e 4 ou mais caso haja.
Abraço.
Não tem como mudar o efeito nesse slide?
ResponderExcluirOlá, não é possível mudar o efeito! Abraço.
ExcluirDeu tudo certo mais nao consigo só deixar na pagina inicial nem usando esse código < b:if cond='data:blog.url == data:blog.homepageUrl' > - Retire os espaços -
ResponderExcluir------ Código do Slide ------
< /b:if > - Retire os espaços - o que e faço URGENTEEEE
ñ apareceu!
ResponderExcluirNão apareceu nada!! Nem pequeno, nem grande, nada! E eu fiz tudo certinho como está explicado... Pode me ajudar? Será que é por causa do template q eu instalei? Obrigada!
ResponderExcluirhttp://www.geral-mais.com
Obrigado!!! Me Ajudou muito!
ResponderExcluirNo meu não deu certo !
ResponderExcluirValew pelo tutorial, me ajudou muito http://www.aindatorindo.com ^^
ResponderExcluirTem como aumentar o tamanho do slide , como w
ResponderExcluirSim é possível!
ExcluirEncontre a linha aonde está o valor de "width" e "height" no código do slide (não no script) e mude de acordo com a sua preferência.
Abraço.
Fabiano, fiz isso... mas a imagens ficam embaçadas... e estão no tamanho que coloquei no código!
Excluirman vc é o cara!!!! ajudou muito!!!!!!!! vo virar seguidor do site , GOSTEI!
ResponderExcluirCara, como faço para centralizar a imagem no blog? Abç.
ResponderExcluirVlw mesmo cara, estava precisando de um desse, seu site é muito bom. Obrigado e continue fazendo tutoriais. Abraços!
ResponderExcluirGostei muito!
ResponderExcluirCara blza?Meu querido show debola seu post, parabéns mesmo...cara poderia explicar mais detalhadamente como agente poderá deixar o slide somente na pagina principal, vc explicou acima mas como não entendo sua linguagem se vc explicasse ajudaria muito, se não pode parabéns de qualquer maneira o slide ficou show...aguardo sua resposta
ResponderExcluirObrigado pelo tutorial !! Funcionou direitinho no meu blog, na primeira tentativa !!
ResponderExcluirVeja funcionando >>> http://amtonline.blogspot.com.br/
Primeiramente parabéns pelo tutorial e deu certinho aqui no meu blo. mas eu quero saber como eu fasso para deixar o slide mais rapido?
ResponderExcluirabraços
A velocidade do slide é controlada através do script do mesmo, basta procurar por "advanceSpeed" e mudar o valor com a velocidade de sua preferencia. Abraço!
ExcluirSem comentários. Só tenho uma palavra pra dizer. Obrigadoooooooooooo. Valeu mesmo pela atenção e por disponibilizar essa ótima ferramenta. Caso alguém queira ver o resultado segui o link abaixo http://www.rockdown13.com
ResponderExcluirAbraço e fica com Deus
Por nada, qualquer dúvida estou à disposição! Abraço.
ExcluirNão Consegui Fazer . Segui tudo q Tinha q fazer mas ..
ResponderExcluirNormalmente os templates tem tags diferentes e é preciso achar o mais parecido, caso tenha duvidas basta comentar!
ExcluirMuito foda, resolveu meu problema...Muito fodam VLW!
ResponderExcluirComo faço para aumentar o tamanho do slide ou alinha-lo na area de postagem?
ResponderExcluirFuncionou aqui, muito bom cara! parabéns e muito obrigado pelo simples tutorial ;)
ResponderExcluirNão sei como agradecer, tutorial simples, fácil e me ajudou muito! Obrigadissíma!
ResponderExcluirEu não consegui me ajuuuuuuuda!
ResponderExcluirsocorro gente..
kk
eu fiz tudo certinho no começo
mais a parte do gadjet e colocar link da imagem
url da imagem nao estou sabendo..será qe pode me ajudar?
Vou destacar aqui os lugares aonde você troca a imagem e o link de sua preferência:
Excluir< img rel='foto2' src="URL_IMAGEM_2" style='width:580px; height:325px;' / >< / a >< span class='orbit-caption' id='foto2' > DESCRIÇÃO_IMAGEM_2 < / span >
Então eu não sei qual a diferença de "Link" de imagem e "Url" de imagem...
Excluironde pego isso ???
"Url" eu pego Clicando na propriedades de imagem
e copio o codigo, certo?! E o link ??
Url Tá certo ou estou invertendo ??
por favor me ajuda!!!
no meu blog está ficando uma foto em cima da outro nao está como slides...já fiz de tudo!
LINK_IMAGEM_ = é o link da PÁGINA (artigo, site, página estática) que a imagem no slide vai retratar.
ExcluirURL_IMAGEM_ = é o link da IMAGEM.
DESCRIÇÃO_IMAGEM_ = uma breve descrição sobre a imagem no slide.
Então
Excluirolha o que eu estou fazendo..
Link_IMAGEM : eu peguei o link onde a imagem está postada, certo?
URL_ IMAGEM : Propriedades da imagem e copiei o codigo
DESCRICAO: Coloquei o titulo falando da foto
minhas fotos estao ficando uma em cima da outra! nao está como slides, oq ta pegando ?? Me ajuda por favooorrrrr
http://camiilagata.blogspot.com.br/
To enxendo o saco né?!
ExcluirMais é qe nao estou conseguindo preciso da tua ajuda...
euu juro que se me ajudar irei fazer um post sobre isso
ensinando as pessoas tbm.. muito dificil ¬¬
sei qe meu blog nao tem nada haver cm isso
mais vou fazer só pra agradecer! :)
Olá! Entendo o sua dificuldade em colocar de forma correta este slide em seu blog, bem como a paciência em adiciona-lo.
ExcluirPara que as fotos não fiquem uma sobre as outras você deve adicionar o script do slide na área correta e o estilo CSS também, ambos estão escritos neste artigo.
A tag URL_IMAGEM é aonde você deve colocar o endereço de uma foto na internet, e o LINK_IMAGEM é o endereço do seu artigo aonde está a foto...
Obrigado desde já!
Parabéns pelo tutorial, foi o único que eu achei e consegui usar.
ResponderExcluirVocê poderia dizer como faz para mudar os slides de lado? Pois eu queria por na direita. Obrigada.
http://doisquintos.blogspot.com.br/
É possível colocar em qualquer área de seu blog, mas é necessário um conhecimento básico de HTML para que haja sucesso...
ExcluirPara colocar acima de seus artigos, procure pela linha:
div class="main section" id="main"
E cole o último código que esta neste artigo antes do código encontrado.
Para diminuir ou aumentar o slide, encontre a linha aonde está o valor de "width" e "height" no código do slide (não no script) e mude de acordo com a sua preferência.
Abraço.
Deu super certo. Valeu!
ResponderExcluirOlá Pessoal, instalei este plugin no meu site, onde ele carrega 5 imagens .png transparentes. Porem quando abre o site as imagens carregam todas de uma so vez, uma em cima da outra. E como as imagens são transparentes, fica uma zona.
ResponderExcluirAs imagens passam uma por vez .... Mas tem como quando carregar o plugin, carregar apenas uma imagem ???
Como faço para que o slide show tenha mais numeros de fotos? Alguém me ajuda?
ResponderExcluirBasta continuar o código HTML do slide:
ResponderExcluir<a href="LINK_IMAGEM_4"><img rel='foto4' src="URL_IMAGEM_4" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO_IMAGEM_4</span>
<a href="LINK_IMAGEM_5"><img rel='foto5' src="URL_IMAGEM_5" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO_IMAGEM_5</span>
<a href="LINK_IMAGEM_6"><img rel='foto6' src="URL_IMAGEM_6" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO_IMAGEM_6</span>
Pode colocar quantas imagens tu quiser nele, mas cuidado para não deixar pesado no seu blog...
Abraço!
Obrigado. Coloquei no meu blog www.assombrado.com.br e deu certinho.
ResponderExcluirdeu certo confira ele aqui -->http://desdegarotinha.blogspot.com.br/
ResponderExcluirOi, estava tudo bem e de repente deixou de dar... já fiz os mesmos passos e não dá nada... sabe qual as razões para poder deixar de dar? valeu...
ResponderExcluirdava mas ja nao da... porque sera?
ResponderExcluirGostaria de saber como fazer pra imagem se ajustar ao slide, eu queria usar ela apenas 580x150px
ResponderExcluironde coloco o link de destino , quando clicar na imagem!
ResponderExcluirProcure por:
Excluir<a href="LINK_IMAGEM_
Onde está escrito "LINK_IMAGEM_" você coloca a URL de destino.
Muito bom!
ResponderExcluirVlw, Fabiano!
Opa, tudo certo?
ResponderExcluirFera, esse slide que você está disponibilizando é somente para blogger?
Obrigado
Não é somente para Blogger.
ExcluirComo consigo redimensionar ele?
ResponderExcluirPor padrão, os tamanhos estão assim:
Excluirstyle='width:580px; height:325px;'
Mude os valores de width e height no tamanho que você desejar.
As imagens ficaram umas cima da outra por que ? fiz algo errado ?
ResponderExcluirConseguir, agora quero saber como diminuo o slide ?
ResponderExcluirPor favor, como tira ou muda aqueles números que ficam ?
ResponderExcluirOlha como ficou o meu: www.oscorujas.com
Olá vc pode me dizer o q deu errado? Porque as bolinhas no canto de cima não estão alinhadas?
ResponderExcluirAqui está a página onde eu testei:
http://yumenonak.blogspot.com.br/
To precisando de ajuda se puder me ajudar agradeço muito.
ResponderExcluirAs bullets do meu slide ficam separadas quando coloco o slide dentro do gadget.
Quando coloco o código html do slide direto no html abaixo de:
-div class='region-inner main-inner'
Ele fica perfeito mas não consigo alinhar ele com a postagem, fica muito pra esquerda.
Aqui tá o link do blog:
http://nathmoments.blogspot.com.br/
Ae o slide quase deu certo, porem onde fica os pontinhos azuis que ficam trocando d acordo com as imagens fica aparecendo os numeros 1,2,3,4!e ao inves de 4 pontos azuis ficam aparecendo tbem pontos pretos
ResponderExcluirno total de 8 pontinhos. Como faço para resolver isso ???
Olá, preciso do endereço do seu blog para que eu possa analisar com mais profundidade.
ExcluirAbraço.
Estou com problemas com o meu slider, que já veio com o template... poderia me ajudar. Se possível, me adicione no Facebook ou G+... abração
ResponderExcluirJosé, envie um e-mail para que eu possa resolver seu problema.
ExcluirE-mail: contato@guiadatecnologia.com
Abraço.
Não conseguir fiz tudo passo a passo e refiz novamente, mas nada...
ResponderExcluirComo Faço para deixar o slide apenas na página inicial do meu blog? http://ocorretorpaulo.blogspot.com.br/ Tutorial muito bom, ficou ótimo!
ResponderExcluirOlá Paulo Roberto,
ExcluirVocê pode fazer o seguinte, poderá utilizar o seguinte código:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
------ Código do Slide ------
</b:if>
Espero ter ajudado, um grande abraço!
Olá Fabiano Obrigado pela atenção onde devo colocar este código ? em modelo editar Html ? ou layout html java script? tentei em html java script porém la ja possuia este 2 códigos ...
ExcluirDeve adicionar em Modelo > Editar HTML
ExcluirAh Ok , cara sem querer abusar kkkkk , onde devo colar os códigos? acima de /* ORBIT SLIDER (segunda parte do tutorial) Ou acima de <script (primeira parte do tutorial)
Excluirvaleu Abraço!
Acima do código HTML do slide (última parte), caso tenha colocado o HTML em um widget HTML/JavaScript recomendo você colocar diretamente no template, mas fácil de ocultar...
ExcluirConsegui Fabiano !!! haha valeu msmo agora está perfeito vale a pena lembrar caso alguem te pergunte , nomeando o gadget fica mais facil de localizalo no editar HTML e resolver facil este incomodo da uma olhada aqui ---> http://www.cherryboomb.com/2012/02/ocultar-gadgets-em-determinada-pagina.html
Excluirabraço!
Ótimo Paulo! Obrigado pela dica, abraço.
ExcluirTestado e aprovado....show!
ResponderExcluir