#a dica ee - a dica é ...►INICIO◄: popularesadicaee

Pesquisar

Mostrando postagens com marcador populares. Mostrar todas as postagens
Mostrando postagens com marcador populares. Mostrar todas as postagens

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 
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 
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
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?

Postagem em destaque

Como usar a mesma conta do WhatsApp em dois celulares

Como usar a mesma conta do WhatsApp em dois celulares

Topo