Banner Rotativo

De Melhor Loja Web

Quero Criar um Banner Rotativo em minha Loja Virtual. Como fazer?

O primeiro passo é inserir este código abaixo em sua loja. Veja como fazer:

1- Copie o código abaixo, pois precisaremos dele para ativar o banner rotativo:

<head> <link href='http://helpdesk.eti.br/renato/ferramentas/SliderMLW/SliderMLW.css' rel='stylesheet'> </head> <div class='slideshow-container'> <div class='mySlides fade'><a href='#'><img src='www.linkdaimagem1.com.br' style='width:100%'></a></div> <div class='mySlides fade'><a href='#'><img src='www.linkdaimagem2.com.br' style='width:100%'></a></div> <div class='mySlides fade'><a href='#'><img src='www.linkdaimagem3.com.br' style='width:100%'></a></div> <a class='prev' onclick='RemoverSlide()'>❮</a> <a class='next' onclick='AdicionarSlide()'>❯</a> </div> <br /><br /> <div style='text-align:center'> <span class='dot' onclick='currentSlide(1)'></span> <span class='dot' onclick='currentSlide(2)'></span> <span class='dot' onclick='currentSlide(3)'></span> </div> <script type='text/javascript' src='http://helpdesk.eti.br/renato/ferramentas/SliderMLW/SliderMLW.js'></script>



Feito isto, siga os passos abaixo:

1- Acesse "Layout" e clique no botão "Ver/Editar os arquivos de Layout".

Bannerr1.jpg

2- Na página inicial, escolha para editar "Default.html" é página inicial padrão. Ao abrir o editor já estará nela:

Conteudo banner.PNG

3- Insira o código entre %%Panel.Header%% e div id="Wrapper". Ou seja, irá inserir o código na linha 7.

Banner teste novo2.jpg

4- Clique no botão "Salvar" para finalizar.

Salvarfim.PNG

Feito isto, faça agora o upload da imagens de irá utilizar:

Upload de Imagens

1- Acesse Conteúdo do site e clique em "Gerenciar Imagens":

Bannerr2.jpg

2- Clique em "Enviar Imagens":

Bannerr3.jpg

3- Escolha as imagens salvas em sua máquina. Observação: Para um bom funcionamento do Banner, as imagens devem ter a proporção de 1920x500.

Bannerr4.jpg

4- Após subir as imagens, serão exibidas miniaturas como abaixo. Copie o endereço da imagem de cada uma delas. Para isto clique com o botão direito do mouse em cima da imagem em questão e selecione "Copiar endereço da imagem".

Bannerr5.jpg

5- Salve estas urls e siga para o próximo passo.




Finalizando o Banner Rotativo

1- Acesse "Layout" e clique no botão "Ver/Editar os arquivos de Layout".

Bannerr1.jpg

2- Na página inicial, escolha para editar "Default.html" é página inicial padrão. Ao abrir o editor já estará nela:

Conteudo banner.PNG

3- Nas tags img src=, insira a url das imagens do passo anterior e clique em salvar.

Obs: Edite apenas as tags img src=

Ferramentas pessoais