Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 [TUTORIAL] Slidebar com imagens em Ter Mar 26, 2013 5:28 pm

avatarT-Lord
Admin

Slidebar com imagens
Usando
como base este tutorial, pode-se adicionar uma barra de slides
geralmente usada como uma demonstração de imagens, poderá ser usada
também, como um anúncio em seu fórum.



--> Tutoriais, dicas e astúcias <--
Slidebar com imagens



1º - Código a ser utilizado:
Código:
[list=1]
[*]<link rel="stylesheet" type="text/css"
[*]    href="http://jquerytools.org/media/css/scrollable-horizontal.css" />
[*]<link rel="stylesheet" type="text/css"
[*]    href="http://jquerytools.org/media/css/scrollable-buttons.css" />
[*]<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
[*]<!-- HTML structures --><div style="margin:0 auto; width: 634px; height:120px;">
[*]<!-- "previous page" action -->
[*]<a class="prev browse left"></a>
[*]
[*]<!-- root element for scrollable --><div class="scrollable" id="scrollable">
[*]
[*]<!-- root element for the items -->
[*]<div class="items">
[*]
[*]  <!-- grupo 1 -->
[*]  <div>
[*]    <a href="LINK_1"><img src="IMAGEM_1" title="TITULO_1" /></a>
[*]      <a href="LINK_2"><img src="IMAGEM_2" title="TITULO_2" /></a>
[*]  <a href="LINK_3"><img src="IMAGEM_3" title="TITULO_3" /></a>
[*]      <a href="LINK_4"><img src="IMAGEM_4" title="TITULO_4" /></a>
[*]  </div>
[*]<!--Fim do grupo 1-->
[*]  <!-- grupo 2 -->
[*]  <div>
[*]        <a href="LINK_5"><img src="IMAGEM_5" title="TITULO_5" /></a>
[*]      <a href="LINK_6"><img src="IMAGEM_6" title="TITULO_6" /></a>
[*]<a href="LINK_7"><img src="IMAGEM_7" title="TITULO_7" /></a>
[*]      <a href="LINK_8"><img src="IMAGEM_8" title="TITULO_8" /></a>
[*]  </div>
[*]<!--  fim do grupo 2 -->
[*]  <!-- grupo 3 -->
[*]  <div>
[*]          <a href="LINK_9"><img src="IMAGEM_9" title="TITULO_9" /></a>
[*]      <a href="LINK_10"><img src="IMAGEM_10" title="TITULO_10" /></a>
[*]<a href="LINK_10"><img src="IMAGEM_10" title="TITULO_10" /></a>
[*]      <a href="LINK_10"><img src="IMAGEM_10" title="TITULO_10" /></a>
[*]  </div>
[*]<!-- fim do grupo 3 -->
[*]
[*] <!-- Adicione aqui mais códigos-->
[*]
[*]</div>
[*]
[*]</div>
[*]
[*]<!-- "next page" action -->
[*]<a class="next browse right"></a>
[*]</div>
[*]<!-- javascript coding -->
[*]<script>
[*]jQuery(function() {
[*]// initialize scrollable
[*]jQuery(".scrollable").scrollable();
[*]});
[*]</script>
[/list]


IMAGEM -> Substitua pelo url da imagem que deseja
LINK -> Link de redireção de quando for clicado na imagem
Título -> O título que aparecerá ao passar o mouse sobre a imagem




2º - Adicionando o código:
Para que possamos adicionar o código, teremos que publicá-lo na mensagem da home page, para isso devemos aceder ao Painel de controle -> Visualização -> Pagina Inicial -> Geral -> Mensagem da Home Page -> Conteúdo da mensagem


(carregue na imagem para aumentar)

[Você precisa estar registrado e conectado para ver este link.] [Você precisa estar registrado e conectado para ver este link.]
Agora iremos colar o código e clicar no botão confirmar.


  • Resultado:



Ver perfil do usuário http://www.zonetoony.net

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum