Como colocar slide de postagens recentes no seu blogger

Slide carousel com as postagens recentes do blog

Como colocar slide de postagens recentes no seu blogger em três etapas

Um outro modelo de slide carousel que mostra, automaticamente suas postagnes mais recentes. Pode ficar interessante em seu blog, dar uma toque a mais.

Vá até o modelo de seu blog e clique em Personalizar

Copie e Cole o código abaixo no local indicado. Salve.

/*Carousel---------------------------------------------------------*/
#carousel{
width:99%;
height:330px;
border: 4px groove #ccc;
position:relative;
display:block;
background:#fff;
margin:40px auto;
padding:0 auto;

}
#carousel .container{
background: #fff;
position:absolute;
left:10px;
width:98%;
height:330px;
overflow:hidden
}
#carousel #previous_button{
position:absolute;
width:35px;
height:330px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5iOg4HSVcBlAMKyCkLZVBDdY_tKAQLWKK6ngCZCApwf2hcFmaJnJQXrKhO9NRdBzWZ8DraIlGIAKB1W9bvklDSOEaOePKWO5UNiuKoVVeiXJECRKVwcRkigm_nZLWzoDuwvIwaiZPPJ0/s1600/prev.png) center;
z-index:100;
cursor:pointer;
}
#carousel #next_button{
position:absolute;
right:0;
width:35px;
height:330px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd4xJ5pAZrVqDmEwqpA095ETj2huPdp7Un9xBV8i4D46IP2IOUkyxyRC5meS4RMq40_UtAS2RqIpjayZ1N6EuAAlElVOzEzaeOTEYH9RGKkCUUAiIsYd2uV4hlRXigXjlitsiyZ_UJcWc/s1600/next.png) center;z-index:100;
cursor:pointer;
}
#carousel #next_button:hover,#carousel #previous_button:hover,#carousel ul li:hover{
filter:alpha(opacity=80);opacity:.8
}
#carousel ul{
width:100000px;position:relative;margin-top:10px
}
#carousel ul li{
background:#404040 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtH9ty3lwyL1QJvdjmav7XEC9v9yRjQwyCNhbUqb_2Klmt5ultm91mfOnnKKHEDsuDUgMvWkZstBtfRezHQnLRWGMvWLkxX8Zg7_O7tIx5v8xizQgu8DCoZpFfxMAHep_GqyVMu4iPgtM/s1600/sliderbg.png) repeat-x top;
display:inline;
float:left;
text-align:center;
font-weight:700;
line-height:1.2em;
width:200px;
height:300px;
margin:0 1px 20px 12px;padding:6px
}
#carousel ul li a.slider_title{
color:#ccc;
display:block;
margin-top:5px;
text-shadow:0 1px 1px #000
}
#carousel ul li a.slider_title:hover{
color:#f7bc2f
}

Procure agora por: <head>

