Widget últimos posts com imagens

Olá amigos Mult-focos, sempre é aconselhável manter seu Blogger bem apresentável, isto lhe proporciona uma atração a mais para manter seu publico visitante. Temos aqui um atraente widget últimos posts com imagens, o que dará seus visitantes, muitas opções de leitura e por consequência sua permanência em seu blog.

Como colocar efeito de neve no cursor do mouse

Este atraente widget é muito fácil de configurar e adicionar em seu blog veja seu demo clicando no botão abaixo ou em Result no Box de códigos(passe o mouse sobre as imagens para ver título e efeito do widget).

DEMO   Como adicionar em seu blog

Copie o código JS no Box de códigos e siga os procedimentos necessários de adicionar um gadget, se não sabe como aprenda AQUI.

Como configurar

No próprio código tem a dica onde colocar a url do seu blog, você pode também editar a largura do widget para melhor se adaptar ao seu blog, é só alterar o seginte valor: width: 320px;

<style> 
#bp_recent { 
width:250px; 
padding: 5px; 
color: #999; 
font-size: 14px; 
text-align:justify; 
}
#bp_recent img { 
width: 97px; 
height: auto; 
border: 8px solid rgba(255, 255, 255, 0.5) !important; 
-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2); 
box-shadow:1px 1px 1px rgba(0,0,0,0.2); 
  -webkit-transition: all 1s ease-in-out; 
  -moz-transition: all 1s ease-in-out; 
  -o-transition: all 1s ease-in-out; 
  transition: all 1s ease-in-out; 
}
#bp_recent img:hover { 
opacity: 0.5; 
-webkit-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.2); 
box-shadow:0px 1px 1px 1px rgba(0,0,0,0.2); 
} 
#bp_recent a{ 
margin-bottom: 10px!important; 
}
</style> 
<div id='bp_recent'></div> 
<script type="text/javascript" src="http://yourjavascript.com/401413211131/recentposts-orig.js"></script> 
<script style='text/javascript'> 
var numberOfPosts = 8; 
var showPostDate = false; 
var showSummary = false; 
var summaryLength = 0; 
var titleLength = 0; 
var showCommentCount = false; 
var showThumbs = true; 
var showNoImage = true; 
var imgDim = 55; 
var imgFloat = 'left'; 
var myMargin = 5; 
var mediaThumbsOnly = true; 
var showReadMore = false; 
var readMore = 'Leia mais'; 
</script> 
<script src='AQUI A URL DO SEU BLOG/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

See the Pen WUPCI by Mairink (@Oemes) on CodePen.

---

---