|
   |
| Comunidade uCoz em Português » Informações Gerais » Primeiros Passos com o uCoz » SLIDE (Como criar um Slide) |
| SLIDE |
Boa tarde,
Tenho uma loja virtual e gostaria de informações para criar um SLIDE para exibição de algumas imagens ao invés do banner rotativo que já coloquei lá. Meu site é luxoemamar.com. Não sei trabalhar com HTLM, por isso peço bastante detalhes para que me auxiliem na criação desse slide. Aguardo retorno. Grata, Aline |
Oi Aline.
No seu caso Aline, o template que você usar é em tabela, e é 100% de largura. Isso quer dizer que ele não tem uma largura fixa e varia de acordo com o monitor do client (quem acessa o site), então precisamos estabelecer uma largura fixa, e o comum é 1024px. Então adicione no CSS do seu site o seguinte código: Código body > div:nth-child(2), body > div:nth-child(4){width: 1024px;margin: 0 auto;} Agora é preciso criar um Bloco Global. Bloco Global, é uma variável que se pode criar e essa variável funciona em qualquer parte do site onde o HTML funciona. Dentro desta variável podemos inserir qualquer código HTML/CSS/JS e a próprias variáveis do uCoz. Saiba como criar um Bloco Global aqui http://forum.ucoz.com.br/forum/12-19-1 Basta colocar o código do Slider no Bloco Global na parte do template que você quer que ele (o slider) apareça. No seu caso de Aline, que quer substituir as categorias do módulo Loja Virtual pelo slider, então use a ferramenta Substituição rápida, e substitua por $GLOBAL_SLIDER$, onde a parte em vermelho é o nome que você deu ao bloco global. Agora precisamos montar o Slider. Existem vários tipos de slider jQuery na internet então é possível usar qualquer um deles no seu site uCoz, mas para que tem está começando eu recomendo usar uma ferramenta Online chamado comSlider. Lá você pode construir o seu slider, e vai ser gerado um código HTML para seu slider. Então depois cole ele no Bloco global que você criou e salve. Veja meu código: Código <div id="comslider_in_point_192701"></div><script type="text/javascript">var oCOMScript192701=document.createElement('script');oCOMScript192701.src="http://commondatastorage.googleapis.com/comslider/target/users/1396129029xae86ba2dd22117897c9b0741ab8a7779/comslider.js?timestamp=1396132416";oCOMScript192701.type='text/javascript';document.getElementsByTagName("head").item(0).appendChild(oCOMScript192701);</script> Pronto, seu slider já está funcionando no seu site. 
Anexos:
9943762.png
(363.6 Kb)
Lembre-se! Não estamos na sua cabeça, então seja claro ao postar uma dúvida.
Não dou suporte por mensagem privada. Quem preferir suporte particular, procure no Painel de Controle do site ou na página http://www.ucoz.com.br/contact. |
| |||
| |||