Acima dele cole o código abaixo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var div=$(this),ul=$("ul:first",div),tLi=$(".car",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var li=$(".car",ul),itemLength=li.size(),curr=o.start;div.css("visibility","visible");li.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({padding:"0",position:"relative","list-style-type":"none","z-index":"1"});div.css({overflow:"hidden","z-index":"2"});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width()});ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));div.css(sizeCss,divSize+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&div.mousewheel)div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return li.slice(curr).slice(0,v)};function go(to){if(!running){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");curr=to==itemLength-v+1?v+1:v+o.scroll}else curr=to}else{if(to<0||to>itemLength-v)return;else curr=to}running=true;ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());running=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(el,prop){return parseInt($.css(el[0],prop))||0};function width(el){return el[0].offsetWidth+css(el,'marginLeft')+css(el,'marginRight')};function height(el){return el[0].offsetHeight+css(el,'marginTop')+css(el,'marginBottom')}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMqhHNw4YEnEZtJubifAVMokOFN_rIWnk1zLp2vW4UsZ0mOJwE4voKDfF9zpwGXY8G2c9S-VpH-BMitiE2EjpKlrwwzCDT0IQAHgUaZSqi_6UQ6JOKFTIQgzABF3DL2mrgrEtsaflZ6vQ/s1600/no-image4.png";showRandomImg=true;aBold=true;summaryPost=200;summaryTitle=20;numposts1=12;numposts2=4;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){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts1;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>imgr.length-1)j=0;img[i]=imgr[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=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];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=day+' '+m+' '+y;var trtd='<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="200" height="250" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';document.write(trtd);j++}document.write('</ul>')}function showrecentposts5(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;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>imgr.length-1)j=0;img[i]=imgr[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=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];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 trtd='<li id="nav-post-'+i+'" class="ui-tabs-nav-item"><a href="#post-'+i+'"><img width="100" height="69" src="'+img[i]+'"/><span>'+posttitle+'</span></a></li>';document.write(trtd);j++}}function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;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>imgr.length-1)j=0;img[i]=imgr[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=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];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=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="maskolis_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;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!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]=''}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h1>'+relatedpoststitle+'</h1>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 10px 10px 0;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="maskolis_img" src="'+thumburl[r]+'"/><br/><div style="">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>

Agora procure por: </header>

E abaixo dele, cole a div para instalar neste local o slide. (se quiser que o slide apareça também nas páginas internas, delete os códigos que estão na cor vermelha.)

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'><div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#carousel .container").jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 4,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>
</b:if></b:if>

Fonte: Blog Templates e Acessórios

----------------------------------------------------------

Dica 2

Slide com Posts Recentes Automático no Blogger

Já publiquei alguns modelos de slide para você usar no seu blog. Você já viu como instalar o S3lider e já viu também como instalar um slide com imagens deslizantes.

Hoje veremos um slide que apresenta as postagens recentes de forma automática.

Este slide funciona em conjunto com 3 tipo diferentes de arquivos javascript: o JQuery, o script S3lider e o script de posts recentes, criado pelo Anhvo.

A Rô Zancheta, do Bloggersphera, conseguiu fazer uma adaptação no script original de posts recentes, conseguindo aliar este script ao script do S3lider, fazendo com que os posts publicados recentemente apareçam automaticamente em forma de slider.

No tutorial da Rô, ela explica como conseguiu fazer tais adaptações, que por sinal, o tutorial dela é uma verdadeira aula, para usuários mais avançados.

Seguindo as explicações da Rô Zancheta, eu testei o código, e fiz umas pequenas adaptações nele, afim de facilitar a instalação e o uso, mas os créditos da adaptação dos scripts são todos dela.

Antes de mais nada, sempre é bom recomendar que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.

1º passo – Aplicar os estilos para o Slide:

No painel do blogger, acesse o menu “modelo”, clique em “editar html” e cole este código logo ACIMA da tag ]]></b:skin>

/* s3Slider --------------------------- */ #slide-wrapper ul li{ list-style:none; margin:0; padding:0; } /*--- container geral do slide ---*/ #slide-wrapper{ margin:auto; width:auto; /* coloque um valor na largura se quiser */ } /*--- container do slide ---*/ #postslide{ height:250px; /* altura total do container */ width:auto; /* coloque um valor na largura se quiser - deve ser a mesma do container */ margin:5px auto; overflow:hidden; position:relative; } /*--- conteúdo do slide ---*/ #postslideContent{ position:absolute; top:0; right:0; width:auto; /* coloque um valor na largura se quiser - deve ser a mesma do container */ background:#333; /* edite cor de fundo se quiser*/ } .postslideImage{ /* --Não alterar-- */ display:none; float:left; position:relative; } /*--- fonte do texto do titulo dos posts ---*/ .postslideImage span{ background-color:#000; color:#fff; display:none; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; font-size:20px; left:0; bottom:0; padding:20px 15px; position:absolute; width:auto; /* coloque um valor na largura se quiser - deve ser a mesma do container */ } /*--- fonte do texto do resumo do post ---*/ .postslideImage span p{ font-size:12px; line-height:1.6em; padding:10px 25px 15px 0; margin:auto; } /*--- estilos dos links ---*/ .postslideImage a:link, .postslideImage a:visited, .postslideImage a:hover{ color:#fff; /* você pode alterar a cor dos links */ }

