Slide automático de últimas postagens no Blog

Olá galera , hoje venho fazer um tutorial muito bacana, um slide que fica passando suas ultimas postagens automaticamente no Blogger.

Serve para você usar em qualquer lugar no seu blog, podendo editar tamanhos, espaço de tempo entre uma postagem e outra, números de postagens, e também você poder escolher em deixar automático ou manualmente.

Umas das principais técnicas de SEO, é fazer com que as pessoas fiquem o máximo de tempo possível navegando em seu blog, inclusive um dos conceitos que o google usa para classificar o ranking das postagens nas buscas é a taxa de rejeição(que é quando uma pessoa entra em seu blog e só visualiza uma pagina). Com esse gadget você com certeza vai diminuir bastante a taxa de rejeição do seu blog, uma pessoa ao estar lento uma postagem, pode ver outra postagem também do seu interesse no slide,e assim continuar a navegar no seu Blog.

Screenshot:

Vamos ao tutorial:

1. Logue-se no blogger
2. No menu clique em Loyalt
3. Depois em "Adicionar gadget"
4. Escolha HTML/JavaScript
5. Cole o código abaixo

<style type="text/css"> ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJdezd0A6yeV8vfJpJ0gooyRGgCsxjv_RAHKa8r769ysyZ8wgZY8OnTK2o6WX8OmuEfLQko1lgFsZjpB8V6327RsV3C6d0aAIiww_VdjSkxs8Xl7cZ50J9hcw-n-G4689Rji8kpUnmP-o/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%} .feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%} .feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px} </style> <div id="featuredbwidget"> </div> <link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script type='text/javascript'> //<![CDATA[ featuredbwidget({ listURL:"https://helplogger.blogspot.com/", featuredNum:9, listbyLabel:false, feathumbSize:350, interval:3000, autoplay:true, featuredID:"#featuredbwidget" }); function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJKS6BVsLZJOhWochplSG1F5tOHhmx9TVB2aTa1vEc9vikiNFV1w16_bvlSXmML-zN2UJHcg8ggAQN6PmZNxfdbCT9wkoxHSDLwwn4D-WBwITGS7eQpX92FwdvFjbslDDmyoStqDBn4kc/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"> <ul class="featured-widget-list"></ul> <div class="feat-buttons"> <a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div> </div> ');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+=' <li><a href="'+q+'"><div class="featuredbg"> </div> <img class="featuredthumb" src="'+u+'"/><h5> '+k+'</h5> </a><div class="featured-meta"> <span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div> </li> "}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)}; //]]> </script>



Ainda não salve, antes configure.

em:
ListURL - substitua pela url do seu blog
listbyLabel - não altere
FeaturedNum - número total de postagens que vai aparecer no slide
FeathumSize - tamanho do slide em pixels
Interval - tempo entre uma postagem e outra em milésimos de segundo
Autoplay - automático(true) , ou não automático(false)