No tutorial em questão, o slide tem 980px de largura e as imagens ficam dispostas lado a lado, abrindo-se a medida em que passamos o mouse sobre elas.
Hoje irei mostrar dois outros modelos, que ficam muito bonitos quando colocados em cima da área de postagem ou mesmo no topo da sidebar
IMPORTANTE! Vale lembrar que a largura dos elementos de página do Blogger, variam de template para template e que é necessário que vocês façam os ajustes no CSS de acordo com as suas necessidades. Os dois modelos que irei apresentar foram testados nos Templates do Dicas Blogger, com sidebar à direita.
Modelo 1 – largura 500px
Passo 1- entre no HTML do template e procure por ]]></b:skin>
Cole ANTES dessa tag o seguinte código
/* Image Slideshow */
#s3slider{margin:15px; width:100%; height:250px; position:relative; word-wrap:break-word; overflow:hidden;}
#s3sliderContent{width:100%; position:absolute; bottom: 0; margin:0px; padding-left:0px; }
.s3sliderImage{float:left; position:relative;display:none; }
.s3sliderImage span{position:absolute; left:0; font:normal 12px 'Arial',Helvetica,sans-serif; padding:0px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; color:#fff; display:none;bottom: 0; }Passo 2- procure pela tag </head> e cole ACIMA dela:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.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>Passo3 - procure por <div id='main-wrapper'> e cole este código logo embaixo:
<b:if cond='data:blog.pageType != "item"'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='url do link'>
<img src='url da imagem'/>
<span>DESCRIÇÃO</span></a></li>
<li class='s3sliderImage'>
<a href='url do link'>
<img src='url da imagem'/>
<span>DESCRIÇÃO.</span></a></li>
<li class='s3sliderImage'>
<a href='url do link'>
<img src='url da imagem'/>
<span>DESCRIÇÃO.</span></a></li>
<li class='s3sliderImage'>
<a href='url do link'>
<img src='url da imagem'/>
<span>DESCRIÇÃO.</span></a></li>
<li class='s3sliderImage'>
<a href='url do link'>
<img src='url da imagem'/>
<span>DESCRIÇÃO.</span></a></li>
<div class='clear s3sliderImage'/>
</ul>
</div>
</b:if>Substitua “url do link” pelo endereço do post, "url da imagem", pelo endereço da imagem e em DESCRIÇÃO, escreva algo sobre aquela imagem.
Apague as partes que estão em verde, se quiser que os slides apareçam em todas as páginas e não somente na home.
Modelo 2 -largura 610px
Utlize imagens de 610 x 320 px ou de acordo com sua necessidade
Entre no HTML do template e cole este código antes da tag ]]></b:skin>
#slider-holder{width: 610px;height: 320px;overflow: hidden;
margin-bottom:-10px; margin-left:17px; margin-top:-20px;padding: 15px 0 0 0;}
#s3slider { width: 610px; /* largura da imagem */
height: 320px; /* altura da imagem */position: relative; /* important */overflow: hidden; /* important */}
#s3sliderContent {width: 610px; /* largura */
position: absolute; /* important */top: 0; /* important */margin-left: 0; /* important */}
.s3sliderImage {float: left; /* important */ position: relative; /* important */ display: none; /* important */}
.s3sliderImage span { position: absolute; /* important */ left: 0; font-weight: 700; font-size: 0.834em; color: #ffffff; padding: 20px 15px 50px 13px; height: 73px; width: 600px; background-color: #4e4d3c;
filter: alpha(opacity=70); /* opacidade do box */
-moz-opacity: 0.7; /* opacidade do box */
-khtml-opacity: 0.7; /* opacidade do box */
opacity: 0.7;
display: none; bottom: 0;
}
.s3sliderImage span a.featured-title:link,
.s3sliderImage span a.featured-title:visited{color: #fff;padding: 0px 0px 2px 0px;font-size: 1.167em;}
.s3sliderImage span a.featured-title:hover{color: #999;}
.s3sliderImage span a:link,
.s3sliderImage span a:visited{color: #888;}
.s3sliderImage span a:hover{color: #555;}
Siga o passo 2 do modelo1.
Siga o passo 3 do modelo 1, mas use este código:
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div class='black-bg' id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='LINKS'><img alt='Imagen 1' src='URL DA IMAGEM' style='width: 610px; height: 320px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='#LINK' rel='bookmark' title='TÍTULO DO POST'>TÍTULO</a><br/>
DESCRIÇÃO
</span>
</li>
<li class='clear s3sliderImage'/>
</ul>
</div>
</div>
</b:if></b:if>- A parte em vermelho deve se repetir para cada nova imagem.
- Em Link, coloque a url que será associada à imagem.
- Em url da imagem, cole o endereço da imagem.
- De um título e uma descrição às imagens.
Nos dois modelos, foram utilizados javascript. O endereço do arquivo é:
Recomendo salvar o arquivo .js, hospedar em algum site de sua preferência e substituir a url nesta parte do código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
O script pode ser colocado diretamente no template. Preste muita atenção!
Abra o arquivo .js no bloco de notas. No código do passo 2, apague esta linha:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>Agora, copie este código, colando todo o script (JS) no local indicado.
<script type='text/javascript'>
//<![CDATA[
COLE AQUI O SCRIPT
//]]>
</script>
