Como colocar Widget de posts recentes para Blogger

Olá sou o prof. Valdivino Sousa e vou ensinar neste post, como clocar Widget de posts recentes para Blogger. Muitos têm dúvidas de como colocar, pois alguns templantes não veem prontos, e precisamos personalizá-lo.

Veja também Gerador de widget posts recentes

Este é o visual do widget

No widget vai constar o título do post, nº correspondente, um pequeno resumo,o link leia mais e a data da sua publicação.

Como adicionar em seu blog

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

Configurações

O widget vai por padrão destacando 5 posts, mas você pode aumentar ou diminuir esta quantidade mudando o valor em: var posts_no = 5 , mude o numero 5 destacado no código em amarelo. Isto é tudo.

<div class="recentpoststyle">
<script src="https://sites.google.com/site/multfocosjavascript/postsrecentes-1/mult-focos-postsrecentes.js"></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://mult-focos.blogspot.com/2014/11/widget-de-posts-recentes.html" rel="nofollow">Widget posts recentes</a>
<noscript>Seu navegador não suporta JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none; color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>