SlideShow de Posts Recentes para Blogger

17/06/2011 08:55

 

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='https://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 = "https://seublog.blogspot.com";

SemImg = new Array();
SemImg[0] = "https://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/sem_imagem.gif";
SemImg[1] = "https://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/sem_imagem.gif";
SemImg[2] = "https://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/sem_imagem.gif";
SemImg[3] = "https://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/sem_imagem.gif";
SemImg[4] = "https://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 = "https://seublog.blogspot.com"; - Adicione o endereço do seu Blog sem a barra (/) no final do endereço;

SemImg[0] = "https://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/                                   sem_imagem.gif";                                                                             

SemImg[1] = "https://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/ sem_imagem.gif";

SemImg[2] = "https://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/ sem_imagem.gif";

SemImg[3] = "https://1.bp.blogspot.com/_HGZ8JWV_hgA/TOWBk1Tcf_I/AAAAAAAAEYw/j6bKjJUbcVY/s1600/ sem_imagem.gif";

SemImg[4] = "https://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 “https://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.

gostaria apenas de corrigir um errinho que cometi, no trecho:

home_page = https://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 = "https://seublog.blogspot.com"; - Adicione o endereço do seu Blog sem a barra (/) no final do endereço;
 

 

Bugs ou Erros Notifiquem.
Créditos: Felipe Florindo.

Tags:

|

Back

Destaque

Funeral de Nelson Mandela deve durar 12 dias na África do Sul

Funeral de Nelson Mandela deve durar 12 dias na África do Sul
2013-12-06 10:51 Líder anti-apartheid deve ser enterrado em sua aldeia natal Qunu. Chefes de estado de todo o mundo são esperados para cerimônia.   Vigília noturna em homenagem ao falecido ex-presidente Nelson Mandela, 06 de dezembro de 2013....

Novo presidente do Irã reconhece e repreende Holocausto nazista

Novo presidente do Irã reconhece e repreende Holocausto nazista
2013-09-25 10:15 Líder anterior recusava-se a aceitar a existência do genocídio nazista. Para autoridades israelenses, declarações foram 'insuficientes'. Hassan Rohani, presidente do Irã. Photo: By https://www.rouhani.ir/...

Sobe para 142 número de mortos em ataque de islamitas na Nigéria

Sobe para 142 número de mortos em ataque de islamitas na Nigéria
2013-09-22 11:27 Ataque teria sido realizado pelo grupo islamita Boko Haram. Grupo exige a criação de um Estado islâmico no norte da Nigéria. Boko Haram (Photo Credit: AK Rockefeller Flickr.com)   O balanço de um ataque realizado na...

Ataque em igreja deixa mortos e feridos no Paquistão

Ataque em igreja deixa mortos e feridos no Paquistão
2013-09-22 11:12 Segundo autoridades, mais de 40 pessoas morreram e 70 ficaram feridas. Pessoas deixavam prédio em Peshawar quando ocorreu o ataque. Islamia College, Peshawar, Paquistão Photo Credit: By Umer Khayam [Public domain], via Wikimedia...

Tiroteio na base naval em Washington deixa 12 mortos

Tiroteio na base naval em Washington deixa 12 mortos
2013-09-16 17:32 O Capitólio em Washington, D.C (Photo Credit: fortherock (Flickr.com) Used under the Creative Commons License.)   WASHINGTON, 16 Set (Reuters) - Pelo menos 12 pessoas foram mortas em um tiroteio nesta segunda-feira em...

EUA e Rússia fazem acordo sobre crise síria, diz John Kerry

EUA e Rússia fazem acordo sobre crise síria, diz John Kerry
2013-09-14 10:42 Decisão foi anunciada após reuniões de três dias entre os dois países. Síria terá 7 dias para dar informações sobre seu arsenal e evitar ataque.   Áreas supostamente afetadas pelo ataque químico. (Photo Credit: The Israel Project...

Martin Luther King salvou oprimidos e opressores, diz Obama

Martin Luther King salvou oprimidos e opressores, diz Obama
2013-08-28 18:12 Presidente falou em homenagem aos 50 anos do discurso 'I have a dream'. Mas Obama alertou que o 'sonho' do ativista continua inacabado.   Barack Obama - Martin Luther King - Casa Branca (Photo Credit: Clicksy (Flickr.com) Used under...

Conselho de Segurança da ONU se reúne para discutir situação da Síria

Conselho de Segurança da ONU se reúne para discutir situação da Síria
2013-08-28 14:16 Embaixadores dos 5 países membros permanentes se encontraram em NY. Eles examinam projeto britânico de resolução para ação em Damasco. Cerca de 40 pessoas protestaram contra a intervenção militar dos EUA, na Síria, no posto de recrutamento do...

1 | 2 | 3 | 4 | 5 >>

C+ Concursos e Empregos

Concursos com inscrições abertas reúnem milhares de vagas em todo o país nesta segunda (27/01)

27/01/2014 17:01
(adsbygoogle = window.adsbygoogle || []).push({}); Agência de Fomento do Estado da Bahia S/A (DESENBAHIA) A Agência de Fomento do Estado da Bahia S/A (DesenBahia) abre 14 vagas para o quadro de pessoal, e...

Mais de 1.730 oportunidades de emprego estão disponíveis nas unidades do Sine/Idt no Ceará nesta segunda (27/01)

27/01/2014 12:11
(adsbygoogle = window.adsbygoogle || []).push({}); O Sistema Nacional de Empregos (SINE/IDT) disponibiliza mais de 1.730 vagas de emprego no Ceará; sendo 1.026 para Fortaleza e as demais...

Confira milhares de vagas em concursos com inscrições abertas nesta segunda (13/01)

13/01/2014 17:19
(adsbygoogle = window.adsbygoogle || []).push({}); Agência de Fomento do Estado da Bahia S/A (DESENBAHIA) A Agência de Fomento do Estado da Bahia S/A (DesenBahia) abre 14 vagas para o quadro de pessoal, e...

Mais de 1.303 oportunidades de emprego estão disponíveis nas unidades do Sine/Idt no Ceará nesta segunda (13/01)

13/01/2014 15:05
(adsbygoogle = window.adsbygoogle || []).push({}); O Sistema Nacional de Empregos (SINE/IDT) disponibiliza mais de 1.303 vagas de emprego no Ceará; sendo 381 para Fortaleza e as demais...

Concursos com inscrições abertas reúnem milhares de vagas em todo o país

06/01/2014 14:45
(adsbygoogle = window.adsbygoogle || []).push({}); Agência Reguladora de Serviços de Abastecimento de Água e Esgotamento Sanitário do Estado de Minas Gerais (Arsae-MG) A Agência Reguladora de Serviços de...

Concursos esperados para 2014

17/12/2013 10:34
Colunista Lia Salgado cita seleções que aguardam autorização. Polícia Federal e Receita Federal estão na lista.   Brasão da Polícia Federal. (Photo Credit: By Rodrigo César...

Concursos com inscrições abertas reúnem 33,7 mil vagas em todo o país

09/12/2013 15:09
Salários chegam a R$ 22.854,46 do TRT de Minas Gerais. Cargos são para todos os níveis de escolaridade.   Fachada do Tribunal Regional do Trabalho da 15ª Região, Campinas,...
1 | 2 | 3 | 4 | 5 >>
Related Posts Plugin for WordPress, Blogger...