Banner Rotativo
De Melhor Loja Web
(→Quero Criar um Banner Rotativo em minha Loja Virtual. Como fazer?) |
(Manutenção no código de adicionar o banner que estava formatado errado) |
||
| (11 edições intermediárias não estão sendo exibidas.) | |||
| Linha 1: | Linha 1: | ||
| - | + | 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: | |
| - | + | <code><head> | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | < | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
<link href='http://helpdesk.eti.br/renato/ferramentas/SliderMLW/SliderMLW.css' rel='stylesheet'> | <link href='http://helpdesk.eti.br/renato/ferramentas/SliderMLW/SliderMLW.css' rel='stylesheet'> | ||
</head> | </head> | ||
| + | |||
<div class='slideshow-container'> | <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.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.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> | <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='prev' onclick='RemoverSlide()'>❮</a> | ||
<a class='next' onclick='AdicionarSlide()'>❯</a> | <a class='next' onclick='AdicionarSlide()'>❯</a> | ||
| Linha 42: | Linha 23: | ||
<span class='dot' onclick='currentSlide(3)'></span> | <span class='dot' onclick='currentSlide(3)'></span> | ||
</div> | </div> | ||
| - | <script type='text/javascript' src='http://helpdesk.eti.br/renato/ferramentas/SliderMLW/SliderMLW.js'></script></ | + | |
| + | <script type='text/javascript' src='http://helpdesk.eti.br/renato/ferramentas/SliderMLW/SliderMLW.js'></script></code> | ||
| Linha 49: | Linha 31: | ||
Feito isto, siga os passos abaixo: | Feito isto, siga os passos abaixo: | ||
| - | 1- Acesse "Layout" e clique no botão "Ver/Editar os arquivos de Layout". | + | '''1-''' Acesse "Layout" e clique no botão "Ver/Editar os arquivos de Layout". |
[[Arquivo:Bannerr1.jpg]] | [[Arquivo:Bannerr1.jpg]] | ||
| - | 2- Na página inicial, escolha para editar "Default.html" é página inicial padrão. Ao abrir o editor já estará nela: | + | '''2-''' Na página inicial, escolha para editar "Default.html" é página inicial padrão. Ao abrir o editor já estará nela: |
[[Arquivo:Conteudo banner.PNG]] | [[Arquivo:Conteudo banner.PNG]] | ||
| - | 3- Insira o código entre '''%%Panel.Header%%''' e div id="Wrapper" | + | '''3-''' Insira o código entre '''%%Panel.Header%%''' e div id="Wrapper". Ou seja, irá inserir o código na linha 7. |
[[Arquivo:Banner_teste_novo2.jpg]] | [[Arquivo:Banner_teste_novo2.jpg]] | ||
| - | 4- Clique no botão "Salvar" para finalizar. | + | '''4-''' Clique no botão "Salvar" para finalizar. |
[[Arquivo:Salvarfim.PNG]] | [[Arquivo: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": | ||
| + | |||
| + | [[Arquivo:Bannerr2.jpg]] | ||
| + | |||
| + | '''2-''' Clique em "Enviar Imagens": | ||
| + | |||
| + | [[Arquivo: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.''' | ||
| + | |||
| + | [[Arquivo: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". | ||
| + | |||
| + | [[Arquivo: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". | ||
| + | |||
| + | [[Arquivo:Bannerr1.jpg]] | ||
| + | |||
| + | 2- Na página inicial, escolha para editar "Default.html" é página inicial padrão. Ao abrir o editor já estará nela: | ||
| + | |||
| + | [[Arquivo: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=''' | ||
Edição atual tal como 15h14min de 2 de março de 2020
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>
<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".
2- Na página inicial, escolha para editar "Default.html" é página inicial padrão. Ao abrir o editor já estará nela:
3- Insira o código entre %%Panel.Header%% e div id="Wrapper". Ou seja, irá inserir o código na linha 7.
4- Clique no botão "Salvar" para finalizar.
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":
2- Clique em "Enviar Imagens":
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.
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".
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".
2- Na página inicial, escolha para editar "Default.html" é página inicial padrão. Ao abrir o editor já estará nela:
3- Nas tags img src=, insira a url das imagens do passo anterior e clique em salvar.
Obs: Edite apenas as tags img src=
