AUTO SLIDE PARA BLOGGER E BLOGSPOT HTML - Slide com as últimas postagens na sidebar com numeração

<div style="text-align: center;"><span style="font-family: Times, 'Times New Roman', serif; font-size: large;">Slide com as últimas postagens na sidebar com numeração</span></div><div><i>Elke di Barros</i></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><a href="http://lojahost.net/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEgolmOO4Hx9_N7_JzHvm8HwjJIfuyCVpYWtXqNQKuycnX4ExksY2f30BysnHBb3FJGuu3cIQYwGseAPaVbEu64c8IT5BtDR-Wf6gVQul5m2twXDCsfXWlTtTytafVN8FYdCXOCih73YWB/s1600/Slide+sidebar.png" /></a></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;">Tudo que oferecer facilidade de navegação ao visitante de seu blog é bem-vindo. Este widget oferece essa facilidade além de ter um interface interessante, enxuto e bonito. Instale-o da seguinte forma:</span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;">Salve. Agora clique em Layout... </span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><a href="http://lojahost.net/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcoIAnQHbhSPoaMVrMC27ZL0E9HM9k-s_jJomFhEsDmbnJHn1xMSlyRJynerIIS_A2vxNISDLzFNd7MU700I6S9oSHGEcDXZ_o2O1icFu7nYg9fkMRcIiNtYC7g8ELy-DHM3NyxrHvdxqj/s1600/layout.png" /></a></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;">Clique em Adicionar um Gadget </span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><a href="http://lojahost.net/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij4Twa8j0HE-Z7YNMIu70WrA9LC0_d2Ta99Ns215oN-PHZ9yG_WN2_HLihhzqLOMtiN-FZbbi_TjYS_WgEDBkvbDmgg-AgvaJcvuTN222shrIqd11xmUXQBWUjf1eL5em6fD71zxea8ys/s320/1-adicionar+um+gadget.png" /></a></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;">Ao abrir, clique em HTML/Javascript </span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><a href="http://lojahost.net/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivwevuBKZfEbianyhK-gPGODgHKRbBLaYSZKdM2QabEZPxetkdpEo8Jev9ChNkRl8fCRDChcwVqcNRS7HUNQp_F2ztLkj0LrOVzCpsmyNDq3oRPP9KVSWPAIJjUOjkZTSP0KQ-AnNaz54/s320/html.png" /></a></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;">Cole então o próximo código, colocando o endereço de seu blog no local indicado.</span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;">------------------------------------</span><br /><br /><div class="codeview" style="background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6qRsle60cROHDj_M8HgNruAjyOA3iqPAApOGJiYtvbxv4GUaxiAru40qjeDIzdGl_DPBwPm_KABo37h9jMSqJ_YRQgyTiIh-5ndDzRLoqA6KAB09x3KkBA9EyVJQ0cFUT4KGEf-AzgM5P/s1600/css-grey.png); background-position: 100% 15px; background-repeat: no-repeat no-repeat; border-color: rgb(238, 238, 238) rgb(204, 204, 204) rgb(204, 204, 204) rgb(238, 238, 238); border-style: solid; border-width: 1px 2px 2px 1px; clear: both; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; height: 320px; line-height: 18.479999542236328px; list-style-type: none; margin: 15px 25px 15px 15px; overflow: auto; padding: 10px; text-align: start;"><style><br />/* Basic style for Blogger Feed Rotator plugin */<br />.slider-rotator{-moz-box-shadow: 0 0 5px 5px #888;<br />-webkit-box-shadow: 0 0 5px 5px#888;<br />box-shadow: 0 0 5px 5px #888;width:280px;height:340px;border:1px solid #F78D4D;background-color:white;padding:10px;font:normal normal 11px/1.4 Tahoma,Verdana,Arial,Sans-Serif;color:#333;margin:0 auto;position:relative;overflow:hidden;text-align:left}.slider-rotator.loading{background-image:url('data:image/gif;base64,R0lGODlhEAAQAPYAAP///wAAANTU1JSUlGBgYEBAQERERG5ubqKiotzc3KSkpCQkJCgoKDAwMDY2Nj4+Pmpqarq6uhwcHHJycuzs7O7u7sLCwoqKilBQUF5eXr6+vtDQ0Do6OhYWFoyMjKqqqlxcXHx8fOLi4oaGhg4ODmhoaJycnGZmZra2tkZGRgoKCrCwsJaWlhgYGAYGBujo6PT09Hh4eISEhPb29oKCgqioqPr6+vz8/MDAwMrKyvj4+NbW1q6urvDw8NLS0uTk5N7e3s7OzsbGxry8vODg4NjY2PLy8tra2np6erS0tLKyskxMTFJSUlpaWmJiYkJCQjw8PMTExHZ2djIyMurq6ioqKo6OjlhYWCwsLB4eHqCgoE5OThISEoiIiGRkZDQ0NMjIyMzMzObm5ri4uH5+fpKSkp6enlZWVpCQkEpKSkhISCIiIqamphAQEAwMDKysrAQEBJqamiYmJhQUFDg4OHR0dC4uLggICHBwcCAgIFRUVGxsbICAgAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAHjYAAgoOEhYUbIykthoUIHCQqLoI2OjeFCgsdJSsvgjcwPTaDAgYSHoY2FBSWAAMLE4wAPT89ggQMEbEzQD+CBQ0UsQA7RYIGDhWxN0E+ggcPFrEUQjuCCAYXsT5DRIIJEBgfhjsrFkaDERkgJhswMwk4CDzdhBohJwcxNB4sPAmMIlCwkOGhRo5gwhIGAgAh+QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYU7A1dYDFtdG4YAPBhVC1ktXCRfJoVKT1NIERRUSl4qXIRHBFCbhTKFCgYjkII3g0hLUbMAOjaCBEw9ukZGgidNxLMUFYIXTkGzOmLLAEkQCLNUQMEAPxdSGoYvAkS9gjkyNEkJOjovRWAb04NBJlYsWh9KQ2FUkFQ5SWqsEJIAhq6DAAIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhQkKE2kGXiwChgBDB0sGDw4NDGpshTheZ2hRFRVDUmsMCIMiZE48hmgtUBuCYxBmkAAQbV2CLBM+t0puaoIySDC3VC4tgh40M7eFNRdH0IRgZUO3NjqDFB9mv4U6Pc+DRzUfQVQ3NzAULxU2hUBDKENCQTtAL9yGRgkbcvggEq9atUAAIfkECQoAAAAsAAAAABAAEAAAB4+AAIKDhIWFPygeEE4hbEeGADkXBycZZ1tqTkqFQSNIbBtGPUJdD088g1QmMjiGZl9MO4I5ViiQAEgMA4JKLAm3EWtXgmxmOrcUElWCb2zHkFQdcoIWPGK3Sm1LgkcoPrdOKiOCRmA4IpBwDUGDL2A5IjCCN/QAcYUURQIJIlQ9MzZu6aAgRgwFGAFvKRwUCAAh+QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYUUYW9lHiYRP4YACStxZRc0SBMyFoVEPAoWQDMzAgolEBqDRjg8O4ZKIBNAgkBjG5AAZVtsgj44VLdCanWCYUI3txUPS7xBx5AVDgazAjC3Q3ZeghUJv5B1cgOCNmI/1YUeWSkCgzNUFDODKydzCwqFNkYwOoIubnQIt244MzDC1q2DggIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhTBAOSgrEUEUhgBUQThjSh8IcQo+hRUbYEdUNjoiGlZWQYM2QD4vhkI0ZWKCPQmtkG9SEYJURDOQAD4HaLuyv0ZeB4IVj8ZNJ4IwRje/QkxkgjYz05BdamyDN9uFJg9OR4YEK1RUYzFTT0qGdnduXC1Zchg8kEEjaQsMzpTZ8avgoEAAIfkECQoAAAAsAAAAABAAEAAAB4iAAIKDhIWFNz0/Oz47IjCGADpURAkCQUI4USKFNhUvFTMANxU7KElAhDA9OoZHH0oVgjczrJBRZkGyNpCCRCw8vIUzHmXBhDM0HoIGLsCQAjEmgjIqXrxaBxGCGw5cF4Y8TnybglprLXhjFBUWVnpeOIUIT3lydg4PantDz2UZDwYOIEhgzFggACH5BAkKAAAALAAAAAAQABAAAAeLgACCg4SFhjc6RhUVRjaGgzYzRhRiREQ9hSaGOhRFOxSDQQ0uj1RBPjOCIypOjwAJFkSCSyQrrhRDOYILXFSuNkpjggwtvo86H7YAZ1korkRaEYJlC3WuESxBggJLWHGGFhcIxgBvUHQyUT1GQWwhFxuFKyBPakxNXgceYY9HCDEZTlxA8cOVwUGBAAA7AAAAAAAAAAAA');background-position:50% 50%;background-repeat:no-repeat}.slider-rotator .slider-item{position:absolute;padding:10px;background-color:white;top:0;right:0;bottom:auto;left:0;display:none}.slider-rotator .image-wrapper{}.slider-rotator .detail-wrapper{}.slider-rotator img{display:block;border:none;outline:none;padding:0 0;margin:0 0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;max-width:none;max-height:none}.slider-rotator h4{font:inherit;font-weight:bold;font-size:120%;text-transform:none;color:#3B4B7E;margin:10px 0 0}.slider-rotator h4 a{color:inherit;text-decoration:none}.slider-rotator h4 a:hover{color:#793B7E;text-decoration:underline}.slider-rotator p{margin:10px 0 0}.slider-rotator-nav{text-align:center}.slider-rotator-nav a{display:inline;background-color:#333;color:white;padding:4px 8px;line-height:2.6em;margin:0 2px;text-decoration:none}<br /><br />.slider-rotator-nav a:hover{background-color:#111; -moz-box-shadow: 0 0 5px 5px #888;<br />-webkit-box-shadow: 0 0 5px 5px#888;<br />box-shadow: 0 0 5px 5px #888;}<br />.slider-rotator-nav a.current{background-color:#F78D4D; -moz-box-shadow: 0 0 5px 5px #888;<br />-webkit-box-shadow: 0 0 5px 5px#888;<br />box-shadow: 0 0 5px 5px #888;}<br /></style><br /><br /><div id="slider-rotator" class="slider-rotator loading"></div><br /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><br /><script type="text/javascript"><br />// Blogger Feed Rotator Plugin by Taufik Nurrohman<br />// URL: http://www.dte.web.id :: http://hompimpaalaihumgambreng.blogspot.com<br />(function(a){a.fn.customRotator=function(c){c=a.extend({interval:6000,speed:1000,hoverPause:true,autoHeight:false,crossFade:false,autoSlide:true,hide:function(d){},show:function(d){}},c);var b=true;return this.each(function(){var k=a(this),e=k.children().hide(),d=k.next(),g=null,j=0,f=0;function h(){c.hide(f);d.find(".current").removeClass("current");b=false;if(e.eq(f).next().length){if(!c.crossFade){e.eq(f).fadeOut(c.speed,function(){a(this).next().fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f+1).height()},c.speed/2)}f++})}else{e.eq(f).fadeOut(c.speed);e.eq(f).next().fadeIn(c.speed,function(){c.show(f);b=true;f++});if(c.autoHeight){k.stop().animate({height:e.eq(f+1).height()},c.speed/2)}}d.find(".rotator-num a").eq(f+1).addClass("current")}else{if(!c.crossFade){e.eq(f).fadeOut(c.speed,function(){f=0;e.first().fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f).height()},c.speed/2)}})}else{e.eq(f).fadeOut(c.speed);e.first().fadeIn(c.speed,function(){c.show(0);b=true;f=0});if(c.autoHeight){k.stop().animate({height:e.eq(0).height()},c.speed/2)}}d.find(".rotator-num a").first().addClass("current")}if(j==0&&c.autoSlide){g=setTimeout(h,c.interval)}}if(e.length>1){c.hide(f);e.first().fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(0).height()},c.speed/2)}if(c.hoverPause&&c.autoSlide){k.mouseenter(function(){clearTimeout(g);j=1}).mouseleave(function(){g=setTimeout(h,c.interval);j=0}).trigger("mouseleave")}else{g=(c.autoSlide)?setTimeout(h,c.interval):null}d.find(".rotator-num a").click(function(){if(b){b=false;if(c.autoSlide){clearTimeout(g);g=setTimeout(h,c.interval)}f=a(this).index();a(this).parent().find(".current").removeClass("current");a(this).addClass("current");c.hide(f);e.fadeOut(c.speed).eq(f).fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f).height()},c.speed/2)}}return false});d.find(".rotator-advancer a").click(function(){if(b){b=false;var l=this.hash.replace("#",""),i=e.length;if(c.autoSlide){clearTimeout(g);g=setTimeout(h,c.interval)}if(l=="next"){f=(f<i-1)?f+1:0}else{f=(f>0)?f-1:i-1}d.find(".current").removeClass("current");d.find(".rotator-num a").eq(f).addClass("current");c.hide(f);e.fadeOut(c.speed).eq(f).fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f).height()},c.speed/2)}}return false})}})}})(jQuery);function makeSlider(a){var c={url:"http://www.dte.web.id",numPost:5,newTabLink:false,labelName:null,showDetail:true,summaryLength:60,titleLength:"auto",showThumb:true,thumbWidth:250,squareThumb:true,noThumb:"http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png",showNav:true,navText:{prev:"&lt;",next:"&gt;"},containerId:"slider-rotator",interval:6000,speed:1000,hoverPause:true,crossFade:false,autoHeight:false,autoSlide:true,onInit:function(){},onHide:function(d){},onShow:function(d){}};for(var b in c){c[b]=(typeof(a[b])!=="undefined")?a[b]:c[b]}$.get(c.url+"/feeds/posts/summary/"+(c.labelName===null?"":"-/"+c.labelName.replace(/\,(\s+)?/g,"/"))+"?alt=json-in-script&max-results="+c.numPost,{},function(s){if(s.feed.entry!==undefined){var r=s.feed.entry,q,p,e,o,h="",d="";for(var m=0,n=r.length;m<n;m++){if(m==r.length){break}q=r[m].title.$t;e=("media$thumbnail" in r[m])?'<img alt="'+q+'" src="'+r[m].media$thumbnail.url.replace(/\/s72\-c/,"/s"+c.thumbWidth+(c.squareThumb?"-c":""))+'" style="width:'+c.thumbWidth+"px;height:"+(c.squareThumb?c.thumbWidth+"px":"auto")+'">':'<img src="'+c.noThumb+'" style="width:'+c.thumbWidth+"px;height:"+(c.squareThumb?c.thumbWidth+"px":"auto")+'">';o=("summary" in r[m]&&c.summaryLength>0)?r[m].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/[<>]/g,""):"";o=(c.summaryLength<o.length)?o.substring(0,c.summaryLength)+"&hellip;":o;for(var l=0,f=r[m].link.length;l<f;l++){p=(r[m].link[l].rel=="alternate")?r[m].link[l].href:"#"}h+='<div class="slider-item">';h+=(c.showThumb&&c.showDetail)?'<div class="image-wrapper">'+e+"</div>":(c.showThumb&&!c.showDetail)?'<div class="image-wrapper"><a href="'+p+'" title="'+q+'"'+(c.newTabLink?' target="_blank"':"")+">"+e+"</a></div>":"";h+=(c.showDetail)?'<div class="detail-wrapper"><h4><a title="'+q+'" href="'+p+'"'+(c.newTabLink?' target="_blank"':"")+">"+((c.titleLength=="auto")?q:q.substring(0,c.titleLength)+(q.length>c.titleLength?"&hellip;":""))+"</a></h4><p>"+o+"</p></div>":"";h+="</div>";$("#"+c.containerId).css({width:(c.showThumb)?c.thumbWidth+"px":$("#"+c.containerId).css("width"),height:(!c.showDetail&&c.squareThumb)?c.thumbWidth+"px":$("#"+c.containerId).css("height")})}d='<div class="slider-rotator-nav"'+(c.showNav===false?' style="display:none;"':"")+">";d+=(c.showNav===true||c.showNav=="next/prev")?'<span class="rotator-advancer"><a href="#prev">'+c.navText.prev+"</a></span>":"";if(c.showNav===true||c.showNav=="number"){d+='<span class="rotator-num">';for(var g=0;g<c.numPost;g++){d+='<a href="#slide-'+g+'" class="'+(g===0?"current":"")+'">'+(g+1)+"</a>"}d+="</span>"}d+=(c.showNav===true||c.showNav=="next/prev")?'<span class="rotator-advancer"><a href="#next">'+c.navText.next+"</a></span>":"";d+="</div>";$("#"+c.containerId).html(h).after(d);c.onInit();$("#"+c.containerId).removeClass("loading").customRotator({interval:c.interval,speed:c.speed,autoHeight:c.autoHeight,hoverPause:c.hoverPause,crossFade:c.crossFade,autoSlide:c.autoSlide,hide:function(i){c.onHide(i)},show:function(i){c.onShow(i)}})}else{$("#"+c.containerId).removeClass("loading").css({width:"auto",height:"auto"}).html("Error or not found!")}},"jsonp")};<br /></script><br /><script type="text/javascript"><br />makeSlider({<br />    url: "<b><span style="color: red;">AQUI O ENDEREÇO DE SEU BLOG</span></b>" // Add your blog URL<br />});<br /></script></div><div><br /></div><br /></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;">------------------------------------</span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;">Boa sorte, não se esqueça de colocar o link/url de seu blog na parte vermelha marcada no final desse código!</span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;">Acesse o melhor site se hospedagem e soluções web: <a href="http://lojahost.net/">http://lojahost.net</a></span></div><div style="text-align: center;"><br />Fonte: templateseacessorios</div>

