Postagens populares com efeito de slide 
Autor: Elke di Barros | Publicado: 2014-07-28T18:33:00-03:00




DEMO


Que tal dar as postagens populares uma aparência de slide e um destaque a mais para os visitantes de seu blog ? Neste caso as postagens populares terão um efeito hover com o título das postagens, o que da um ar mais profissional a seu blog.
Para isso a primeira coisa a fazer é deletar o seu widget de postagens populares ou dará conflito nos códigos. Depois de retirar o widget, siga o passo a passo.



Vá até o "Modelo de seu blog", clique em "Editar HTML"    




&nbsp; Hack para o template do Blogger, implementado em&nbsp; abril de 2013. 













Clique no botão "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho.





&lt;div class='main-outer'&gt;


Acima dele, cole o próximo código:


&lt;b:if cond='data:blog.pageType == &amp;quot;index&amp;quot;'&gt;

&lt;div id='tm_featured'&gt;
&lt;div class='folder'&gt;
&lt;div class='folder_all'&gt;
&lt;b:section class='folder_item' id='folder_item' preferred='yes' showaddelement='no'&gt;
&nbsp; &lt;b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'&gt;
&nbsp; &nbsp; &lt;b:includable id='main'&gt;
&lt;div class='widget-content popular-posts'&gt;
&lt;ul&gt;
&lt;b:loop values='data:posts' var='post'&gt;
&lt;div class='featured_item'&gt;
&lt;b:if cond='data:showThumbnails == &amp;quot;false&amp;quot;'&gt;
&lt;b:if cond='data:showSnippets == &amp;quot;false&amp;quot;'&gt;
&lt;a expr:href='data:post.href'&gt;&lt;data:post.title/&gt;&lt;/a&gt;
&lt;b:else/&gt;
&lt;div class='item-title'&gt;&lt;a expr:href='data:post.href'&gt;&lt;data:post.title/&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class='item-snippet'&gt;&lt;data:post.snippet/&gt;&lt;/div&gt;
&lt;/b:if&gt;
&lt;b:else/&gt;
&lt;b:if cond='data:showSnippets == &amp;quot;false&amp;quot;'&gt;
&lt;div class='item-thumbnail-only'&gt;
&lt;b:if cond='data:post.thumbnail'&gt;
&lt;div class='item-thumbnail'&gt;
&lt;a expr:href='data:post.href' target='_blank'&gt;
&lt;img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/b:if&gt;
&lt;div class='item-title'&gt;&lt;a expr:href='data:post.href'&gt;&lt;data:post.title/&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div style='clear:both'/&gt;
&lt;b:else/&gt;
&lt;div class='folderboxpic'&gt;
&lt;a class='article' expr:href='data:post.href' rel='bookmark'&gt;
&lt;b:if cond='data:post.thumbnail'&gt;
&lt;img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='72' width='72'/&gt;
&lt;b:else/&gt;
&lt;img alt='no image' height='200' src='http://2.bp.blogspot.com/-uW6pc9-v9Dc/U5UD8rsZICI/AAAAAAAAdWA/pQpRQbUuSw8/s1600/sem+imagem3.png' width='200'/&gt;
&lt;/b:if&gt;
&lt;div class='folderboxtitle'&gt;&lt;div class='folderboxbackground'&gt;&lt;div id='tm-folderboxbackground-720'&gt;&lt;data:post.title/&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/a&gt;
&lt;div class='clear'/&gt;
&lt;/div&gt;
&lt;/b:if&gt;
&lt;/b:if&gt;
&lt;/div&gt;
&lt;/b:loop&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/b:includable&gt;
&nbsp; &lt;/b:widget&gt;
&lt;/b:section&gt;
&lt;div class='clear'/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/b:if&gt;


Salve. Agora vamos dar estilo implementando o CSS





Implementar CSS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 



No modelo de seu blog", clique em "Personalizar"


















Ao abrir essa janela, vá em Avançado&nbsp; -------&gt; Adicionar CSS&nbsp;










Copie o código abaixo e cole no local indicado. Perceba que deixei em destaque a largura total do slide, em cor vermelha e as imagens das postagens (cada quadradinho) está em destaque na cor azul. Modifique para que fique de acordo com seu blog. A cor de fundo está em destaque na cor amarela e as bordas e cor de fundo da área dos títulos estão em destaque na cor verde.





/*Popular post slide-----------------------------------*/
.folder{margin: -24px 0 28px 0}
#tm_featured {background: #808080; /*Cor de fundo da área */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 área dos títulos*/
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.