Slide com atualizações automáticas

A Rô do Bloggersphera deu um jeito, competente que é, de colocar as últimas postagens automaticamente em um dos slides qe acho bem bonito, o slide XXX de criação de Jonh Resig. Eu já havia o ensinado AQUI, mas como acho interessante essa estória de slide automático, vou reproduzir neste post como se faz o danado.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI

Vá até o HTML de seu blog e procure pelo código:

]]></b:skin>

Cole então o próximo código acima dele. (código em vermelho é a imagem de fundo)

/*Slide---------------------------------------------------------------*/
#crosscol-wrapper { /* coluna onde você colocará o slide */
padding:12px;
position:relative;}
#slide-wrapper { /* container do slide - não alterar */
width:100%;}
#slide-wrapper a:link,
#slide-wrapper a:visited,
#slide-wrapper a:hover{ /* links - não alterar */
outline:none;
text-decoration:none;}

#slider { /* altere a imagem de fundo e as medidas conforme seu template */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3U7ECbij4moioavfekPJrYOXj1FulvPK1Wd86g4VYeKGxdIeeTpEqMWNmk-3fsR4clNw4qbQdc-EQ8KkMOiO12AFHdqmZSW29uc_Dh2k8hyMYpq54NhqPtDqc_D37uw6QDSNV3v9DCC2d/s1600/980.png) no-repeat;
clear:both;
height:254px;
margin:20px 0 0 0;
overflow:hidden;
position:relative;
width:100%;}

#mover { /* seletor da movimentação do slide - não altere */
overflow:hidden;
position:absolute;
width:auto;}

.slide { /* a largura pode ser alterada conforme a coluna onde você colocará o slide e a imagem de fundo */
float:left;
height:200px;
padding:15px 0;
position:relative;
width:960px;}

.slide h3 { /* título do post - altere cor, fonte e medidas conforme seu template */
color:#ccc;
font-size:24px;
margin:0 0;
overflow:hidden;
padding:10px 0px 0px 10px;
width:300px;}

.summary { /* container do sumário - altere conforme seu template */
font-size:12px;
font-weight:bold;
line-height:20px;
margin:0 0;
padding:30px 0px 0px 10px;
text-transform:uppercase;
width:400px;}

.slide p{ /* parágrafo do sumário - altere conforme seu template */
color:#ccc;
font-size:12px;
line-height:20px;
margin:5px 0;
padding:10px 0px 0px 10px;
width:400px;}

/* os ítens abaixo referem-se ao link leia mais - altere conforme seu template, a imagem de fundo e a imagem do botão que colocar */

.leiamais{
background: #fff;
width: 70px;
padding: 0 30px 0 40px;
font-size:14px;
line-height:30px;
margin:0 39px 0 200px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
text-shadow: 0px 1px 1px #555;
}

.leiamais a:link,
.leiamais a:visited,
.leiamais a:hover{
color:#000;
text-decoration:none;}

.slide img { /* imagem do slide - as medidas e posicionamento deverão ficar de acordo com a imagem de fundo */
background:#fff;
width: 280px;
height:180px;
border: 1px solid #ccc;
position:absolute;
top:10px;
left:555px;
padding:10px 10px;}

#slider-stopper { /* texto para parar e reiniciar o slide - medidas e posicionamento devem seguir a imagem de fundo */
color:#000;
font-size:14px;
font-family:Georgia, Helvetica, Sans-Serif;
padding:3px 8px;
position:absolute;
top:111px;
right:22px;
text-transform:uppercase;}

Agora abaixo de :

]]></b:skin>

 cole o próximo código.

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.1&quot;);
google.load(&quot;jqueryui&quot;, &quot;1.5.3&quot;);
</script>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <!-- JavaScript Slider -->
<script type='text/javascript'>
var delayLength=6000;function doMove(panelWidth,tooFar){var leftValue=$(&quot;#mover&quot;).css(&quot;left&quot;);if(leftValue==&quot;auto&quot;){leftValue=0};var movement=parseFloat(leftValue,10)-panelWidth;if(movement==tooFar){$(&quot;.slide img&quot;).animate({&quot;top&quot;:-200},function(){$(&quot;#mover&quot;).animate({&quot;left&quot;:0},function(){$(&quot;.slide img&quot;).animate({&quot;top&quot;:50})})})}else{$(&quot;.slide img&quot;).animate({&quot;top&quot;:-200},function(){$(&quot;#mover&quot;).animate({&quot;left&quot;:movement},function(){$(&quot;.slide img&quot;).animate({&quot;top&quot;:50})})})}}$(function(){var $slide1=$(&quot;.slide&quot;);var panelWidth=$slide1.css(&quot;width&quot;);var panelPaddingLeft=$slide1.css(&quot;paddingLeft&quot;);var panelPaddingRight=$slide1.css(&quot;paddingRight&quot;);panelWidth=parseFloat(panelWidth,10);panelPaddingLeft=parseFloat(panelPaddingLeft,10);panelPaddingRight=parseFloat(panelPaddingRight,10);panelWidth=panelWidth+panelPaddingLeft+panelPaddingRight;var numPanels=$(&quot;.slide&quot;).length;var tooFar=-(panelWidth*numPanels);var totalMoverwidth=numPanels*panelWidth;$(&quot;#mover&quot;).css(&quot;width&quot;,totalMoverwidth);$(&quot;#slider&quot;).append(&#39;&lt;a href=&quot;#crosscol-wrapper&quot;id=&quot;slider-stopper&quot;&gt;Stop&lt;/a&gt;&#39;);sliderIntervalID=setInterval(function(){doMove(panelWidth,tooFar)},delayLength);$(&quot;#slider-stopper&quot;).click(function(){if($(this).text()==&quot;Stop&quot;){clearInterval(sliderIntervalID);$(this).text(&quot;Start&quot;)}else{sliderIntervalID=setInterval(function(){doMove(panelWidth,tooFar)},delayLength);$(this).text(&quot;Stop&quot;)}})});
</script>
</b:if>

Procure então por:

<div id='content-wrapper'> 

e cole acima dele o código abaixo

<div id='crosscol-wrapper'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
       <div id='slide-wrapper'><div id='slider'>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = &quot;http://4.bp.blogspot.com/_j4fpzU2AasM/StEneoD2ZoI/AAAAAAAABfI/WhN3tHhZEy0/s1600/noimage2.gif&quot;;
showRandomImg = true;
imgwidth = 200;
imgheight = 150;
summaryPost = 100;
startpost = 2;
numposts = 6;
home_page = &quot;<data:blog.homepageUrl/>&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
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="mover">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;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;}}
if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";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 item='<div class="slide"><h3><a href="'+posturl+'">'+posttitle+'</a></h3><div class="summary"><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div><div class="leiamais"><a href="'+posturl+'">Leia Mais</a></div> <a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a> </div>';if(summaryPost==0){item='<div class="slide"><h3><a href="'+posturl+'">'+posttitle+'</a></h3><div class="leiamais"><a href="'+posturl+'">Leia Mais</a></div> <a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></div>';}
document.write(item);j++;}
document.write('</ul>');}
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&start-index="+startpost+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
<div class='clear'/>
</div>
</div></b:if>
</div>

Abaixo, alguns fundos em cores diferentes para o slide. Clique sobre a imagem desejada e salve em seu computador, hospedando em seu blog a imagem e colocando o endereço no primeiro código na inscrição na cor vermelha.











Créditos:Jonh Resig