saiba como se faz: "postagens populares com efeito de slide"
Autor: edilene bds | Publicado: 2014-09-01T13:24:00-07:00






POSTAGENS POPULARES COM EFEITO DE SLIDE








►demonstração◄
..."dar as postagens populares&nbsp;

uma aparência de slide&nbsp;

e&nbsp;

um destaque a mais&nbsp;

para os visitantes de seu blog ? "



"Neste caso as postagens populares terão&nbsp;

um efeito hover&nbsp;

com o título das postagens,&nbsp;

o que dá um ar mais profissional a seu blog."

Para isso a primeira coisa a fazer é&nbsp;

deletar&nbsp;

o seu&nbsp;

widget de postagens populares&nbsp;

ou dará conflito nos códigos.&nbsp;



Depois de retirar o widget,&nbsp;

siga o passo a passo.Vá até o "Modelo de seu blog",&nbsp;

clique em "Editar HTML"&nbsp;



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










Clique no botão "Editar modelo"&nbsp;

e depois nas teclas Ctrl e F.&nbsp;

Ao abrir a janela, procure&nbsp;

pelo seguinte trecho.


&lt;div class='main-outer'&gt;Acima&nbsp;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.&nbsp;

Agora ...

... "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;No modelo de seu blog", clique em "Personalizar"




Copie o código&nbsp;

abaixo e cole no local indicado.&nbsp;

..." em destaque&nbsp;

a largura total do slide, em cor vermelha&nbsp;

e&nbsp;

as imagens das postagens (cada quadradinho)&nbsp;

está em destaque na cor azul.&nbsp;



"Modifique para que fique de acordo com seu blog."



"A cor de fundo está em destaque na cor amarela e&nbsp;

as bordas e cor de fundo da área dos títulos estão&nbsp;

em destaque na cor verde."


/*Popular post slide-----------------------------------*/.folder{margin: -24px 0 28px 0}#tm_featured {background:&nbsp;#808080; /*Cor de fundo da área */padding: 0; }.folder_all{padding:0}.folder_all { padding: 0px 0; margin: -20px 0; width:&nbsp;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&nbsp;#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.



- See more at: http://templateseacessorios.blogspot.com.br/2014/07/postagens-populares-com-efeito-de-slide.html#sthash.dOYoVBfM.dpuf

fonte:
templateseacessorios



Mensagem do formulário de comentário:


"comentários de anônimos, não serão publicados,
e aqui...&nbsp;
...não é local para desentendimentos e discórdias!&nbsp;
Seja bastante educado!
Frequenta qual escola, ou frequentou?
&nbsp;...ou a educação vem de berço?