Mostrando postagens com marcador carrossel. Mostrar todas as postagens
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.
Assinar:
Postagens
(
Atom
)
