Cursos 24 Horas - Cursos 100% Online com Certificado

Simples SlideShow de Posts Recentes com Marcador Específico - Blogger

32 Comentários Autor : Notícia e blog 21 novembro 2010
slide

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.

    32 Comentários

    Felipe Florindo disse...
    21 de novembro de 2010 19:11 #

    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!!!

    Notícia e blog disse...
    22 de novembro de 2010 12:17 #

    @Felipe Florindo, ok corrigi, e obrigado pelo tutorial!

    Murilo Pires disse...
    24 de novembro de 2010 09:30 #

    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

    Felipe Florindo disse...
    24 de novembro de 2010 12:06 #

    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.

    SeuLuiz disse...
    15 de dezembro de 2010 10:38 #

    Parabéns. Funcionou legal. Gostaria de saber se tem como fazer mais de um slider. Cada um com um marcador.

    Grato e Abraços!

    Notícia e blog disse...
    15 de dezembro de 2010 10:40 #

    @SeuLuiz
    Tem sim basta repetir o passo 4, com outro marcador.

    Abner disse...
    13 de janeiro de 2011 20:05 #

    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

    JUBAMEM disse...
    18 de março de 2011 20:35 #

    no meu não possui a tag body como faço?

    Viktor Huston disse...
    22 de março de 2011 07:24 #

    no meu não possui a tag body como faço? [2]

    Ângelo Piazza disse...
    19 de maio de 2011 20:22 #

    tem algum jeito, de quando eu fizer um post, ja ir a imagem do post direto para a SlideShow de postagens recentes (tipo isso) ?

    Clube dos Homens disse...
    15 de agosto de 2011 00:24 #

    tem como colocar mais de um marcador em uma apresentação?? tentei, mas não consegui!! hehe...

    Anônimo disse...
    15 de agosto de 2011 19:43 #

    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
    ?

    *Afinal disse...
    19 de agosto de 2011 13:41 #

    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?

    blog de flavio cunha disse...
    28 de agosto de 2011 10:19 #

    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??

    Gabriel G. C. Parra disse...
    16 de outubro de 2011 16:35 #

    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...

    Notícia e blog disse...
    16 de outubro de 2011 23:39 #

    @Gabriel G. C. Parra Olá tente rever suas configurações do Feed Burner, parece que o erro está lá.

    Gabriel G. C. Parra disse...
    17 de outubro de 2011 17:07 #

    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

    ♥Fc Lady Gaga diva ♥ disse...
    21 de outubro de 2011 18:23 #

    no meu não possui a tag body como faço? [3]

    flyerMiranda disse...
    22 de dezembro de 2011 20:22 #

    não consegui!
    =( (que triste)
    estava a procura disso faz um tempão
    no meu blog (tumblr) não ha a tag

    ]]> (passo 3)

    Bad Tom disse...
    25 de janeiro de 2012 02:38 #

    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.

    VII Copa Primo Fernandes disse...
    19 de março de 2012 21:59 #

    Amigo já tentei de tudo, mas aparece o seguinte erro:

    Corrija o erro abaixo e envie o seu modelo novamente.
    Mais de um item encontrado com o id: HTML4. Os IDs de itens devem ser únicos e exclusivos.

    Dani Luchesi disse...
    5 de abril de 2012 09:49 #

    Não apareceu. No meu também não possui a tag "< body >"

    Ednei Carvalho Cruz disse...
    24 de abril de 2012 02:14 #

    muito legal sua dica, talvez o slide funcionando seja simples, mas a instalação é bem complicada, no meu blog encontrei dois "body" entao não sabia no qual colocar o codigo. no http://www.ferramentasblog.com e no http://www.dicasblogger.com.br tem slides mais fáceis de instalar, ja testei vários e todos funcionaram, mas esse daqui eu gostei mais do visual no exemplo, realmente gostaria que funcionasse. abraços!!

    Anônimo disse...
    21 de junho de 2012 19:17 #

    como colocar o slide apenas na pagina inicial, e nas paginas secundarias onde tem as notícias para não aparecer o slide! colocar o slide só na home como faz?

    Rodney Henrique disse...
    6 de julho de 2012 14:35 #

    Olha o meu não aparece nada,faço tudo corretamente,já repeti várias vezes para vê o que dava mas realmente o meu não aparece.
    Tentei a outra dica que é ainda mais simples e não aparece a imagem só o texto.

    soemrondonia.com.br disse...
    27 de julho de 2012 16:35 #

    Olá meu amigo, como vai?

    para mim também não deu certo e não foi pela configuração do feed, pois a mesma esta funcionando bem e também não foi por algum passo errado que eu tenha dado!

    eu estou vendo várias perguntas como a minha sem resposta neste post, mas mesmo assim vou arriscar, se você responder eu vou ficar muito feliz e agradecido.

    Mesmo após de rever varias vezes o código não funcionou, o espaço para a gadget fica transparent e não aparece nada, assim como a de alguns que pergutaram ante de mim, você viu alguém ter alguma solução para este problema ou sera que o JS não funciona mais?

    muito obrigado!

    Anônimo disse...
    23 de agosto de 2012 15:46 #

    Tbm não achei o tag body. Oq devo fazer?

    Anônimo disse...
    28 de fevereiro de 2013 22:00 #

    ficou um espaço em branco no meu blogger, como resolvo isso?

    maurino moreira disse...
    10 de novembro de 2013 10:44 #

    não aparece nada,faço tudo corretamente,já repeti várias vezes ,o feed, esta funcionando bem e também não foi por algum passo errado

    Dead Wolf disse...
    1 de agosto de 2014 13:29 #

    como adicionar o marcador, é pelo nome ou por link?

    Paulo Ricardo Santos disse...
    3 de outubro de 2014 20:00 #

    Aos que não aparecem as imagens das postagens!

    É só verificar as configurações de feed em Configurações/Outros

    Onde tem colocar [Permitir feed de blog?] colocar em "Completa". Pois, se estiver marcado para não aparecer a imagem o slider não exibe tb!!!

    Rafael Galvão disse...
    2 de agosto de 2015 17:58 #

    não consigo instalar no meu blog, pq? acho que fiz tudo certo

    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.