Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1502920770
Vida do cache: 1502963970
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Widget

Widget com Lista de Artigos Rotativos na Sidebar

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.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

1 Comentário

  1. SocialLie disse:

    Queria colocar só com imagens de cada post. Como faço?

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.