• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Há um tempo atrás, eu encontrei uma dica super interessante no Templates Novo Blogger, de como incluir na sidebar uma listagem em forma de um pequeno slide com todos os artigos publicados no blog, que mostra todos os posts, incluindo o autor, a data da postagem, e um resumo do conteúdo.
É lógico que eu inclui esse Widget no meu blog, que vocês podem conferir na minha coluna lateral (sidebar).

Se você quiser inclui-lo também em seu blog, vá até ‘Layout’ ? ‘Elementos de página’ ? Clique em ‘Adicionar um elemento de página’? Escolha tipo ‘HTML/Javascript’.

Copie e cole o código abaixo:

<style type="text/css">
 .gfg-root {
 width : 98%;
 height : auto;
 position : relative;
 overflow : hidden;
 text-align : center;
 font-family: Arial, sans-serif;
 font-size: 12px;padding:2px;background:#ccc;
 border: 1px solid #fff;

}

.gfg-title {
 font-size: 16px;
 font-weight : bold;
 color : #414141;
 background-color: #E9E9E9;
 line-height : 1.4em;
 overflow : hidden;
 white-space : nowrap;
}
.gfg-subtitle {
 font-size: 14px;
 font-weight : bold;
 color : #CC0099;
 background-color: #fff;
 line-height : 1.4em;
 overflow : hidden;
 white-space : nowrap;
 margin-bottom : 0px;
}

.gfg-subtitle a {
 color : #CC0099;
 display:none !important;
}


.gfg-entry {
 background-color : white;
 width : 100%;
 height : 6.2em;
 position : relative;
 overflow : hidden;
 text-align : left;
 margin-top : 0px;
 padding-bottom:5px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
 position : relative;
 background-color : white;
 width : auto;
 height : 100%;
 padding-left : 5px;
 padding-right : 5px;
 padding-bottom: 20px;
}

.gfg-list {
 position : relative;
 overflow : hidden;
 text-align : left;
 margin-bottom : 15px;
 display:none !important;
}

.gfg-root .gfg-entry .gf-result .gf-title {
 font-size: 13px;
 display:block;
 color:#FF0033;
 font-weight:bold;
 line-height : 1.2em;
 overflow : hidden;
 white-space : nowrap;
 text-overflow : ellipsis;
 -o-text-overflow : ellipsis;
 margin-top : 4px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
 line-height : 1.3em;
 color: #111;
 margin-top : 3px;font-size: 12px;
}

.clearFloat {
 clear : both;
}

   #feedGadget {
     margin-top : 3px;
     margin-left: auto;
     margin-right: auto;
     width : 98%;
     padding-bottm:4px;
     font-size: 10px;
     color: #000;
   }

</style>

<script src="http://www.google.com/jsapi/?key=PUT_AJAX_KEY_HERE" type="text/javascript"></script>
 <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">
function showGadget() {
var feeds = [
{title:'title',url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
       ];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true, title: "BLOG_TITLE ~ Random Posts."});
   }
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

O Código acima requer algumas modificações para que ele funcione, portanto você deverá fazer as modificaçãoes nos seguintes trechos:

<script src="http://www.google.com/jsapi/?key=PUT_AJAX_KEY_HERE" type="text/javascript"></script>
 <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">
function showGadget() {
var feeds = [
{title:'title',url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
       ];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true, title: "BLOG_TITLE ~ Random Posts."});
   }
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

Em PUT_AJAX_KEY_HERE, é necessário que você coloque o a chave API de pesquisa AJAX, e para obtê-la você deverá clicar Aqui. Coloque a URL do seu blog, copie o código fornecido e cole no local especificado(Onde está AJAX_KEY_HERE).

Em MYBLOG -> inclua o nome do seu blog.
BLOG_TITLE ~ Random Posts. -> Configure o titulo que você achar melhor. (Ex. Artigos Postados, Outros artigos, Leia também etc).

Dica de como configurar fonte, cor de fundo, titulo Principal, subtitulos e cor da borda:

A 1ª parte do código (.gfg-root) se refere ao Titulo Principal no topo, bem como autor e data da postagem.
Lá você pode personalizar as cores do fundo, cor e tamanho da fonte e alinhamento do texto, da maneira que quiser, para isto, basta modificar os trechos em:
text-align : center -> alinhamento do Titulo
font-size: 12px -> Tamanho da fonte
background:#ccc -> Cor do plano de fundo
border: 1px solid #fff -> Cor da borda do widget.

Faça o mesmo procedimento em (.gfg-title) , caso queira personalizar o Titulo Principal, alterando tamanho e cores da fonte, ou se quiser destacar o fundo com uma cor diferente.

Em (.gfg-subtitle), se refere ao subtitulo no código, que é o título que você deu a sua postagem no blog e você também pode personalizar tamanho e cores da fonte e cor do plano de fundo, utilizando o mesmo procedimento explicado acima.

Agora é só usar a imaginação e personalizar o widget de acordo com as cores do seu template para dar destaque e boa aparência do mesmo.

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn