Dentro do script abaixo, você poderá alterar o tamanho das imagens de acordo com as medidas do seu template, mudar a cor do background, da exibição, cor e formato das bordas.
A velocidade da exibição também pode ser alterada.
Vamos lá:
Códigos/Script
<script src='http://ajax.googleapis.Para mudar as cores do background, largura, formato e cor das bosdas, procure o código:com/ajax/libs/jquery/1.3.2/ jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------ ------------
s3Slider
Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0
Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
------------------------------------------------------------ -------------- */
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<style type='text/css'>
#s3slider {
background: #000000;
border: 5px inset #584536;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}#s3sliderContent {
width: 550px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>
background: #000000; (veja tabela de cores AQUI)
border: 5px inset #584536;
5px é a largura da borda
inset é o formato, pode ser double, outset, solid, dashed
#584536 é o código da cor
Borda dotted
Borda dashed
Borda solid
Borda double
Borda groove
Borda ridge
Borda inset
Borda outset
Para mudar o velocidade de slideshow, altere o valor 4000
Para mudar o tamanho das imagens mude:
width: 550px; (largura)
height: 200px; (altura)
width: 550px; (largura)
Como inserir o script e as imagens acima da área de postagem:
1. Faça o login no Blogger e no seu painel clique em ►Layout
2. Clique na aba ► Editar HTML
3. Encontre a tag </head>
4. Copie código do script e cole- ANTES da tag </ head>
Salve o modelo
Agora volte para a página Layout e clique em "Adicionar um gadget"
Escolha um gadget HTML/JavaScript e coloque dentro dele o seguinte código:
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6iSBNm6isE7DQOZUd5rHd0V2ZEOlVG5T7GONUzoR47RhStf9sErZ6ERSLzBnLDAKPbEKOFWkhyZZ0fD2jSsVVRRg9ElN0IPGM-DiuRX0KJSKvMCMqczapI3fccbLQLP_yqNm0r3pBcmY/s320/Foto1.jpg" />
<span>Texto: Título do post </span></a>
</li>
<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhojTtOebNHCFy3w6y95DGPKqyEc2sE05Xg8YI5PzqWJcFBr2puzYrWt75HNXfoH-xdRPLPbYc4rBAONd1Qy5Pkxk1ackfz_Kg_NCmcH5cTArPC1iB4OmiDeLh3h5dQt4glQ1VFOh5YIzE/s320/Foto2.jpg" />
<span>Texto: Título do post</span></a>
</li>
<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9J31HLvVewt6Phy34THZU5hwtxR2nzI36hfbHxrXsnsSP59o4X813RqNr0bmGw48lcq9JQjB4aM84Vpd086xTtU1MLXHPuezzBPXCfamUHTo3lTKXVofJpTy0wH0zAXLXn-q3DySCTys/s320/Foto3.jpg" />
<span>Texto: Título do post</span></a>
</li>
<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiOt5tDgIxWKSv6wPw9cLAIdDA-cEJJlVdpyRz9E0_lFmOn02JEidtBJniJn7gQBnk9Aac0z-N1d0z1zLSUorF0LcDD-Bed_rpXhTR3_5jvZsrQ8PGM4SnjJFasEdmCaIqA5hhHJy5FdI/s320/Foto4.jpg" />
<span>Texto: Título do post</span></a>
</li>
</ul>
</div>
<div class='clear'></div>
Edite o código colocando o link e o endereço da sua imagem (destaque em vermelho e azul)
Salve. Clique sobre o gadget, arraste e solte acima da seção "Postagens"
Visualize e salve!!
Observe que neste exemplo usei apenas quatro imagens com links. Você pode exibir menos ou mais links acrecentando ou retirando as seções (código abaixo).
ATENÇÃO! Cole sempre os códigos adicionais acima/antes da tag </ul>
<li class="s3sliderImage">Prontinho! Eu acho que você vai gostar do resultado!
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6iSBNm6isE7DQOZUd5rHd0V2ZEOlVG5T7GONUzoR47RhStf9sErZ6ERSLzBnLDAKPbEKOFWkhyZZ0fD2jSsVVRRg9ElN0IPGM-DiuRX0KJSKvMCMqczapI3fccbLQLP_yqNm0r3pBcmY/s320/Foto1.jpg" />
<span>Texto: Título do post </span></a>
</li>
Assinar:
Postar comentários
0 comentários:
Postar um comentário