Muito bem , a um tempo atrás fiz uma postagem , mostrando como é fácil fazer um slide jquery , “como criar um slideshow com jquery” , bom nesse post usei a biblioteca jquery e o plugin cycle .
Então nesse post vou mostrar como é simples usar o jquery e o plugin cycle para Colocar slide jquery no blogspot , então sem mais enrolação vamos la !
Primeiro vá ate a aba layout do blogspot e clique em adicionar um gadjet , feito isso vai abrir uma nova janela com diversas opções , a que nos interessa agora é a opção HTML/JAVASCRIPT , como na imagem abaixo:
Muito bem , ao clicar , vai abrir uma nova janela , onde você ira configurar o titulo que pode ser qualquer um e também há o espaço “conteúdo” que é onde será colocado os códigos html e javascript , veja a imagem abaixo :
Agora tudo o que você precisa é colocar os códigos necessários para o slide show , que são os seguintes:
- o script de configuração do plugin cycle.
2. logo abaixo , a marcação html necessária :
Que é apenas uma div que recebera o slide e dentro dessa div , as imagens que irão compor o slide show.
Veja a imagem abaixo :
Essa é a marcação mínima necessária para o slide funcionar , nessa parte , ainda é necessário editar o HTML do blogspot , que será o próximo passo , não há necessidade de criar um css para essa div , ela serve apenas para o slide , como já foi dito , mas , se utilizar o código como ele esta acima , as imagens ficarão em seu tamanho original , então é importante que todas ela tenham a mesma largura e mesma altura , ou opcionalmente você pode declarar o width e height da imagem dentro da linha de código :
Links nas imagens
Não é o aconselhável , é melhor que suas imagens tenham sempre o mesmo tamanho , que sejam proporcionais.
É claro que caso queira um slide com um efeito mais interessante , devera configurar o css , mas nesse post vou mostrar apenas o básico .
Muito bem , levando em consideração que você já tenha salvo o código , vamos ao próximo passo.
Clique na aba modelo e depois em editar html , vai abrir um aviso , clique em prosseguir :
Então abrira o código html do blog , muito bem , próximo passo , digite ctrl + f , busque por </head> e logo acima dessa tag , antes dela ser fechada coque a seguinte linha de código:
Veja a imagem:
Clique em salvar modelo e pronto , agora seu slide deve funcionar perfeitamente !
Lembrando que é sempre importante , primeiro testar em um blog a parte , para que se houver algum erro , não afete seu blog.
Bom também fiz o vídeo abaixo , nele mostro como fazer , apesar do vídeo ter ficado com uns cliques chatos , vale apena dar uma olhada , o slide que fiz no vídeo ficou mais completo , porque nele editei o css , como digo no vídeo que os códigos estariam em meu blog , aqui estão eles , caso queira copie e cole , fique a vontade !
código completo:
- Parte do gadjets
O html
- o css .
#slide{width:900px; height:300px; position:relative; overflow:hidden; margin:0 auto;}
#slide img{width:900px; height:300px; z-index:5;}
#next {width:80px; height:60px; position:absolute; left:0; text-decoration:none; background-color:#333; text-align:center; line-height:60px; color:#fff; font-weight:bold; z-index:300; }
#prev {width:80px; height:60px; position:absolute; right:0; text-decoration:none; background-color:#333; text-align:center; line-height:60px; color:#fff; font-weight:bold; z-index:300; }
#naveg{width:960px; height:60px; position:relative; top:-190px; z-index:50; margin:0 auto; }
Veja funcionando
Configure seu slide
Erro no slide … concertado …
Bom exatamente hoje notei que por descuido meu , coloquei uma sinal de maior “>” dentro do código que configura o slide , e isso da erro claro , nem sei o motivo de eu ter colocado isso la … mas concertei , se você não conseguir fazer seu slide funcionar , deixe um comentário abaixo que tento te ajudar ok ?