Hoje iremos ver um código novo para exibir slides no Blogger, este código além de automatizar algumas partes que antes tínhamos que fazer manualmente, como selecionar as imagens para o slide, ele traz uma grande praticidade que é permitir a escolha do marcador que será utilizado para fazer o slide. Gostaria de ressaltar também que este código foi adaptado pelo Felipe do blog “Forro News”, onde você também pode ver uma demo do código em ação, o tutorial abaixo foi escrito por ele, apenas publiquei aqui no blog.
Passo 1: Faça login no Blogger e acesse, design/editar HTML. O Slider, que é o script que cria o slide, necessita da biblioteca de códigos jquery para funcionar, então procure pela tag <head> e logo após a tag coloque o código abaixo:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> Obs.: Se seu blog já possue o jquery pule para o próximo passo pois não é necessário coloca-lo novamente, pois haverá conflito e o script irá parar de funcionar.
Passo 2: Procure agora pela tag <body> e antes dela adicione o código abaixo:
<script type='text/javascript'>
//<![CDATA[
(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> Logo após o código acima adicione a configuração: <script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 4000
});
});
//]]>
</script> Entendendo a configuração do script: #slider = Identificação do Slider;
timeOut = Tempo de duração para transição de imagens (1000 equivale a 1 segundo);
para aumentar ou diminuir a duração de exibição das imagens, basta modificar o número 4000 para o tempo desejado.
Passo 3: Agora vamos aplicar o estilo do SlideShow. Então procure pela tag ]]></b:skin> e antes dela adicione o código abaixo:
#slider {
position:relative;
overflow:hidden;
}
#slider ul, #slider li {
margin:0;
padding:0;
list-style:none;
}
#sliderContent {
width:100%;
position:absolute;
top:0;
margin:0;
}
.sliderImage {
float:left;
position:relative;
display:none;
}
.sliderImage span {
width:100%;
padding:5px;
bottom:0;
left:0;
position:absolute;
font-weight:normal;
font-family:Arial, Helvetica, sans-serif;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
display:none;
}
.sliderImage strong {
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
.clear {
margin:0;
padding:0;
clear:both;
} Agora salve o modelo e verifique se não apareceram erros no blog. Estando tudo certo, vamos ao próximo passo.
Passo 4: Agora vamos adicionar o widget do SlideShow.
Clique em Adicionar um Gadget > HTML/JavaScript.
Obs.: Não é obrigatório colocar o título.
No conteúdo coloque o script abaixo:
<script language="JavaScript">
MostrarImg = true;
LarguraImg = 270;
AlturaImg = 200;
MostrarData = true;
EstiloData = "normal";
FonteData = 9;
CorData = "#cccccc";
MostrarResumo = true;
ResumoPost = 50;
FonteResumo = 11;
CorResumo = "#ffffff";
FonteTitulo = 12;
CorTitulo = "#ffffff";
CorBorda = "#0046AB";
CorFundo = "#000000";
NumeroPosts = 5;
Marcador = "Notícias";
home_page = "http://seublog.blogspot.com";
SemImg = new Array();
SemImg[0] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/sem_imagem.gif";
SemImg[1] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/sem_imagem.gif";
SemImg[2] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/sem_imagem.gif";
SemImg[3] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/sem_imagem.gif";
SemImg[4] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/sem_imagem.gif";
</script>
<script type="text/javascript">
function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);}}
s=s.join("");s=s.substring(0,chop-1);return s;}
function showrecentposts(json){document.write('<div id="slider" style="width:'+LarguraImg+'px;height:'+AlturaImg+'px;"><ul id="sliderContent">');j=(MostrarImg)?Math.floor((SemImg.length+1)*Math.random()):0;img=new Array();for(var i=0;i<NumeroPosts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break;}}
if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";postdate=entry.published.$t;if(j>SemImg.length-1)j=0;img[i]=SemImg[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["01","02","03","04","05","06","07","08","09","10","11","12"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;}}
var daystr=(MostrarData)?'<font style="font-size:'+FonteData+'px;font-weight:'+EstiloData+'; color:'+CorData+';"> ('+day+'/'+m+'/'+y+')</font>':"";var trtd='<li class="sliderImage"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+LarguraImg+'" height="'+AlturaImg+'" /></a><span style="background:'+CorFundo+';border-top:3px solid '+CorBorda+';font-size:'+FonteResumo+'px;color:'+CorResumo+';"><strong style="font-size:'+FonteTitulo+'px;color:'+CorTitulo+';">'+daystr+' '+posttitle+'</strong><br />'+removeHtmlTag(postcontent,ResumoPost)+'...</span></li>';
if(MostrarResumo==false){trtd='<li class="sliderImage"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+LarguraImg+'" height="'+AlturaImg+'" /></a><span style="background:'+CorFundo+';border-top:3px solid '+CorBorda+';font-size:'+FonteResumo+'px;color:'+CorResumo+';"><strong style="font-size:'+FonteTitulo+'px;color:'+CorTitulo+';">'+daystr+' '+posttitle+'</strong></span></li>';}
document.write(trtd);j++;}
document.write('<div class="clear sliderImage"></div></ul></div>');}
document.write("<script src=\""+home_page+"/feeds/posts/default/-/"+Marcador+"/?max-results="+NumeroPosts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script> Entendendo o Código:
MostrarImg = true; - Função exibir ou ocultar as imagens do post (true para Verdadeiro/Exibir, false para Falso/Ocultar);
LarguraImg = 270; - Largura da imagem do post
AlturaImg = 200; - Altura da imagem do post;
MostrarData = true; - Função exibir ou ocultar a data do post (true para Verdadeiro/Exibir, false para Falso/Ocultar);
EstiloData = "normal"; - Estilo da fonte da data do post (normal, bold, italic);
FonteData = 10; - Tamanho da fonte da data do post;
CorData = "#cccccc"; - Cor de fonte da data do post;
MostrarResumo = true; - Função exibir ou ocultar o resumo do post (true para Verdadeiro/Exibir, false para Falso/Ocultar);
ResumoPost = 50; - Número de caracteres a serem exibidos no resumo do post;
FonteResumo = 11; - Tamanho da fonte do resumo do post;
CorResumo = "#ffffff"; - Cor da fonte do resumo da postagem;
FonteTitulo = 12; - Tamanho da fonte do titulo do post;
CorTitulo = "#ffffff"; - Cor da fonte do título do post;
CorBorda = "#0046AB"; - Cor da borda acima das informações;
CorFundo = "#000000"; - Cor do plano de fundo das informações;
NumeroPosts = 5; - Número de Postagens a serem exibidas. Obs.: Se o blog tiver menos postagens que o número colocado em NumeroPosts o template ficará deformado;
Marcador = "Notícias"; - Marcador que quer usar para o Slider;
home_page = "http://seublog.blogspot.com"; - Adicione o endereço do seu Blog sem a barra (/) no final do endereço;
SemImg[0] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/ sem_imagem.gif";
SemImg[1] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/ sem_imagem.gif";
SemImg[2] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/ sem_imagem.gif";
SemImg[3] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/ sem_imagem.gif";
SemImg[4] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/ sem_imagem.gif"; - Imagem a ser exibida quando o post não possuir ilustração, para trocar a imagem substitua o endereço “http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/ j6bKjJUbcVY/s1600/sem_imagem.gif” pela imagem de sua preferencia.
Por fim, salve o widget e veja se está funcionando corretamente.
Bugs ou Erros Notifiquem.
Créditos: Felipe Florindo.
20 Comentários
Olá a todos,
gostaria apenas de corrigir um errinho que cometi, no trecho:
home_page = http://seublog.blogspot.com; - Adicione o endereço do seu Blog com a barra (/) no final do endereço;
na verdade é sem a barra no final do endereço e com as aspas.
Assim:
home_page = "http://seublog.blogspot.com"; - Adicione o endereço do seu Blog sem a barra (/) no final do endereço;
*****
Ótimo o blog, parabéns!!!
@Felipe Florindo, ok corrigi, e obrigado pelo tutorial!
Caso eu queira fazer só um slide de imagens sem relacionar com os meus posts, funciona normal? Só eu colocar o endereço da imagem no "SemImg[4] = "?
Abraçooos
Olá,
o código foi adaptado para exibir somente com postagens do Blogger. Para fazer com que ele funcione sem relação com as postagens teria que fazer uma série de mudanças, ou usar o script original.
O trecho do código "SemImg[4] = " se refere a uma substituição de imagem, caso a postagem não tenha ilustração, então ele adiciona uma imagem automaticamente.
O script original você encontra no seguinte link:
http://www.serie3.info/s3slider/
Ou pesquise sobre s3Slider
Att,
Felipe Florindo.
Parabéns. Funcionou legal. Gostaria de saber se tem como fazer mais de um slider. Cada um com um marcador.
Grato e Abraços!
@SeuLuiz
Tem sim basta repetir o passo 4, com outro marcador.
Nossa o que precisava para divulgar meus blog entre si ficou otimo para que quiser dar uma olha vo em curta o link para não acharem que é spam http://twixar.com/F1AXO
no meu não possui a tag body como faço?
no meu não possui a tag body como faço? [2]
tem algum jeito, de quando eu fizer um post, ja ir a imagem do post direto para a SlideShow de postagens recentes (tipo isso) ?
tem como colocar mais de um marcador em uma apresentação?? tentei, mas não consegui!! hehe...
MANO GOSTEI DO TUTORIAL
MAS O SLIDE QUE EU QUERO MSM É ESSE QUE TEM NO SEU SITE AI COM AS IMAGENS E UM MENU DE CONTROLE
COMO FAZ UMA DESSA AI MANO
?
Olá amigo, fiz os procedimentos mas nã apareceu nada no blog ? Como faço pra clocar a imagem no link SemImg[0] = "http://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/ sem_imagem.gif";
sem imagem não irá ficar sem imagem? como fdaço para add as minhas imagens e escrever?
oi tudu bom,fis todos os procedimentos mas na hora nao apareceu nada no blog ficou so um espaço como se tivese ali mas invisivel,oque eu faço??
Gente...Coloquei o código certinho ele até executa, porém não está aparecendo as fotos...Será que é pq meu template foi baixado do Btemplates?Ou algum script está entrando em conflito no blog...
Preciso de uma resposta urgentemente!!!
gabriel-parra2010@hotmail.com
Blog da REDE ALPHA(Rede de blogs do conhecimento em contrução ainda):
Alpha Sem Fronteiras
URL:http://alphasemfronteiras.blogspot.com
Plataforma:Blogger
Agradeço por enquanto...
@Gabriel G. C. Parra Olá tente rever suas configurações do Feed Burner, parece que o erro está lá.
Eu realmente percebi que meu Feed estava desatualizado, isto pq eu mudei o endereço do blog recentemente e esqueci deste detalhe...
Mas infelizmente não consegui resolver o problema mesmo...
Se vc tiver alguma outra sugestão de solução eu agradeceria...
Até mais, obrigado por ter me notificado deste erro no blog.
Aguardo respostas
no meu não possui a tag body como faço? [3]
não consegui!
=( (que triste)
estava a procura disso faz um tempão
no meu blog (tumblr) não ha a tag
]]> (passo 3)
olá, quando eu fiz com uma das minhas páginas com domínio blogspot.com e deu tudo certo, mas quando faço com dominio próprio "meusite.com" não dá, como posso resolver?
Já tentou com http://meusite.com , http://meusite.com/ e http://www.meusite.com/ e nada resolveu.
Postar um comentário
Deixe seu comentário aqui
Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.