Widget atraente vertical de posts recentes

Olá e bem-vindo ao Mult-focos. Neste post trazemos um widget atraente vertical de posts recentes. Veja um demo clicando no botão abaixo ou em Result no box de códicos.

Frases Verdadeiras – Jô Soares

DEMO
Como adicionar este widget 

• Ir para o painel do blogger->layout Clique em Adicionar um Gadget. 
• Na janela Adicionar um gadget->HTML/JavaScript. 
• Copie o código HTML abaixo e cole-o dentro da caixa de conteúdo. 
• Salvar o gadget. 
• Arraste o gadget e reposicione-o onde você quer mostrar-lo. 
• Clique no botão Salve (canto superior direito). 

Configuração 

• Basta substituir o http://mult-focos.blogspot.com.br/ com seu próprio endereço do blog ( Url )
•  Widget vem com largura fixa, você também pode editar a largura alterando seguinte valor (#bp_recent img { width: 120px; ). 
• Quantidade de posts (var numberOfPosts = 8;)

Bem amigos isto é tudo.

---

<style> 
#bp_recent { 
width:320px; 
padding: 5px; 
color: #999; 
font-size: 14px; 
text-align:justify; 
}
#bp_recent img { 
width: 120px; 
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="https://sites.google.com/site/multfocosjavascript/gadgets-e-widgets/recentposts.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='http://mult-focos.blogspot.com.br/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

See the Pen Widget atraente vertical de posts recentes by Mairink (@Oemes) on CodePen.

---

---