Slide 3slider com as últimas postagens

A Rô do Bloggersphera desenvolveu parte deste slide, coloco aqui para vcs.

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. 

Mais uma vez o Blogger mudou toda a configuração e com isso, os antigos templates "Minima" no qual todas as dicas e tutoriais feitas por quase todos os problogers deixarm de ter efeito. Vou aos poucos refazendo as dicas em cima do template "Simple"

Vá até o HTML de seu blog e clique em "Editar modelo, ao pé da página.

Ao abrir a janela, procure por:

<div class='main-outer'>

Para encontrar com facilidade, clique em F3 no seu teclado

Cole então este código abaixo dele

<b:if cond='data:blog.url == data:blog.homepageUrl'>
       <div id='slide-wrapper'><div id='postslide'>
<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 = 630;
imgheight = 260;
summaryPost = 140;
startpost = 6;
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('<ul id="postslideContent">');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='<li class="postslideImage"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a> <p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></span></li>';if(summaryPost==0){item='<li class="postslideImage"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a></span></li>';}
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>


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- s3Slider
Developped By: Boban Karišik -&gt; http://www.serie3.info/
CSS Help: Mészáros Róbert -&gt; http://www.perspectived.com/ -->
<script type='text/javascript'>
(function($){$.fn.postslide=function(vars){var element=this;var timeOut=(vars.timeOut!=undefined)?vars.timeOut:6000;var current=null;var timeOutFn=null;var faderStat=true;var mOver=false;var items=$(&quot;#&quot;+element[0].id+&quot;Content .&quot;+element[0].id+&quot;Image&quot;);var itemsSpan=$(&quot;#&quot;+element[0].id+&quot;Content .&quot;+element[0].id+&quot;Image span&quot;);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&gt;0){timeOutFn=setTimeout(makeSlider,thisTimeOut);}else{console.log(&quot;Poof..&quot;);}};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(&#39;bottom&#39;)==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(&#39;bottom&#39;)==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>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#postslide&#39;).postslide({
timeOut: 6000});
});
</script>
</b:if>

Salve.

Agora procure por:

]]></b:skin>

e substitua por:

/*  s3Slider
--------------------------- */
#slide-wrapper {
border: 3px solid #eee;
background: #fff;
padding: 10px;
margin: 10px;
}

#slide-wrapper ul li{
list-style:none;
margin:0;
padding:0;
}

#postslide{
height:250px;
width:auto;
margin:5px auto;
overflow:hidden;
position:relative;
}

#postslideContent{
position:absolute;
top:0;
right:0;
width:auto;
}

.postslideImage{
display:none;
float:left;
position:relative;
}


.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:30px 25px;
position:absolute;
width:auto;
}


.postslideImage span p{
font-size:12px;
line-height:1.6em;
padding:10px 25px 15px 0;
margin:auto;
}

.postslideImage a:link,
.postslideImage a:visited,
.postslideImage a:hover{
color:#fff;
}
]]></b:skin>

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