Yoo ~~
Primeiramente, peço ás postadoras para que pegue o arquivo que eu mandei no e-mail de vocês que é o modelo de postagem que agente usa aqui no BC !
Bom muita gente vem pedindo, de como colocar o slide igual ao do BC, e ainda colocá-lo no cabeçalho !
É fácil, só é difícil na hora de colocar no cabeçalho porque você tem que ajustar tudo direitinho.
Vamos lá ?
Enjoy ~~
FAZENDO O SLIDE !
1. Crie uma gadget html e cole :
<style type="text/css">#slider {width: 550px; /* Largura do slide */height: 100px; /* Altura do slide */position: relative;overflow: hidden;}#sliderContent {width: 550px; /* Largura das as imagens, mesma largura do slide */position: absolute;top: 0px;margin: 0px;padding: 0px;}.sliderImage img{width: 550px; /* Largura das as imagens */height: 100px; /* Altura das as imagens */}.sliderImage {float: left;position: relative;display: none;}.sliderImage span {position: absolute;font: 10px/15px Arial, Helvetica, sans-serif;padding: 10px 13px;width: 100%;filter: alpha(opacity=70);-moz-opacity: 0.7;-khtml-opacity: 0.7;opacity: 0.7;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="LINK AQUI"><img src="URL DA IMAGEM" border="0"/><span class="top"></span></a></li><li class="sliderImage"><a href="LINK AQUI"><img src="URL DA IMAGEM" border="0"/><span class="top"></span></a></li><li class="sliderImage"><a href="LINK AQUI"><img src="URL DA IMAGEM" border="0"/><span class="top"></span></a></li><div class="clear sliderImage"></div></ul></div>
Faça as alterações onde eu destaquei e salve ! Lembrando-se as imagens do slide tem que ter o mesmo tamanho que o slide !
COLOCANDO O SLIDE NO CABEÇALHO
1. Cole o seguinte código acima do código do slide
<div style="position: absolute; margin-top: -100px; left: -200px;">
Margin-top: Diminuir o número, faz com que o menu suba e aumentar faz com que ele desça. Veja que está como negativo, então aumentando e mantendo o sinal, é como diminuir. (por exemplo -200 é menor que -100)
left: É a mesma coisa. Se você diminuir, ele vai para a direita, se aumentar para a esquerda.
Não existe medida certa, você precisa fazer e ir testando até encontrar a que quer.
2. No final do código cole isso:
</div>
3. Salve e veja se está tudo certo !
OBS : Recomendo você deixar a gadget em que você irá colocar no cabeçalho, em cima da gadget de postagem. Assim irá ficar mais fácil.
OBS : Recomendo você deixar a gadget em que você irá colocar no cabeçalho, em cima da gadget de postagem. Assim irá ficar mais fácil.
Ótimo tuto, tudo explicadinho! E começarei a postar amanhã, thanks.
ResponderExcluirObrigado ^^
Excluireu nao entendi amr
ResponderExcluirTa tudo explicadinho *--*
ExcluirBom... Eu tentei, mas fica uma parte em sobra, e não vai mais pro lado :c
ResponderExcluirVocê tem que ficar diminuindo o numero que ta no left !
ExcluirAain adorei o tuto ;D
ResponderExcluircom esse último código dá pra colocar qualquer gadget no cabeçalho?
ResponderExcluirSim :)
ExcluirAs imagens do meu sairam e ele não vai para o cabeçalho,Help!!
ResponderExcluirAcho que você alterou algum código que não era para alterar. Tente refazer tudo denovo.
Excluirnão apareceu nada no meu!
ResponderExcluirTenta refazer !
ExcluirNão consegui colocar no cabeçalho!
ResponderExcluirVocê tem que deixar a gadget em primeiro ou em cima da area de postagem e depois ir ajustando. Eu fiz assim no meu e deu certo !
ExcluirMuito, muito bom mesmo! Tá de parabéns... Eu testei no meu bog
ResponderExcluirde testes e funcionou tudo direitinho! Irei usar no meu próximo lay
\(^u^)/ , nunca pensei que era tão fácil colocar um slide *oo*
mundoo-png.blogspot.com
xx
AUSHUASH obrigado :3
ExcluirBeijos <3
Thiago, eu fiz tudo direito como estava explicado ai deu tudo certo mais na hora de colocar o slide ficou preto atrás das imagens... Oque eu fiz de errado?
ResponderExcluirVocê colocou o tamanho das imagens, no mesmo tamanho do slide ?
ExcluirSim,
ExcluirEntão eu não sei :C
ExcluirOiie, me responde é facinho..
ResponderExcluirNa hora que você diz crie uma gadget html, você quer dizer, html/javascript ou html do próprio código do blog? É que sou novita aqui e não saquei ainda como você faz tutoriais.. mas vou tentando! De qualquer forma A-D-O-R-E-I.
é o html/javascript, é que para nós fica mais rapido de entender usando a pronuncia gadget HTML, porque ela é a unica c:
Excluirótimo tutorial :)
ResponderExcluirEu vi uns 40 e nenhum deles explicou tão bem :D
Obrigado :P
AUSHAUSHAUSHAUSHA oobrigado o3o
ExcluirEu entendi só que não deu certo!Ficou tudo embolado!
ResponderExcluirAAAAA que pena ! Tenta refazer ele :C
Excluireu entendi só que o slide ficou em baixo do cabeçalho.
ResponderExcluirAjusta ele no cabeçalho.
ExcluirTem que apagar essas coisas que estão assim: /* Largura do slide */ ?
ResponderExcluirNoope !
ExcluirSorry, mas na hora de ajustar esta dando erro!!!!! Ve que a maioria não consegue?? Por favor pode fazer um tutorial em video! Pois muitas pessoas ainda não sabem esse HTML mas avaçado! o problema dos outros slides esta no mesmo que o seu!
ResponderExcluirPois é, talvez eu faça isso !
Excluiro meu fica pequeno, tipo corta metade do slide! Oq aconteceu?
ResponderExcluirTem que colocar o mesmo tamanho do slide nas imagens !
ExcluirTudo explicadinho, parabéns! Mas o que é aqueles primeiros números lá em cima? O que a gente deve auterar deles?
ResponderExcluiros numeros são o tamanho do slide ;)
Excluirgostei coloquei no meu blog deu certinho brigadimm =^,^=
ResponderExcluirDe nadim ><
ExcluirQueria saber como botar no canto , mais tipo BEM NO CANTO , to fazendo meu site e queria botar os destaques da Loja
ResponderExcluirAi não precisa mais , eu só troquei o - por + uheuehueh , seu tuto me ajudou muito , o mais fácil que tem na net , acho q amanhã vou botar o novo layout do meu site , bjss
ResponderExcluirwww.arianadaily.com
KKKKKKKKK tudo bem, obrigado u3u
ExcluirComigo não deu :( O slide ficou muito pequeno,e quando eu mudo o tamanho,ele não muda :( pode me ajudar?
ResponderExcluirColoca o mesmo tamanho do slide nas imagens, exemplo : Imagens: 500x334 slide: 500x334
ExcluirPerfeito, amei muito tudo, nunca achei algo tão explicadinho assim, testei e deu certo já estou colocando no meu novo lay 'u'
ResponderExcluircaprichosasbr-oficial.blogspot.com.br
AUSHAUSHAUHSUA obrigado :)
ExcluirSó que como eu faria para colocar outra coisa além do slide? Poem o código no mesmo gadget repetindo ou cria outra gadget para algo diferente ? Tipo uma de afiliados...? Aguardo respostas
ResponderExcluircaprichosasbr-oficial.blogspot.com.br
Não, você tem que colocar outros gadgets. Para isso você deve seguir apartir da parte de Como colocar o Slide no cabeçalho u3u
ExcluirEste comentário foi removido pelo autor.
ExcluirOi! Usei esse código e funcionou muito bem, mas no final de reproduzir todas as imagens, pára. Não volta a repetir. É normal? Obrigada desde já ;)
ResponderExcluirFiz tudo direitinho, mas as imagens estão indo sem o link, só as imagens. Refiz e nada, sabe qual deve ser o problema?
ResponderExcluirVocê não colocou os links na parte do código onde ta escrito Link Aqui !
ExcluirGostei vai me ajudar muito no meu próximo layout. Bjus
ResponderExcluirBy: Sarah Vivic
Blog: http://atual-sempre.blogspot.com.br/ & http://diariodeumamonster.blogspot.com.br/
Thaanks ~
ExcluirPara colocar o slide , tem que adicionar um gadget no cabecalho? Help
ResponderExcluirNão (:
ExcluirO tutorial é ótimo,gostei muito.Pena que eu tentei e deu errado...hehehe...vou tentar fazer de novo.
ResponderExcluirblog-j-a.blogspot.com.br
E pode colocar o estilo no HTML do blog, que eu acho bem melhor, porque não vai ficar aquele espaço(pode até ser que não fique)
ResponderExcluirquando vc disse "acima do código do slide" é no mesmo gadget html ou em outro?
ResponderExcluirSuper duvida: o que é Link da imagem e url da imagem?
ResponderExcluirLink da imagem é para onde a imagem vai onde você clica !
ExcluirLink é o seu site! muitos não ajuda e mas confunde é simples explicar eu também tive duvidas, url e o link da imagem!
ExcluirEu gostaria de saber o seguinte, uma parte do meu fica preto, é assim msm ?
ResponderExcluirVocê deve estar usando imagens de tamanhos diferentes
ExcluirOlá! Fiz no meu blog, funcionou direitinho! Gostaria de dar os parabéns e que você continue postando os tutoriais! Hahaha. Vlw.
ResponderExcluirDar para me explicar o que é Crie uma gadget html e cole? eu não consegui entender essa parte,onde eu vou criar isso onde? e depois eu colo no modelo de HTML? ou no HTMLjavaScript? eu não consegui entender nada parece que você mandou copiar o código mas parece que tem 2 ou 3 modelos diferente dentro do mesmo código, porque tem que explicar tudo por etapa porque ninguém entender por isso que está aqui para aprender quem entender um pouco de HTML é muito mais fácil, vejo que ninguém conseguiu só uma... mais vai ver o site dela ela entende de html, se puder resolver isso agradeço obrigada.
ResponderExcluirVocê vai colar o código em uma Gadget HTML/Javascript !
ExcluirRsrsrsrsrs eu tava akie ai de repende eu achei um comentario de "Luana Caroline" ahueheuehuehue era eu a um ano atrás *-* meu deus como eu era 'estranha' e a pergunta que eu fiz era muito óbvia ahueheuehue, o tutorial é muito fácil e eu cpnsegui hehe! Agente só tem que mudar o margin e o top, e pronto fica perfect *-* agr eu entendo html (: ^^
ExcluirParabéns pelo seu Conteúdo, me ajudou muito...
ResponderExcluirOlá obrigada pela resposta, está parecer fácil, mas na hora de colocar está muito Difícil, vou tentando quando conseguir volto aqui,parabéns sucesso.
ExcluirRealmente não consigo. como não sei o que fazer eu só fiz colocar o link e url da imagem e coloquei o tamanha o onde estava largura e altura o restante não sei como fazer aquilo fico em branco com o risco da cor lateral como se estivesse se mexer, quanto você me cobrar para me fazer isso?
Excluirmuito obrigado em vez de fazer isso que você falo eu modifiquei algumas coisas e fiz um slide classico obrigado
ResponderExcluireu coloquei as imagens do mesmo tamanho do slide,mas na hora em cima e o lado esquerdo ficam preto, por que?
ResponderExcluiré como se a imagem fosse mais pra baixo e pro canto, me explica por que??
http://adolescenciaemmente.blogspot.com.br/
As minhas também, se eu conseguir resolver te aviso
ExcluirMuito obrigada, ficou muito bom. Se eu quiser colocar fotos do meu computador, como faço?
ResponderExcluirOlá eu consegui! ficou lindo! o problema era onde eu estava hospedar a minha imagem! fui em um tutorias e aprendi onde hospedar deu super certo valeu muito obrigada sucesso beijo.
ResponderExcluirhttp://www.ficarbem.com/
Muito obrigado, me ajudou bastante!
ResponderExcluirAbraços!.
tem como deixar ele redondo?
ResponderExcluiro meu fica bugando e as vezes fica num lugar, ai termina de carregar a pagina e vai pra outro o.O
ResponderExcluirThiago eu fiz tudo certinho , u.u fica tudo no lugar mas so na pagina inicial.
ResponderExcluirQuando navega em outras paginas em que a altura da area de posts é maior os gadgets ficam desalinhados :C
Ensina como voçe colocou os seus ? pfv ja apliquei no blog e nao posso deixa-lo fechado ;-;
eii thiago eu coloco o link e aparece o link do meu blog mais o link que eu coloquei
ResponderExcluirAdorei. bem explicado e fácil.
ResponderExcluirUMMMMMMA DÚVIDA
Como por legenda no slide???
Obrigada
o que é slide?
ResponderExcluir