No código acima eu destaquei nas cores azul e verde, os trechos de códigos editáveis, para que você possa alterar as medidas e as cores de acordo com seu template.

2º passo - Instalar o arquivo Javascript do Slider:

Para o funcionamento do slide é necessário utilizar dois scripts:

1) postslide

2) recentpostslide

Clique nos links de cada arquivo acima para fazer o download automaticamente e veja neste artigos, uma relação de Sites para hospedar arquivos javascripts.

Depois de hospedados, você deverá acrescentar os arquivos no seu template.

Volte no menu "modelo", entre na edição html e cole o seguinte código logo ACIMA da tag </head>

3º passo - Escolhendo local que ficará o slide para Incorporar o script de posts recentes:

Agora escolha o local onde quer posicionar o seu slide.

Você pode instalar o slide logo abaixo do cabeçalho, ou pode instalá-lo acima da coluna de postagens, em "main".

Esta parte é muito importante e a mais complicada, preste bastante atenção, pois você precisará editar o código para ajustar o slide de acordo com o local que você escolher.

Vou explicar abaixo 2 exemplos de locais para você escolher e instalar o slide.

Eu aconselho, que após a instalação do slide no local que você escolheu, você volte no código CSS (1º passo) e ajuste as medidas de "width".

1. Instalar o Slide abaixo do cabeçalho:

► Templates nativos e/ou modificados:

Para instalar seu slide abaixo do cabeçalho, você deverá verificar se no seu template a div crosscol está visivel. Caso não esteja, é necessário que você habilite-a no seu template.

Veremos como fazer isso, a seguir.

Volte na edição HTML do seu blog, NÃO marque "Expandir Modelos de Widgets" e procure por:

Substitua tudo por:

<div id='crosscol-wrapper'>  <div id='slide-wrapper'> <div id='postslide'> <script type='text/javascript'> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc-LhvaRKf83RkfFn6we-3MCthp-ahbgIuVX66xsjVVDtKkCE5FjAobEm2Byp9rx8nXGiZoZ8IKH0dnMRafMZBCDo9B3_rFFMDhvbj9nUPlqjYNXiImLTM3EdH4Dx0rt71zrXlnq4iNyAy/"; showRandomImg = true; imgwidth = 660;  imgheight = 250; summaryPost = 140; startpost = 1; numposts = 7;  home_page = "<data:blog.homepageUrl/>"; </script> <script src='URL-DO-ARQUIVO-RECENTPOSTSLIDE' type='text/javascript'/> </div> </div>

<b:section class='crosscol' id='crosscol'/>

</div>

Em imgwidth = 660; você deve colocar a largura da imagem de acordo com a mesma medida total do seu template. Pode ser a mesma medida que está em "outer-wrapper".

Caso não tenha a div crosscol no seu template, basta acrescentá-la, abaixo de

Confira Demo»

2. Instalar o Slide acima da coluna de postagens:

► Templates nativos e/ou modificados:

Se você quiser que seu slide fique logo acima da coluna de postagens, você deverá colar o código logo abaixo da div main-wrapper.

Vá no menu "modelo", entre na edição html e procure por: <div id='main-wrapper'>

E logo abaixo dela cole o seguinte código:

<div id='slide-wrapper'> <div id='postslide'> <script type='text/javascript'> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc-LhvaRKf83RkfFn6we-3MCthp-ahbgIuVX66xsjVVDtKkCE5FjAobEm2Byp9rx8nXGiZoZ8IKH0dnMRafMZBCDo9B3_rFFMDhvbj9nUPlqjYNXiImLTM3EdH4Dx0rt71zrXlnq4iNyAy/"; showRandomImg = true; imgwidth = 410;  imgheight = 250; summaryPost = 140; startpost = 1; numposts = 7;  home_page = "<data:blog.homepageUrl/>"; </script> <script src='URL-DO-ARQUIVO-RECENTPOSTSLIDE' type='text/javascript'/> </div> </div>

