Widget de posts recentes para Blogger

Widgets
Olá e bem-vindo ao Mult-focos. Trazemos neste post mais um modelo entre vários que já postamos aqui de um widget de posts recentes para blogger, é sem duvida um widget indispensável para seu blog.


Widget de posts recentes para Blogger
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>


Postado por Mairink Oemes

2 comentários:

Todos comentários são lidos e moderados previamente.
São publicados apenas aqueles que respeitarem as regras abaixo:
-Ter relação com o assunto do post.
-Não conter propagandas de outro site ou blog.
-Não incluir links no conteúdo do comentário.
-Se quiser deixar sua URL, comente usando a opção OpenID;
Obrigado(a) por comentar!

free website hit counter