Slideshow Carrossel com jquery para blog
Slideshow Carrossel
Neste artigo, vamos explicar como inserir um slideshow carrossel com jquery em seu blog, e editá-lo para inserir as imagens e links que você quer divulgar.O slideshow carrossel com jquery é uma sequencia de imagens pequenas que flutuarão em forma de círculo em sentido horário ou anti-horário numa certa velocidade determinada pelo jquery.
A maioria dos Plugins deste sistema é paga, e é difícil encontrar na internet sites que disponibilizam esses códigos gratuitamente. Além disso, os tutoriais são complexos e normalmente em páginas estrangeiras.
O slideshow carrossel com jquery é muito usado para divulgar banners de parceiros ou postagens, pois sua interface permite inserir muitas imagens e links de forma dinâmica e profissional. E hoje, vamos liberar o código jquery, explicar como montar e aplicar em seu blog.
Atenção! O slideshow carrossel com jquery foi projetado para funcionar com as medidas e o número de imagens específicos, porém, pode ser editado, e é isso que vamos mostrar!
Tutorial Carrossel
Para começarmos, copie o código da caixa de auto seleção, abaixo, e cole no bloco de notas, para que você possa trabalhar no código conforme explicado aqui no post:Após copiar o código e colar no bloco de notas, você notará que o código está divido em três partes: CSS, JAVASCRIPT e HTML
O CSS está entre as tags <style> e </style>, o SCRIPT começa com <script type="text/javascript..." e termina com </script>, o HTML começa com <div id="wide-wrapper"> e termina com </div>
Agora que você sabe em quais etapas se encontra o código do slideshow, vamos trabalhar seguindo os padrões descritos.
No CSS, não é necessário que se altere nada, pois já preparamos os estilos para se adaptar em qualquer template.
No javascript, você irá procurar pelo seguinte comando:
height: 350,
Tamanho da largura do gadget a ser inserido no blogitemWidth:120,
Largura da caixa onde ficará a imagemhorizontalRadius:270,
Largura do círculoverticalRadius:85,
Altura do círculo (Caso queira inverter a posição do círculo, coloque o sinal de menos atrás do número -exemplo: verticalRadius:-85,)Agora, vamos ao HTML e vamos trabalhar com as imagens e os links.
Você notará que na parte HTML, explicada acima, existe um conjunto de códigos repetidos como este abaixo:
<li><a href = "#"><img alt='Thumb' border='0' src='#'/></a>
<p class="title"> </p>
<p class="description"> </p>
</li>
1º
O primeiro # refere-se ao endereço de redirecionamento, ou seja, para onde o leitor será redirecionado ao clicar na imagem. Caso não queira, basta deletar o # (jogo da velha)2º
O&segundo #' refere-se ao endereço onde sua imagem está hospedada, ou seja, link para puxar a imagem. 3º
O espaço laranja refere-se ao título da imagem. Caso queira colocar o título e a descrição, aparecerá logo abaixo do slideshow. 4º
O espaço vermelho refere-se à descrição da imagem. Se não quiser, basta deixar em branco.Se você quiser diminuir o número de imagens no slideshow, basta eliminar este trecho no HTML referente a cada imagem:
<li><a href = "#"><img alt='Thumb' border='0' src='#'/></a>
<p class="title"> </p>
<p class="description"> </p>
</li>
O mesmo funciona se você quiser aumentar o número de imagens. Basta adicionar o conjunto de códigos, acima, dentro do HTML antes da tag </ul>
Você deve instalá-lo como um Gadget ou Widget.
Não se preocupe, pois fizemos vários testes em blogs padrões do Blogger, e em blogs personalizados com vários scripts em funcionamento, e não entrou em conflito com nada. Funciona perfeitamente!
É possível instalá-lo na coluna lateral, rodapé, abaixo das postagens, acima das postagens, dentro das postagens, dentro das páginas estáticas, etc...
Redimensione as imagens antes de colocá-las no carrossel, pois o slideshow carrossel com jquery para blog não ajusta automaticamente as imagens, e, sendo assim, imagens muito grandes irão afetar a visualização das outras imagens.
7 comentários :
O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.
Assinar:
Postar comentários
(
Atom
)
quis deixar a caixa menos, mas a altura da moldura continuou grande, como posso diminuir?
ResponderExcluirAnnie, é necessário alterar dentro do script. Abs..
ExcluirPQ AS MINHAS IMAGENS NÃO APARECEM???
ResponderExcluirCris, vc inseriu os links das imagens corretamente?
ExcluirOlá amigo, tenho um menu que possui html, css e jquery, o html e css eu consegui colocar, mas eu coloco o jquery antes do < / head> e não funciona, existe alguma adaptação para eu colocar o meu jquery junto ao html em um gadget? Abraço
ResponderExcluirProfessor pardal ,do sistema .top
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluir