#PARTICIPE DA NOSSA PÁGINA NO FACEBOOK...

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

Filled under:

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

0 comentários:

Postar um comentário

Obrigado pela visita e mais ainda pelo comentário...

Assinar: Postar comentários (Atom)

 

#POSTADOR

CHRISTIANO ALENCAR - ANGRA DOS REIS - RJ, TÉCNICO EM INFORMÁTICA | WEBDESIGN-GRÁFICO, SONHA SER ENGENHEIRO DA COMPUTAÇÃO, CREIO EU QUE NO COMEÇO DO ANO DE 2014 JÁ ESTAREI CURSANDO ENGENHARIA :D -ESPERO QUE GOSTEM DO SITE.