Olá garotas tudo bem? Bom á pedido de uma leitora fofa ela me pediu como colocar um slide no blog. Então decidi trazer o Nivo slider. Acho que todo mundo já ouviu falar dele. É ele que eu uso na revista, para ver uma prévia clique aqui, e ele que vou colocar no próximo layout do blog. E muitas meninas tem dúvida de como colocar, assim como eu quando não sabia pensei que fosse um bicho de 7 cabeças, mas é super simples e muito fácil, muito mesmo. Deixa o blog com um estilo mais personalizado, e eu amo slides em blogs, fico parada o tempo que for preciso só pra ver todas as fotos do slide, adoro mesmo. Vamos aprender?
Créditos á Adolescente Virtual
Primeiro vai no seu HTML, e procure por </head>
Depois você cole esse código abaixo.
<style type="text/css">
/* <![CDATA[ */
#w2bSlideContainer {position: relative;display: block;top:0px; left:0px; right:0px;/*Ajuste as posição do slide*/}
#w2bNivoSlider { position:relative;
width:640px !important; /*largura do slide*/height:300px !important; /*Altura do slide*/
background: #fff url("http://4.bp.blogspot.com/-TBMTXcO0VxM/T7dSfCUe9dI/AAAAAAAABgY/dmbkzgOPQI0/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 3px solid #000;/*Coloque borda se quiser*/ }
#w2bNivoSlider img {position:absolute; top:0; left:0; display:none}
.nivoSlider {position:relative;width:100%;height:auto;}
.nivoSlider img {position:absolute;top:0;left:0}
.nivo-main-image {display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img {display:block}
.nivo-caption {padding: 5px;
font-family: Arial,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width: 630px;/*Largura da legenda*/ z-index:8;}
.nivo-caption p {padding:2px;margin:0}
.nivo-caption a {display:inline!important}
.nivo-html-caption {display:none}
.nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;
background: url("URL_IMG_SETA") no-repeat;text-indent:-9999px;border:0}
.nivo-prevNav {left:10px}
.nivo-nextNav {background-position:-30px 0!important;right:10px}
.nivo-controlNav {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
.nivo-controlNav a {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;
background:url("URL_IMG_BULLETS") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#w2bNivoSlider').nivoSlider({
effect : 'random',
slices : 10,
boxCols : 8,
boxRows : 4,
animSpeed : 500,
pauseTime : 4000,
startSlide : 0,
directionNav : true,
directionNavHide : true,
controlNav : true,
keyboardNav : false,
pauseOnHover : true,
captionOpacity : 0.8
});
});
/* ]]> */
</script>
Logo depois você crie um gadget HTML/JAVASCRIPT e cole esse código.
<div id="w2bSlideContainer"><div id="w2bNivoSlider"><a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a><a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a><a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a><a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a></div></div>
Após fazer tudo isso, use este tutorial para colocar o slide na posição desejada.
Em todo o código já está bem explicado o que se deve fazer. Siga os passos que está pedindo em negrito e está pronto. Se precisarem de ajuda é só falar.!
87 Chocolates viraram Cupcakes
Adoro esse tutorial , slide no blog
ResponderExcluirfica muito lindo ><
# Mil beijos :*
>>> http://pensamento-jhenny.blogspot.com.br/ <<<<<
Paasse lá ! '
Fica lindo mesmo, eu adoro.
ExcluirBeijos
eu procuro os códigos mais nunca acho me ajuda
ExcluirTava precisando desse tutorial, pois nunca achei um que funcionasse rsrs...
ResponderExcluirhttp://pequena-julieta.blogspot.com.br
Beijos!
Conheça as novas postadoras do blog :)
Que bom linda, essa funciona certinho sim
ExcluirBeijoos
Ótimo tutu, eu usei tanto slide em meus layouts que enjoei sabe mas fica legal ;)
ResponderExcluirBeijos
Nossa eu nunca enjoo de slide nao, no proximo lay vou trocar esse pelo Nivo
ExcluirBeijinhos
Amei o tutorial, vou tentar fazer!
ResponderExcluirNão deixe de dar uma passadinha lá no blog para conferir nossas novidades de anéis de falange :)
Beijinhos
http://buledetule.blogspot.com
Obrigada linda, faz sim
ExcluirBeijos
Esse slide é muito bacana, o problema é que não curto muito 3u3 Kissez!
ResponderExcluirJu, do Epílogos e Finais.
Que pena Ju acho ela uma fofura
ExcluirBeijos
Ótimo tutorial, vou tentar fazer no meu.
ResponderExcluirwww.sayinpassing.blogspot.com.br
Faz sim
ExcluirBeijoos
Eu uso xDD
ResponderExcluirBeijo, Lili
Princesa Teen. / Layout novo.
Se inscreve? / Meu vlog.
é lindo né?
ExcluirFicou bacana o novo layout.
Beijos
Ah, queria muito descobrir como usar esse recurso, agora já sei e vou testar super!
ResponderExcluirAdorei!
Beijos
http://talitascoralick.blogspot.com.br/
Usa sim linda é super facil e moderno
ExcluirBeijos
Adoro este tutorial, deixa o blog com um "ar" profissional! Haha. (:
ResponderExcluirBeijos, imfuckingazombie.blogspot.com.
Aham deixa sim acho otimo
ExcluirBeijos
Eu acho lindo slide no blog, mas tenho receio de colocar, tenho medo de que o blog fique lento :/ Então flor, as formas de pagamento são: Boleto Bancário, TEF, cartão de crédito (parcelado em até 18x)e depósito bancário.
ResponderExcluirBeijinhos <3
Garota Inocente
Nao fica lento nao, fica super leve em qualquer navegador.
ExcluirObrigada por responder minha duvida
Beijinhos
Que dicas uteis flor, queria muito colocar um slide no meu blog, vou tentar, viu? Ah, seu blog é lindo!
ResponderExcluirConvido você a conhecer meu blog, e participar deste post, ficarei muito feliz, lembrando todos que participarem deste post, estarão no blog no dia 23/02: http://anaateen.blogspot.com.br/2013/02/carregando.html
Beijos, Analine Grippa!
Oi linda obrigada pelos elogios.
ExcluirBeijoos
Legal o tutorial, beijos
ResponderExcluirhttp://window-soul.blogspot.com.br/
Obrigada meu bem
ExcluirAdoro slides
Beijinhos
Oii!! Eu queria deixar apenas 1 slide, não os 4 passando, aí eu exclui os outros 3 códigos no java script/html nos gadgets e deixei apenas 1 código, mas mesmo assim, ele fica trocando de slide.. O que eu poderia fazer? Bjss
ResponderExcluirBom como ele é um slide, mesmo que vc exclua os codigos as imagens, ou no caso a imagem vai continuar passando. Pq ele foi feito para ir passando as imagens mesmo que so tenha uma, ela vai ficar se repetindo.
ExcluirNao sei oq vc quer fazer, mas acho que pra esse caso como vc so quer uma imagem daria para vc colocar um gadget apenas com a tag , sabe como se faz? Senao sabe me fala que vou tentar te ajudar. Beijinhos linda
apenas com a tag **
ExcluirOlá querida, eu tenho uma duvida, assim que coloquei o Nivo no meu site toda vez que divulgo um link especifico no Facebook, a imagem que aparece é uma das imagens do slide e não do post que eu fiz. Como acertar isso?
ResponderExcluirBjão!
Nunca tinha ouvido falar nisso. Vou pesquisar a respeito. Mas provavelmente deve ter algum link no codigo.
ExcluirSe vc puder me passar o link do seu facebook e o link do blog, eu te ajudo nisso ta?
Beijos.
Obrigada por me responder, mas é estranho mesmo. Tipo se eu colocar qualquer link do meu blog http://www.beautyrock.com.br pra divulgar no Facebook, só aparecem as fotos do slide. Inclusive vi na página de algumas pessoas que divulgaram meus links e tava acontecendo sempre o mesmo.
ExcluirMe passa os links para mim ver?
Excluirhttp://www.beautyrock.com.br/2013/02/resenha-lentes-roxas-da-pink-paradise.html
ResponderExcluiré estranho porque no começo uns dias atras mesmo com os slides tava tudo normal, perfeitinho a divulgação e tudo mais, nem tive esse problema com Facebook, mas de uns dois dias pra cá mudou. Será que é um problema do facebook?
ResponderExcluiré verdade, Bom se for algum problema com o facebook vc pode procurar outras pessoas que postem links e no blog tem slide, se o problema for igual ai pode ser sim no facebook.
ExcluirBoa noite gostaria se você teria alguma ideia de como colocar 2 slaid diferentes em um blog
ResponderExcluire já tenho um slaid só que quando coloco esse o 1 da erro sera que poderia me ajudar ?
Seu Blog e nota 10
Acho que vc poderia colocar um slide de cada tipo.
ExcluirTipo assim colocar 2 slides diferentes, com 2 codigos, Assim pode dar certo.
Se quiser posso fazer um post ensinado
Beijinhos linda, e obrigada
Ops desculpe
ExcluirBeijos Fagner *
Olá, eu não consigo fazer isso no meu blog. Poderia me ajudar?
ResponderExcluirQualquer coisa me add no facebook " Leoh Menndes ".
Oi Leoh, eu nao tenho facebook para te add.
ExcluirMas qual o problema que vc ta?
Pode falar que eu passo todos passo a passo para vc.
Beijoos
deu certo a parada, mas eleficou tipo centralizado no meoi confira www.castelodoterror.blogspot.com . como faço pra chegar elepro canto esquerdo??? e para que ps gadgets fiquem dolado deles, tipos pq eles desceram tb sacas? no caso pra que fique tipo assim http://www.vaiassistindoterror.com/ oslide ocupando so a cima da pagina de postagem???
ResponderExcluirBom para isso voce vai ter que colocar o gadget em primeiro lugar da sua sidebar, vai ficar torto e em cima dos outros gadgets, mas ja vamos arrumar, logo após vc vai seguir esse outro tutorial: http://cupcakeofchocolate.blogspot.com.br/2013/01/como-colocar-gadgets-no-cabecalho-aviso.html
ExcluirQuer serve para vc mudar a posição do gadget, entao assim vc ajusta ele no lugar ideial que vc quer,
Se tiver duvidas pode perguntar
Giselle entendi o tutorialmais tentei tentei e naum consegui. vc poderiame add no face https://www.facebook.com/ron.bragio?ref=tn_tnmn ??? pramim te passarminha senha e vc fazer pra mim.por favorrr muito desespero rsrs, ja temmeses qto tentando colocar slides no meu blog e hjfinalmente consegui so falta essa parada q te falei.. brigadaumm!
Excluirhaa conseguiiii !!!!! rsrs.mais naofoi como codigo pqele poe aonde quer so q fica porcima das coisas tampando =/ maisdei 1 jeitinho rsrs. e como façoprapor a setinha no slide??? pq ja colei o url de seta la na parte background: url("URL_IMG_SETA") so q naum aparece de jeito nenhum... asbolinhas eu consegui! e temcomo mudar o efeito dele tipo escolher somente um?
ResponderExcluirQue bom que vc conseguiu, fico feliz.
ExcluirVc vai precisar encontrar uma imagem que seja de setinha, elas irao substituir as bolinhas.
E esse efeito nao tem como mudar. Ele é o efeito do Nivo slide. So se vc escolher outro slide com outro efeito.
Beijos
ola fiz tudo certinho, ms o me ficou muito no meio queria pode coloca-lo no canto, como voce conseguiu colocar o seu ali? me ajuda por favor
ResponderExcluirColoquei com esse outro tutorial que eu ensinei aqui http://cupcakeofchocolate.blogspot.com.br/2013/01/como-colocar-gadgets-no-cabecalho-aviso.html
ExcluirSe tiver duvida pode perguntar.
Beijao
Giselle me bateu outra duvida. sao4imagens no slide, temcomo acrescentar mais 1? se sim como?
ResponderExcluirPode sim Ron, voce deve colocar esse codigo após o codigo da ultima foto. Pode colocar quantos quiser.
ResponderExcluir< img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/>
Caso tenha duvidas pode perguntar.
Beijao
Ps: Retire o espaço antes de img src. O blogger não permitiu eu escrever tag, por isso tive que add um espaço no meio
ExcluirEste comentário foi removido pelo autor.
ResponderExcluirmas i a parte que rediriciona para o link da pag desejada tem como naum?
ResponderExcluirNão entendi a pergunta
Excluirno caso o codigo ali q vc colocou tem a pate do url daimagem e o lugar pra por o titulo,!! mas eo lugar que colocar o link de postagem que vai pra pagina quando clima em cima?
ExcluirTinha esquecido de copiar essa parte rs.
Excluir< a href="LINK_DO_SLIDE_1">< img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/ >
Procurei por muitos tutoriais ate em vídeo mas nenhum funcionava no meu blog e eu fazia tudo passo a passo,e nada (falo muito neh) em fim esse foi simples fácil direto e rápido nem precisei ficar quebrando a cabeça pra ficar modelando ele simplesmente perfeito muito obrigada mesmo esta aqui a previa do meu futuro blog =D
ResponderExcluirhttp://seunovomundoaqui.blogspot.com.br/
Oi Missa, fico realmente muito feliz com seu comentario.
ExcluirFico feliz em poder ajudar vc.
Desculpa a demora em responder
Beijao
Amei o tutorial >.<
ResponderExcluirhttp://blogdaelaniia.blogspot.com.br/
Fico feliz Elania.
ExcluirBeijos
Oi Giselle, você pode me dizer qual o tamanho ideal para as imagens dos slides, o meu não esta redimensionando automaticamente, da uma olhadinha por favor, beijos e obrigada, estava procurando exatamente isso!!
ResponderExcluirhttp://nossojeitinhobrasileiro.blogspot.com.br/
Entao o tamanho das imagens que eu usava era width: 500px;height: 335px;
ExcluirMas vc pode ir em width:640px !important; /*largura do slide*/height:300px !important; /*Altura do slide*
Que esta no codigo e mudar o tamanho para o da sua imagem.
Tenta fazer isso.
Beijao, duvidas pode falar
Oii Giselle, muito obrigada por responder tão rápido=)
ResponderExcluireu coloquei as imagens na resolução 640px x 355px e deu cetinho..
ficou lindoo ameii!!! muito obrigada!
Que isso linda, é um prazer ajudar vc.
ExcluirFico feliz que deu certo
Vou la ver.
Beijos
Adorei, mas tem que editar o código antes num bloco de notas, tipo as cores pq fica complicado :s
ResponderExcluirVou usar! Bjs
http://delicadaeimperfeita.blogspot.com/
é tem pessoas que fazem isso mesmo.
ExcluirPara mim ja é mais facil no proprio blogger.
Beijos, que bom que gostou.
Passei dias procurando como colocar um slide no blog, graças a você eu consegui thank you =) http://webradiodoforro.blogspot.com.br/
ResponderExcluirQue bom Rubens.
ExcluirFico feliz em poder te ajudar.
Beijos
Onde eu acho o HTML ??? pf eu preciso mt que me ajude. obg
ResponderExcluirModelo> Editar HTML
ExcluirOpa, nossa muito bom esse post mesmo, foi muito útil pra mim, tava atras de um slide no meu blog a tempos ... agr queria sabe como faço pra que os links do slide abram em uma noa guia ? Desde já obrigado pela atenção. att Gabriel Oliveira
ResponderExcluirhttp://brutosdoterere.blogspot.com.br/
Obrigada querido(a). Fico feliz em poder te ajudar e ter sido util em seu blog.
ExcluirBom para fazer isso é simples você só precisa adicionar uma tag a mais no codigo do html.
Assim < a href = "LINK_DO_SLIDE_2" target = "_blank " > TEXTO < / a >
Ps retire os espaços desnecessários do codigo.
Olá,
ResponderExcluirAmada que lindo seu blog.Já estou seguinndo e já me tornei fã.
Se puder retribuir a visita segue o meu e curte minha página.
Blog: http://femmemakiup.blogspot.com.br/
Página: https://www.facebook.com/Luisamakiup
Obrigada querida, seja bem vinda.
ExcluirOtimo muito bom parabéns
ResponderExcluirLOLcases capas para celulares http://www.lolcases.com.br/
https://www.facebook.com/LOLcasesCapasparaSmartphones
Obrigada, vou dar uma passadinha na sua loja :)
ExcluirInstalei o Nivo Slider, mas ele está conflitando com a área de últimas postagens e o box de redes sociais, você pode me ajudar? O blog é este: http://radiocruzdasarmas104.blogspot.com.br
ResponderExcluirnão Consigo achar onde coloca o gadget Onde é ??
ResponderExcluirnão consegui ver o slide na revista =[
ResponderExcluirConfesso que tive dificuldade em achar imagens que enquadrasse no slide, mas o tutorial foi o melhor que achei. Muito bom!
ResponderExcluirJá estou usando!! :3
http://imperfeitasperfeitas.blogspot.com.br/
amei o blog e as dicas! abraços www.cantomaebebe.com.br
ResponderExcluirMe ajuda nao acho nenhum codigo
ResponderExcluirFinalmente alguém me ajudou e essa ajuda deu certo, muito obrigada!! <3
ResponderExcluirAdorei o tutorial, ficou certinho, agora só falta ajeitá-lo *-*
ResponderExcluirObrigada <3
http://www.leticiakoliveira.com/
Funcionou certinho, mas as imagens não ficou do tamanho do slide certinha, ficou pequena.
ResponderExcluirComo faço para ficar do mesmo tamanho que o slide?
inecarlablog.blogspot.com.br
Fiz tudo conforme a instrução, mas não funcionou.
ResponderExcluirheey queria saber como eu faço pra exibir o slide apenas na HOME do blog?
ResponderExcluirHeey queria saber como faço para exibir o slide apenas na HOME do blog
ResponderExcluirDeixe um recadinho sobre o blog. Obrigada!