Slide Show JQuery –

NOTA: Esse tutorial foi revisado e atualizado e testado em 28 de janeiro de 2010. Alguns leitores tiveram dificuldade para instalar e, realmente ele requer muita atenção na instalação para que possa funcionar perfeitamente. Boa sorte!

Neste tutorial vamos aprender a editar e inserir no Blogger . É um ótimo recurso para quem deseja expor seus trabalhos, layouts, fotos ou indicar outros sites, etc. As imagens se transformam em links.

Clic na imagem para vê-lo em ação.

Vamos ao tutorial.

Lembre-se de fazer um back up do seu template antes de qualquer alteração.

Copie todo o código CSS abaixo e cole acima do trecho (antes de)

]]></b:skin>

IMPORTANTE!! Confira!! A largura do slide Show deve ser a mesma ou menor que a do espaço onde será inserido. No modelo “Mínima do Blogger, por exemplo, a largura do Header é 660px. Portando será necessário redimensionar ou o slide ou o template.

CÓDIGO

/* CSS div#slide-holder */
div#headerSlider div.wrapSlider{
width:810px; /*largura do slideshow*/
height:288px;/*altura do slideshow*/
background:#000;
border: 2px solid #333;
padding-top: 10px;
margin: 0 auto;
}
div#headerSlider div#slide-holder{
z-index:40;
height:288px;
position:absolute;
}
div#headerSlider div#slide-holder div#slide-runner{
top:5px;
left:5px;
width:800px; /* largura*/ height:278px; /* altura*/
overflow:hidden;
position:absolute;
}
div#headerSlider div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#headerSlider div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:800px; /* largura*/
height:46px;
display:none;
position:absolute;
background:transparent url(http://i9.photobucket.com/albums/a65/mamanunes/slide-bg.png) repeat scroll 0 0;
}
div#headerSlider div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#headerSlider div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
color:#ccc;
}
div#headerSlider div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
background-image:url(http://i9.photobucket.com/albums/a65/mamanunes/silde-navSlider.png);
}

Copie todo o código abaixo e cole abaixo de ]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'type='text/javascript'/>

<script type='text/javascript'>var _siteRoot='index.html',_root='index.html';</script>
<script src='http://blogspot-choen.googlecode.com/files/scriptsSlider.js'type='text/javascript'/>
<script type='text/javascript'>
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"Red Dark *by DNB","desc":"Free Blogger Template"},
{"id":"slide-img-2","client":"Spiral *by DNB","desc":"Free Blogger Template"},
{"id":"slide-img-3","client":"Clock In The Wall","desc":"DNB Free Blogger Template"},
{"id":"slide-img-4","client":"Salto Alto *by DNB","desc":"Free Blogger Template"},
{"id":"slide-img-5","client":"Butterfly *by DNB","desc":"Free Blogger Template"},
{"id":"slide-img-6","client":"Fly *by DNB","desc":"Free Blogger Template"},
{"id":"slide-img-7","client":"Menina Jeans *by DNB","desc":"Free Blogger Template"}];
</script>

ATENÇÃO!!

Os textos em vermelho referem-se ao nome e descrição das fotos. Faça as mudanças com muito cuidado para não apagar nenhuma parte importante.

Agora copie todo o código HTML abaixo e substiua o endereço em vermelho pelo endereço da sua foto/imagem. O que está escrito “Modelo” (em verde) é o texto que antecede a descrição das fotos, podendo ser trocado pelo que vc quizer.

<div id='headerSlider'><div class='wrapSlider'>
<div id='slide-holder'>
<div id='slide-runner'>
<a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a>
<div id='slide-controls'>
<p class='text' id='slide-client'><strong>Modelo: </strong><span/></p>
<p class='text' id='slide-desc'/>
<p id='slide-nav'/>
</div>
</div>

</div>
</div></div>

Onde colar o código HTML

Para exibir o slideshow no Cabeçalho (header) do blog, procure em sua folha de estilos (documento HTML) pelo seguinte trecho:

<div id='header-wrapper'>

Cole o código HTML que copiou, abaixo do trecho.

Para exibir abaixo do Header, procure pelo seguinte trecho:

<div id='content-wrapper'>

Cole o código HTML que copiou, abaixo do trecho

Prontinho.
Clic em VISUALIZAR e se estiver tudo bem clic SALVAR MODELO.

Eu recomendo que você faça o download dos scripts e hospede no Dropbox (site que presta serviço de hospedagem de documentos), Substitua o meu endereço pelo seu, é mais seguro.

segunda-feira, 14 de novembro de 2011

Slide Show JQuery –

0 comentários:

Postar um comentário

Fique Atualizado

Arquivo