Em imgwidth = 410; você deve colocar a largura da imagem de acordo com a mesma medida que tem em "main-wrapper" no seu template.

► Templates Designer de Modelo:

Se você usa uns dos modelos novos de template Designer de Modelo, eu aconselho que você instale o slide acima da coluna de postagens.

Eu testei o código, tentando instalá-lo abaixo do menu e particularmente, não deu certo, não ficou bom, mas se você quiser testar, fica a seu critério.

O melhor local para instalação deste slide para os templates designer de modelo, realmente é acima da coluna de postagens.

O código do local para instalar o slide acima da coluna de postagem é diferente, portanto preste atenção:

Vá no menu "modelo" >> "editar html" e procure por: <div class='column-center-inner'>

E cole logo ABAIXO dela o seguinte código:

<div id='slide-wrapper'> <div id='postslide'> <script type='text/javascript'> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc-LhvaRKf83RkfFn6we-3MCthp-ahbgIuVX66xsjVVDtKkCE5FjAobEm2Byp9rx8nXGiZoZ8IKH0dnMRafMZBCDo9B3_rFFMDhvbj9nUPlqjYNXiImLTM3EdH4Dx0rt71zrXlnq4iNyAy/"; showRandomImg = true; imgwidth = 560;  imgheight = 250; summaryPost = 140; startpost = 1; numposts = 7;  home_page = "<data:blog.homepageUrl/>"; </script> <script src='URL-DO-ARQUIVO-RECENTPOSTSLIDE' type='text/javascript'/> </div> </div>

Confira Demo»

Onde está imgwidth = 560; você deve ajustar esta medida e colocar a largura da imagem de acordo com a mesma medida que tem no seu template.

As larguras dos templates designers de modelo variam de acordo com o modelo do template, portanto não há como eu informar qual o valor correto que você deverá incluir neste campo, você terá que testar, incluindo valores e ir visualizando para ver se está de acordo com a largura do seu template.

Lembrando que, a funcionalidade deste script pode variar de acordo com o template.

Templates que possuem muitos scripts, acabam gerando "conflitos" entre si, por isso alguns arquivos javascript dão erro pra alguns, mas funcionam perfeitamente para outros.

Caso este script não funcione em seu blog, verifique se você já tem instalado algum outro script que conflite com o JQuery.

Para melhor entendimento, leia: Por que alguns scripts não funcionam no meu blog.

Caso queira aprender como ocultar ou exibir este slide que você instalou, em determinadas páginas, leia o artigo:

• Ocultar Elementos em Página Específica

Fonte 2: Mundo Blogger

5 comentários:

Gisela Campos10 de novembro de 2013 às 13:39
Como faço para remover o CSS do meu blog?! esta uma barra branca la em cima pq o codigo html nao funcionou!
http://giccampos.blogspot.com.br
ResponderExcluir
Respostas
Will20 de novembro de 2013 às 05:52
Bom desculpe me, nem cheguei a ver, mais parabéns pelo seu blog. Eu tenho um código muito com para slides, mais meu banco de dados é tão imenso que não estou encontrando com facilidade.....
Assim que encontrar eu posto para todos, no mais agradeço pela participação!!!
Willams - LojaHost.net - fb.com/JoseWillams007
ResponderExcluir
Respostas
007Will14 de fevereiro de 2014 às 14:07
Olá amiga, para lhe ajudar eu testei e coloquei uma nova postagem que deu certo comigo, segue o link da postagem, não se esqueça de colocar o link do seu blog no lugar do testo vermelho.
http://wllnews.lojahost.net/2014/02/auto-slide-para-blogger-e-blogspot-html.html
ResponderExcluir
Respostas