AUTO SLIDE PARA BLOGGER E BLOGSPOT HTML - Slide com as últimas postagens na sidebar com numeração

Slide com as últimas postagens na sidebar com numeração Elke di Barros Tudo que oferecer facilidade de navegação ao visitante de seu blog é ...

Mais informações »

Como colocar slide de postagens recentes no seu blogger

<div style="text-align: center;"><span style="font-family: Times, 'Times New Roman', serif;"><span style="color: red; font-size: x-large;">Slide carousel com as postagens recentes do blog</span></span></div><div style="text-align: center;"><span style="color: #073763; font-size: large;">Como colocar slide de postagens recentes no seu blogger em três etapas</span><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRPKuHvC59-M-R6WO2jJjw3YS9uM6ffJd56WA-XtjaNrw4DLAKz9uJpQzNZI6qPkFfIZYzxbtSgvZQBR_8njLflo1lrvKkBxdMRnUO4Rq0o5DRTxQjhTu6wCZH-JtDBQB9xodMoOMyaDMi/s1600/slide+carousel+2.png" style="color: #0b5394; font-family: Times, 'Times New Roman', serif; font-size: x-large;" /></div><span style="font-family: Times, Times New Roman, serif; font-size: large;"></span><br /><div style="color: #0b5394; text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;"><a href="http://templatefredutz.blogspot.com.br/">DEMO</a></span></div><span style="font-family: Times, Times New Roman, serif; font-size: large;"></span><br /><div style="color: #0b5394; text-align: center;"><span style="font-family: Times, Times New Roman, serif; font-size: large;">Um outro modelo de slide carousel que mostra, automaticamente suas postagnes mais recentes. Pode ficar interessante em seu blog, dar uma toque a mais.</span></div><span style="font-family: Times, Times New Roman, serif; font-size: large;"><div style="color: #0b5394; text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #073763;"><i>Vá até o modelo de seu blog e clique em Personalizar</i></span></div><div style="color: #0b5394; text-align: center;"><br /></div><div style="color: #0b5394; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQT8DO3siFEh-d9UpqzFZDA3QUXZMFKuHGtAgHl6GPAH6qWeZVlWlT3RKzbJraIctD0qgYRCmWWYNhustlAExxgGkp4WmwzOGgeothxLVZd7V9fjqMpsL1UvP0TPHAzlHq9hIb9mIW7uMh/s1600/Personalizar.png" /></div></span><br /><div style="text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdetbNLFVDuC2mhhpo8-JEm9O5JD6jdE4_O0RSQWPRFcBBOMgsThlsKiV3Yt5c0ySzdvYoNCyF4ojOlJRShAe1lFEjXCib4su19bXeBmbO7w_qCPguPAgKTNDOhaVbdwg7gHNxBD5_3zAv/s640/adicionar+css.png" /></div><span style="font-family: Times, Times New Roman, serif;"> <br /><br /></span><br /><div style="font-size: x-large; text-align: center;"><span style="font-family: Times, Times New Roman, serif;"><span style="color: #073763;"><b>Copie e Cole o código abaixo no local indicado. Salve.</b></span></span></div><span style="font-family: Times, Times New Roman, serif;"><br /><span style="color: red;"><br /><span style="font-size: xx-small;">/*Carousel---------------------------------------------------------*/<br />#carousel{<br />width:99%;<br />height:330px;<br />border: 4px groove #ccc;<br />position:relative;<br />display:block;<br />background:#fff;<br />margin:40px auto;<br />padding:0 auto;<br /><br />}<br />#carousel .container{<br />background: #fff;<br />position:absolute;<br />left:10px;<br />width:98%;<br />height:330px;<br />overflow:hidden<br />}<br />#carousel #previous_button{<br />position:absolute;<br />width:35px;<br />height:330px;<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5fI0W1_mqpv1vcdmEt9SAflDnq8QHLDx8cOlAJo2L25U32EvyBwOzFa_XejGyYjl99NcVG6t30CJA0NkGxgt6ht9K29UXURIgsD38gmg99P4abdCdUrSCroxWvkfKNlFGK-PsdI5e7CA/s1600/prev.png) center;<br />z-index:100;<br />cursor:pointer;<br />}<br />#carousel #next_button{<br />position:absolute;<br />right:0;<br />width:35px;<br />height:330px;<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNd9T8mqsLuiccrSYnhDtW0Eavb1tq_EQ_ya8T0tCyt5B9Dsr35DiDu6rKayOT7DWMbJbTK8hqIjDWw64benUFXN4eVdZU1UvNHmTFXY-tHDJ3m0rPwNRB5rj9dWOD2fqx3zPOkhyphenhyphen-W68/s1600/next.png) center;z-index:100;<br />cursor:pointer;<br />}<br />#carousel #next_button:hover,#carousel #previous_button:hover,#carousel ul li:hover{<br />filter:alpha(opacity=80);opacity:.8<br />}<br />#carousel ul{<br />width:100000px;position:relative;margin-top:10px<br />}<br />#carousel ul li{<br />background:#404040 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxJ0HL_dlt5JmMnJGuHQzlbMRrwawyLU0V4Kx-JLCAZlvjwm_1v6CwY7uqKBgtfeacc0o5N9eSBGF7qjc7mmDa0sMH1atNpQNCZR0WcApOIbyv4SfUG5xhJ3UH-hi_XeZl5zOpp6Mdms/s1600/sliderbg.png) repeat-x top;<br />display:inline;<br />float:left;<br />text-align:center;<br />font-weight:700;<br />line-height:1.2em;<br />width:200px;<br />height:300px;<br />margin:0 1px 20px 12px;padding:6px<br />}<br />#carousel ul li a.slider_title{<br />color:#ccc;<br />display:block;<br />margin-top:5px;<br />text-shadow:0 1px 1px #000<br />}<br />#carousel ul li a.slider_title:hover{<br />color:#f7bc2f<br />}</span></span><span style="font-size: x-small;"><br /></span><br /><br /><div style="font-size: x-large; text-align: center;"><b><span style="color: #073763;">Procure agora por: </span><span style="color: red;"><head></span></b></div><br /><div style="text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOpSCUB3CqSKEw94ItVJXcZFLyBQ9d7mrFn2DBgHMz23JzoDIj9Vu6CYBS6GUs_QcvuAowa0H8x2O_GfcrBWUQwTxfucIy5Qrb-_OCbcNrIWOp_TYi36D8JjlpXtVPTvl8FWUFS0AFlOvr/s640/header.png" style="font-size: x-large;" /></div></span><span style="font-family: Times, Times New Roman, serif;"><br /><div style="font-size: x-large; text-align: center;"><span style="color: #073763;"><b><br /></b></span></div><div style="font-size: x-large; text-align: center;"><span style="color: #073763;"><b>Acima dele cole o código abaixo:</b></span></div><br /><br /><span style="font-size: xx-small;"><span style="color: red;"><!-- Código slide carousel --><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><br /><script type='text/javascript'><br />//<![CDATA[<br />(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);<br />//]]><br /></script><br /><script type='text/javascript'><br />//<![CDATA[<br />imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBrzbTUpIEdwidQEv2Eo4bwicmCSa83Oj2OWFceCztlu8JcBelaaOo5vg1tFuFsFM0MkaTVOR9XkBC2AzdgOJV1Ekob2CUlbLPAY0XEP56Mj-gvu7zbkPMnh0Dn-Cd7dUC9I2g8DPxpqI/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)}<br />//]]><br /></script></span></span><br /><br /><div style="font-size: x-large; text-align: center;"><b><span style="color: #073763;">Agora procure por: </span><span style="color: red;"></header></span></b></div><br /><div style="font-size: x-large; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyRwRrXo7Ragpl1WFxb5ZwbHhBnFov2jr-78eHtCBQ5DVZNwP5cR4mL-U5idMrUyib_yctE8CvcfzR4JeMlU8HYUWS-82muJD4m4v0mHillEayqRw-OlqOOorqE_aRDWB6Z2tpYdYHRNam/s640/head.png" /></div></span><span style="font-family: Times, Times New Roman, serif;"><br /><br /><div style="font-size: x-large; text-align: center;"><span style="color: #0b5394;">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.) </span></div><div style="font-size: x-large; text-align: center;"><br /></div><br /><span style="font-size: xx-small;"><span style="color: red;"><b:if cond='data:blog.pageType != &quot;item&quot;'> <br /><b:if cond='data:blog.pageType != &quot;static_page&quot;'></span></span><span style="color: #b45f06;"><span style="font-size: xx-small;"><div id='carousel'><br /><div id='previous_button'/><br /><div class='container'><br /><script><br />document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);<br /></script> <br /><div class='clear'/><br /></div><br /><div id='next_button'/><br /></div><br /><script type='text/javascript'><br />(function($) { $(document).ready(function(){<br />$(&quot;#carousel .container&quot;).jCarouselLite({<br /> auto:4000,<br /> scroll: 1,<br /> speed: 800, <br /> visible: 4,<br /> start: 0,<br /> circular: true,<br /> btnPrev: &quot;#previous_button&quot;,<br /> btnNext: &quot;#next_button&quot;<br /> });<br /> })})(jQuery) <br /></script> <br /></b:if></b:if></span><div style="text-align: center;"><br /></div></span></span><br /><div><span style="text-align: start;">Fonte: Blog Templates e Acessórios</span><br /><span style="text-align: start;"><br /></span><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">----------------------------------------------------------</span></div><div style="text-align: center;"><span style="color: red; font-family: Times, Times New Roman, serif; font-size: large;">Dica 2</span></div><div style="text-align: justify;"><span style="color: red; font-size: x-large;"><br /></span></div><div style="text-align: center;"><span style="color: red; font-family: Times, Times New Roman, serif; font-size: x-large;">Slide com Posts Recentes Automático no Blogger</span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">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.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Hoje veremos um slide que apresenta as postagens recentes de forma automática.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">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.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">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.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">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.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">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.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">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.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">1º passo – Aplicar os estilos para o Slide:</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">No painel do blogger, acesse o menu “modelo”, clique em “editar html” e cole este código logo ACIMA da tag  </span><span style="color: red; font-family: Times, Times New Roman, serif; font-size: large;"><b>]]></b:skin></b></span><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"> </span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><span style="color: red; font-family: Times, Times New Roman, serif; font-size: xx-small;">/* 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 */ } </span><br /><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">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.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">2º passo - Instalar o arquivo Javascript do Slider:</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Para o funcionamento do slide é necessário utilizar dois scripts:</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">1) <a href="https://sites.google.com/site/tutoriaismundoblogger/postslide.js?attredirects=0&d=1">postslide</a></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">2) <a href="https://sites.google.com/site/tutoriaismundoblogger/recentpostslide.js?attredirects=0&d=1">recentpostslide</a></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Clique nos links de cada arquivo acima para fazer o download automaticamente e veja neste artigos, uma relação de <a href="http://www.mundoblogger.com.br/2010/03/sites-para-hospedagem-de-arquivos.html">Sites para hospedar arquivos javascripts</a>.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Depois de hospedados, você deverá acrescentar os arquivos no seu template.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Volte no menu "modelo", entre na edição html e cole o seguinte código logo ACIMA da tag </head></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"> </span></div><div style="text-align: justify;"><span style="color: red; font-family: Times, Times New Roman, serif; font-size: xx-small;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/> <script src='URL-DO-ARQUIVO-POSTSLIDE' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#postslide&#39;).postslide({ timeOut: 6000}); }); </script> </span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">3º passo - Escolhendo local que ficará o slide para Incorporar o script de posts recentes:</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Agora escolha o local onde quer posicionar o seu slide.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Você pode instalar o slide logo abaixo do cabeçalho, ou pode instalá-lo acima da coluna de postagens, em "main".</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">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.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Vou explicar abaixo 2 exemplos de locais para você escolher e instalar o slide.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">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".</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">1. Instalar o Slide abaixo do cabeçalho:</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">► Templates nativos e/ou modificados:</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">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.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Veremos como fazer isso, a seguir.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Volte na edição HTML do seu blog, NÃO marque "Expandir Modelos de Widgets" e procure por: </span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: red; font-family: Times, Times New Roman, serif; font-size: large;"><div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol'/> </div> </span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Substitua tudo por:</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: red; font-family: Times, Times New Roman, serif; font-size: xx-small;"><div id='crosscol-wrapper'> <!-- Slide Posts Recentes início --> <div id='slide-wrapper'> <div id='postslide'> <script type='text/javascript'> imgr = new Array(); imgr[0] = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPnqW3c3biBLU1CueNOq2jTrZsICqO9hTChyphenhyphenNya1nORvTjQZlA43TbR1AsKQvO78bLGj8Rp95ONITtt_o27V8G_u6Ev-NrKd4MTnCfRXI1FvLaiqe5PzPB2nO-EVl2Z_KbAyyZgKSd8Q_/&quot;; showRandomImg = true; imgwidth = 660; <!-- ajuste a largura da imagem --> imgheight = 250; summaryPost = 140; startpost = 1; numposts = 7; <!-- numero de posts que aparecem no slide --> home_page = &quot;<data:blog.homepageUrl/>&quot;; </script> <script src='URL-DO-ARQUIVO-RECENTPOSTSLIDE' type='text/javascript'/> </div> </div><!-- Slide Posts Recentes fim --></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><b:section class='crosscol' id='crosscol'/></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"></div></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">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".</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Caso não tenha a div crosscol no seu template, basta acrescentá-la, abaixo de</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><div id='content-wrapper'></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><a href="http://templateteste17.blogspot.com/"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Confira Demo»</span></a></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">2. Instalar o Slide acima da coluna de postagens:</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">► Templates nativos e/ou modificados:</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">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.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Vá no menu "modelo", entre na edição html e procure por: <div id='main-wrapper'></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">E logo abaixo dela cole o seguinte código:</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"> </span><span style="color: red; font-family: Times, Times New Roman, serif; font-size: xx-small;"><!-- Slide Posts Recentes início --> <div id='slide-wrapper'> <div id='postslide'> <script type='text/javascript'> imgr = new Array(); imgr[0] = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPnqW3c3biBLU1CueNOq2jTrZsICqO9hTChyphenhyphenNya1nORvTjQZlA43TbR1AsKQvO78bLGj8Rp95ONITtt_o27V8G_u6Ev-NrKd4MTnCfRXI1FvLaiqe5PzPB2nO-EVl2Z_KbAyyZgKSd8Q_/&quot;; showRandomImg = true; imgwidth = 410; <!-- ajuste a largura da imagem --> imgheight = 250; summaryPost = 140; startpost = 1; numposts = 7; <!-- numero de posts que aparecem no slide --> home_page = &quot;<data:blog.homepageUrl/>&quot;; </script> <script src='URL-DO-ARQUIVO-RECENTPOSTSLIDE' type='text/javascript'/> </div> </div><!-- Slide Posts Recentes fim --></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Em imgwidth = 410; você deve colocar a largura da imagem de acordo com a mesma medida que tem em "main-wrapper" no seu template.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">► Templates Designer de Modelo:</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Se você usa uns dos modelos novos de template Designer de Modelo, eu aconselho que você instale o slide acima da coluna de postagens.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">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.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">O melhor local para instalação deste slide para os templates designer de modelo, realmente é acima da coluna de postagens.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">O código do local para instalar o slide acima da coluna de postagem é diferente, portanto preste atenção:</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Vá no menu "modelo" >> "editar html" e procure por: <div class='column-center-inner'> </span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">E cole logo ABAIXO dela o seguinte código: </span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: red; font-family: Times, Times New Roman, serif; font-size: xx-small;"><!-- Slide Posts Recentes início --> <div id='slide-wrapper'> <div id='postslide'> <script type='text/javascript'> imgr = new Array(); imgr[0] = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPnqW3c3biBLU1CueNOq2jTrZsICqO9hTChyphenhyphenNya1nORvTjQZlA43TbR1AsKQvO78bLGj8Rp95ONITtt_o27V8G_u6Ev-NrKd4MTnCfRXI1FvLaiqe5PzPB2nO-EVl2Z_KbAyyZgKSd8Q_/&quot;; showRandomImg = true; imgwidth = 560; <!-- ajuste a largura da imagem --> imgheight = 250; summaryPost = 140; startpost = 1; numposts = 7; <!-- numero de posts que aparecem no slide --> home_page = &quot;<data:blog.homepageUrl/>&quot;; </script> <script src='URL-DO-ARQUIVO-RECENTPOSTSLIDE' type='text/javascript'/> </div> </div><!-- Slide Posts Recentes fim --> </span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: center;"><a href="http://templatemodelo124.blogspot.com/"><span style="color: red; font-family: Times, Times New Roman, serif; font-size: large;">Confira Demo»</span></a></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Onde está </span><span style="color: red; font-family: Times, Times New Roman, serif; font-size: large;">imgwidth = 560</span><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">; você deve ajustar esta medida e colocar a largura da imagem de acordo com a mesma medida que tem no seu template.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">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.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Lembrando que, a funcionalidade deste script pode variar de acordo com o template.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">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.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Caso este script não funcione em seu blog, verifique se você já tem instalado algum outro script que conflite com o JQuery.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Para melhor entendimento, leia: <a href="http://www.mundoblogger.com.br/2010/03/por-que-alguns-scripts-nao-funcionam-no.html">Por que alguns scripts não funcionam no meu blog</a>.</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">Caso queira aprender como ocultar ou exibir este slide que você instalou, em determinadas páginas, leia o artigo:</span></div><div style="text-align: justify;"><span style="color: #0b5394; font-family: Times, Times New Roman, serif; font-size: large;">• <a href="http://www.mundoblogger.com.br/2009/11/ocultar-elementos-em-pagina-especifica.html">Ocultar Elementos em Página Específica</a></span></div><article class="entry" style="border: 0px; margin: 0px; outline: 0px; padding: 15px; text-align: justify; vertical-align: baseline;"><div class="banner-author" id="banner-bottom" style="border: 0px; clear: both; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"><center></center></div></article><article class="entry" style="border: 0px; margin: 0px; outline: 0px; padding: 15px; text-align: center; vertical-align: baseline;">Fonte 2: Mundo Blogger</article></div>

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 DEMO Um outro modelo...

Mais informações »