Linkbão Oi Torpedo Oi Torpedo Web Click Jogos Online Rastreamento Correios Mundo Oi oitorpedo.com.br mundo oi torpedos mundo oi.com.br oi.com.br torpedo-online Tv Online Resultado Lotofacil Resultado Lotogol Resultado Mega-sena baixa-facil Resultado Loterias Fofocas E-Scripter Claro Torpedo

3/23/2010

doutorblogs- como criar um slide- para o seu blog usando jQuery

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

Você pode ver o efeito neste blog de testes da Gema. Bonito, não? E você verá que é muito fácil colocar um slide assim no seu blog.
Antes de tudo é preciso que você encontre um local para hospedar os scripts que serão utilizados. Eu recomendo o Dropbox, que estou utilizando para guardar todos os scripts que uso. Siga o tutorial Dropbox  e crie sua conta. Feito isto, faça o download dos scripts utilizados para conseguir o efeito:
jQuery.js
s3Slider.js
(basta clicar nos links que o download é feito automaticamente)
Hospede os scripts e copie os urls oferecidas. Vá no código do seu template e antes de </head> cole o seguinte código:

 

<script src='url-do-arquivo-jquery.js' type='text/javascript'/>
<script src='url-do-arquivo-s3Slider.js' type='text/javascript'/>


Logo abaixo, acrescente este código:

 

<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

Alterando o valor em timeOut (negrito) você pode mudar o tempo de transição das imagens.
Salve as modificações. Agora, antes de ]]></b:skin> acrescente o estilo para o slide:
/* s3slider
----------------------------------------------- */
#s3slider {
width: 720px; /* largura total do slide*/
height: 300px; /* altura total do slide*/
position: relative; /* important */
overflow: hidden; /* important */
}
#s3sliderContent {
width: 720px; /* importante que as imagens devem ter a mesma largura ou mais */
position: absolute; /* important */
top: 0; /* important */
padding: 0px;
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 15px/20px Arial, Helvetica, sans-serif;
padding: 30px 13px;
width: 720px;
background-color: #000; /*cor de fundo do slide*/
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
bottom: 0;
/*
Nesta última linha em negrito, determina se a caixa de texto aparecerá na parte superior ou inferior das imagens
top: 0; -> a caixa de texto aparecerá na parte superior
si ponemos
bottom: 0; -> a caixa de texto aparecerá na parte inferior
*/
}
.clear {
clear: both;
}


Salve as modificações. Agora você deve posicionar o slide no blog com o código html. Um bom local é a div crosscol, que fica logo abaixo do cabeçalho. Certifique-se de que ela está visível para acrescentar o código, procurando por este trecho (não é preciso expandir modelo de widget):

 

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

 

Em showaddelement deve estar yes . Se o seu template não contiver este trecho, basta acrescentar, abaixo de <div id='content-wrapper'>
Salve a modificação e vá para a aba Layout. Acrescente o seguinte código em crosscol (abaixo do cabeçalho):

 

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="url-imagem" />
<span>texto-a-ser-exibido</span>
</li>
<li class="s3sliderImage">
<img src="url-imagem" />
<span>texto-a-ser-exibido</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

 

Para tantas forem as imagens a serem exibidas, repita o trecho:

 

<li class="s3sliderImage">
<img src="url-imagem" />
<span>texto-a-ser-exibido</span>
</li>


Se você desejar transformar os textos em links, basta colocar:
<span><a href='http://url do post'>Texto da legenda</a></span>

Salve as modificações. Agora você deve posicionar o slideonde quiser .

Bookmark and Share

0 comentários:

Postar um comentário

seja bem vindo ao mundo do doutorblogs, e sendo asim espéro ser merecedor de suas amizades e lhe convido para visitar mais e ser um dos Seguidor de nosso blogs.
atenciosamente douotrblogs.

Copie o código referente a imagem e cole
:-A :-Z :-C :-X :-E
:-F :-G :-H :-I :-J
:-K :-L :-M :-N :-O
:-P :-Q :-R :-( :-T
:-a :-e :-i :-o :-w

uma lista com as últimas postagens que ira gostar.

Hello visitante seja bem vindo sua presença é um prazer

ads ads ads
 

Recommended links

  • ads
  • ads
  • ads
  • ads

DOUTOR. Copyright © 2009 Gadget Blog is Designed by Ipietoon Sponsored by Online Business Journal

Creative Commons License
This work is in the Public Domain.
Linkbão Oi Torpedo Click Jogos Online Rastreamento Correios Mundo Oi oitorpedo.com.br mundo oi torpedos mundo oi.com.br oi.com.br torpedo-online Tv Online torrent Resultado Dupla Sena Resultado Loteria Federal Resultado Loteca Resultado Lotofacil Resultado Lotogol Resultado Lotomania Resultado Mega-sena Resultado Quina Resultado Timemania baixa-facil Link-facil Resultado Loterias