POSTAGENS POPULARES COM EFEITO DE SLIDEdemonstracao..."dar as postagens populares uma aparencia de slide e um destaque a mais para os visitantes de seu blog ? ""Neste caso as postagens populares terao um efeito hover com o titulo das postagens, o que da um ar mais profissional a seu blog."Para isso a primeira coisa a fazer e deletar o seu widget de postagens populares ou dara conflito nos codigos. Depois de retirar o widget, siga o passo a passo.Va ate o "Modelo de seu blog", clique em "Editar HTML" Hack para o template do Blogger, implementado em abril de 2013.Clique no botao "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho.<div class='main-outer'>Acima dele, cole o proximo codigo:<b:if cond='data:blog.pageType == &quot;index&quot;'><div id='tm_featured'><div class='folder'><div class='folder_all'><b:section class='folder_item' id='folder_item' preferred='yes' showaddelement='no'> <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'><div class='widget-content popular-posts'><ul><b:loop values='data:posts' var='post'><div class='featured_item'><b:if cond='data:showThumbnails == &quot;false&quot;'><b:if cond='data:showSnippets == &quot;false&quot;'><a expr:href='data:post.href'><data:post.title/></a><b:else/><div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><div class='item-snippet'><data:post.snippet/></div></b:if><b:else/><b:if cond='data:showSnippets == &quot;false&quot;'><div class='item-thumbnail-only'><b:if cond='data:post.thumbnail'><div class='item-thumbnail'><a expr:href='data:post.href' target='_blank'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a></div></b:if><div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div></div><div style='clear:both'/><b:else/><div class='folderboxpic'><a class='article' expr:href='data:post.href' rel='bookmark'><b:if cond='data:post.thumbnail'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='72' width='72'/><b:else/><img alt='no image' height='200' src='http://2.bp.blogspot.com/-uW6pc9-v9Dc/U5UD8rsZICI/AAAAAAAAdWA/pQpRQbUuSw8/s1600/sem+imagem3.png' width='200'/></b:if><div class='folderboxtitle'><div class='folderboxbackground'><div id='tm-folderboxbackground-720'><data:post.title/></div></div></div></a><div class='clear'/></div></b:if></b:if></div></b:loop></ul></div></b:includable> </b:widget></b:section><div class='clear'/></div></div></div></b:if>Salve. Agora ...... "dar estilo implementando o CSS""Implementar CSS " : No modelo de seu blog", clique em "Personalizar"Copie o codigo abaixo e cole no local indicado. ..." em destaque a largura total do slide, em cor vermelha e as imagens das postagens (cada quadradinho) esta em destaque na cor azul. "Modifique para que fique de acordo com seu blog.""A cor de fundo esta em destaque na cor amarela e as bordas e cor de fundo da area dos titulos estao em destaque na cor verde."/*Popular post slide-----------------------------------*/.folder{margin: -24px 0 28px 0}#tm_featured {background: #808080; /*Cor de fundo da area */padding: 0; }.folder_all{padding:0}.folder_all { padding: 0px 0; margin: -20px 0; width: 1200px; /*largura do slide*/ }.featured_item {float:left}.folderboxpic {border: 2px solid #DF6D88; background: #fff;height:104px;width:104px; /*tamanho das imagens*/overflow:hidden;position:relative;}.folderboxpic img{border: 2px solid #DF6D88; height:104px;width:104px}.article {display:block;width:100%;height:100%;color:#ffffff;font-size:13px;text-decoration:none;font-family:Open Sans,Arial,Verdana;text-overflow:ellipsis;}.article .folderboxbackground {font-family: 'Yanone Kaffeesatz', sans-serif;background:#DF6D88;color:#000;padding: 6px;font-size:12px;text-transform: uppercase;}.article .folderboxtitle {position:absolute;bottom:0;opacity:0;-webkit-transition:all 0.4s ease-in 0s;-moz-transition:all 0.4s ease-in 0s;-ms-transition:all 0.4s ease-in 0s;-o-transition:all 0.4s ease-in 0s;transition:all 0.4s ease-in 0s;letter-spacing:0.4px;width:104px; /*tamanho da area dos titulos*/height:0px;display:block;font-family:bebasneueregular,bebas,arial;font-size:12px;text-align:center;}.article:hover .folderboxtitle{opacity:0.9;height:100%}Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.- See more at: http://templateseacessorios.blogspot.com.br/2014/07/postagens-populares-com-efeito-de-slide.html#sthash.dOYoVBfM.dpuffonte:templateseacessoriosMensagem do formulario de comentario:"comentarios de anonimos, nao serao publicados,e aqui... ...nao e local para desentendimentos e discordias! Seja bastante educado!Frequenta qual escola, ou frequentou? ...ou a educacao vem de berco? demonstracao:fonte:templateseacessoriosVeja como se faz: "Widget de ultimas postagens no blog estilo ss de jornalismoit""Widget de ultimas postagens no blog estilo ss de jornalismoit"..."este codigo o script ficara hospedado no proprio blog."Passo-a-passoVa ate o "Modelo de seu blog", clique em "Editar HTML" " Hack para o template do Blogger, implementado em abril de 2013."Clique no botao "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho:Procure por ]]></b:skin> Ao encontra-lo,abaixo dele, cole o proximo codigo:<script type='text/javascript'>//<![CDATA[imgr=new Array();imgr[0]="http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=150;summaryPost1=20;summaryTitle=15;numposts=6;numposts1=6;numposts2=3;numposts3=6;numposts4=5;numposts5=12;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 showrecentposts2(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts1<=json.feed.entry.length){maxpost=numposts4}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}elseif("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]="";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!="")){if(i==0){img[i]='<img width="295" height="180" class="alignone" src="'+d+'"/>'}else{img[i]='<img class="alignright"