saiba como se faz: "postagens populares com efeito de slide"

POSTAGENS POPULARES COM EFEITO DE SLIDE

►demonstração◄

..."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 dá 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" 

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

Clique no botão "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 próximo código:

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-rdeoVRz1VM-QGTe0HoVoAVzt4nXiLURn-MCjN9nauxZKdopRquKJKQl0xa5u5nTW3k5z3fMVC9FbyCE7icOrGUSNzeJ9fFAsf768GTXzmRcAd27-326lMgEtcOhHqC4gcoiK5padK4A/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 código 

abaixo e cole no local indicado. 

..." 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.

- 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... 
...não é local para desentendimentos e discórdias! 
Seja bastante educado! Frequenta qual escola, ou frequentou?
 ...ou a educação vem de berço?