Super fácil. Copie o código e cole no HTML/Javascript em seu blog, colocando o endereço de seu blog no local indicado (cor vermelha).
NÃO SE ESQUEÇA DE COLOCAR O ENDEREÇO DE SEU BLOG NO LOCAL INDICADO !
<div id="feed-control">
<span style="color:#000;font-size:12px;margin:10px;padding:4px;">Carregando...</span>
</div>
<script src="http://www.google.com/jsapi?key=notsupplied-wizard"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
.gfg-root {
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
width: 100%;
height: auto;
position: relative;
overflow: hidden;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 12px;
border: 1px solid #ccc;
}
.gf-author {font-size: 10px}
.gfg-title {
text-shadow: 1px 1px 1px #fff;
padding: 10px 0;
font-size: 18px;
font-weight: bold;
color: #000;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ-NQqA8n_zcw7L3qoXhYhLN03FSA-2brG6-ub0kDrN2KigKSupJly0k1ReTJVscV7MPoDqqWnlbHDm0e0aRjqnWxJcQ_x_UR_sfXMpgfw1mhWkiEH0DxvS-ydzfSMSY3CeP3y9JhX1D8/s1600/featured.png) no-repeat;
line-height: 1.4em;
white-space: nowrap;
}
.gfg-title a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Gz54_xS6N8alQBGCv0oUu_a70e1odtqhA0yvRpYyigT8-_3vZwX1e0JumqBtjRDxjtP3AYsYlbICfS9SUxmWWWcUFHln4vkYDHPmfrr6uzo4HzF8HwLhiGwyPYH2mU1B-nKZmkCZQMQ/s1600/upcoming-work.png) no-repeat;
color: #cc0000;overflow: hidden;
font-size: 14px;
}
.gfg-subtitle {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVGfnYMTt7CWh57crAAgf3vcRm2p8jwzr3Qu0iIT3PzBfP9jGskFG2mkgX0wqvs4p9Txg3NXGCz6JGnHIuYdZpnm46Uky0fuQ5ZPY0_KnTT4jBOrGr8NkzBQPVEaBBW521bJk8C_8xKQ/s1600/future-projects.png) no-repeat left;
padding: 10px 0;
font-size: 18px;
font-weight: bold;
color: #000;
background-color: #ccc;
line-height: 1.4em;
overflow: hidden;
white-space: nowrap;
margin-bottom: 5px;
}
.gfg-subtitle a {
float: center;
color: #000;
text-shadow: 1px 1px 1px #fff;
}
.gfg-entry {
width: 100%;
overflow: hidden;
text-align: left;
margin-top: 3px;
}
.gfg-entry a{
width: 100%;
padding: 0px 0 0px 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Gz54_xS6N8alQBGCv0oUu_a70e1odtqhA0yvRpYyigT8-_3vZwX1e0JumqBtjRDxjtP3AYsYlbICfS9SUxmWWWcUFHln4vkYDHPmfrr6uzo4HzF8HwLhiGwyPYH2mU1B-nKZmkCZQMQ/s1600/upcoming-work.png) no-repeat;
background-color: #eee;
color: #cc0000;
overflow: hidden;
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position: relative;
background-color: white;
width: auto;
height: 100%;
padding-left: 20px;
padding-right: 5px;
}
.gfg-list {
position: relative;
overflow: hidden;
text-align: left;
margin-bottom: 5px;
}
.gfg-listentry {
line-height: 1.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
padding-left: 15px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.gfg-listentry-odd {
background-color: #eee;
}
.gfg-listentry-odd a{color: #cc0000;}
.gfg-listentry-even {
}
.gfg-listentry-even a {color: #cc0000;}
.gfg-listentry-highlight {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifmqRGZCTTRBffK9G9dpKNC0DYKpqV-ZdqktLwDTVUmC0epvWcefU6gsMIF4kRExNAVDXi9CQsmulzn3eR35PCMrtdAYFZQPd6_jYzZBhtghTd3TX8OEkf4fxQmqZ9hLsjxmWcbORC13A/s1600/1as18.gif');
background-repeat: no-repeat;
background-position: center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height: 1.2em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
margin-bottom: 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height: 3.8em;
color: #000000;
margin-top: 3px;
}
/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/
.gfg-horizontal-container {
position: relative;
}
.gfg-horizontal-root {
height: 1.5em;
_height: 100%;
position: relative;
white-space: nowrap;
overflow: hidden;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding: 5px;
margin-right: 80px;
}
.gfg-horizontal-root .gfg-title {
font-weight: bold;
background-color: #FFFFFF;
line-height: 1.5em;
overflow: hidden;
white-space: nowrap;
float: left;
padding-left: 10px;
padding-right: 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title li {color: #cc0000; }
.gfg-horizontal-root .gfg-title a {
color: #ccc;
text-decoration: none;
}
.gfg-horizontal-root .gfg-entry {
width: auto;
height: 1.5em;
position: relative;
overflow: hidden;
text-align: left;
margin-top: 0px;
margin-left: 0px;
padding-left: 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position: relative;
background-color: white;
width: 100%;
height: 100%;
line-height: 1.5em;
overflow: hidden;
white-space: nowrap;
}
.gfg-horizontal-root .gfg-list {
display: none;
}
/*
* FeedControl customizations.
*/
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display: none;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #000;
margin-right: 3px;
float: left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float: left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display: block;
color: #cc0000;
}
.gfg-branding {
white-space: nowrap;
overflow: hidden;
text-align: left;
position: absolute;
right: 0px;
top: 0px;
width: 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor: pointer;
float: right;
width: 17px;
height: 20px;
}
.gfg-collapse-open {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFvl51BtVa1AEnmXdIQeZZWRVo8uoEDmQqq16Cin-u84FCIkJzctucPWyBmvtfGjXK7OP6c_6xzAwCS81r9YcYDtFX64Fbvykhrim21RY8ue52ZLph1vF-E5x0cZ7mUnZfDidyHgMhkM/s1600/5.gif');
}
.gfg-collapse-closed {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFvl51BtVa1AEnmXdIQeZZWRVo8uoEDmQqq16Cin-u84FCIkJzctucPWyBmvtfGjXK7OP6c_6xzAwCS81r9YcYDtFX64Fbvykhrim21RY8ue52ZLph1vF-E5x0cZ7mUnZfDidyHgMhkM/s1600/5.gif');
}
.gfg-collapse-href {
float: left;
}
.clearFloat {
clear: both;
}
</style>
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'Últimos posts',
url: 'AQUI O ENDEREÇO DE SEU BLOG/rss.xml'
},
];
var options = {
stacked : true,
horizontal : false,
title : "Posts + vistos"
}
new GFdynamicFeedControl(feeds, 'feed-control', options);
}
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
<span style="color:#000;font-size:12px;margin:10px;padding:4px;">Carregando...</span>
</div>
<script src="http://www.google.com/jsapi?key=notsupplied-wizard"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
.gfg-root {
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
width: 100%;
height: auto;
position: relative;
overflow: hidden;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 12px;
border: 1px solid #ccc;
}
.gf-author {font-size: 10px}
.gfg-title {
text-shadow: 1px 1px 1px #fff;
padding: 10px 0;
font-size: 18px;
font-weight: bold;
color: #000;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ-NQqA8n_zcw7L3qoXhYhLN03FSA-2brG6-ub0kDrN2KigKSupJly0k1ReTJVscV7MPoDqqWnlbHDm0e0aRjqnWxJcQ_x_UR_sfXMpgfw1mhWkiEH0DxvS-ydzfSMSY3CeP3y9JhX1D8/s1600/featured.png) no-repeat;
line-height: 1.4em;
white-space: nowrap;
}
.gfg-title a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Gz54_xS6N8alQBGCv0oUu_a70e1odtqhA0yvRpYyigT8-_3vZwX1e0JumqBtjRDxjtP3AYsYlbICfS9SUxmWWWcUFHln4vkYDHPmfrr6uzo4HzF8HwLhiGwyPYH2mU1B-nKZmkCZQMQ/s1600/upcoming-work.png) no-repeat;
color: #cc0000;overflow: hidden;
font-size: 14px;
}
.gfg-subtitle {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVGfnYMTt7CWh57crAAgf3vcRm2p8jwzr3Qu0iIT3PzBfP9jGskFG2mkgX0wqvs4p9Txg3NXGCz6JGnHIuYdZpnm46Uky0fuQ5ZPY0_KnTT4jBOrGr8NkzBQPVEaBBW521bJk8C_8xKQ/s1600/future-projects.png) no-repeat left;
padding: 10px 0;
font-size: 18px;
font-weight: bold;
color: #000;
background-color: #ccc;
line-height: 1.4em;
overflow: hidden;
white-space: nowrap;
margin-bottom: 5px;
}
.gfg-subtitle a {
float: center;
color: #000;
text-shadow: 1px 1px 1px #fff;
}
.gfg-entry {
width: 100%;
overflow: hidden;
text-align: left;
margin-top: 3px;
}
.gfg-entry a{
width: 100%;
padding: 0px 0 0px 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Gz54_xS6N8alQBGCv0oUu_a70e1odtqhA0yvRpYyigT8-_3vZwX1e0JumqBtjRDxjtP3AYsYlbICfS9SUxmWWWcUFHln4vkYDHPmfrr6uzo4HzF8HwLhiGwyPYH2mU1B-nKZmkCZQMQ/s1600/upcoming-work.png) no-repeat;
background-color: #eee;
color: #cc0000;
overflow: hidden;
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position: relative;
background-color: white;
width: auto;
height: 100%;
padding-left: 20px;
padding-right: 5px;
}
.gfg-list {
position: relative;
overflow: hidden;
text-align: left;
margin-bottom: 5px;
}
.gfg-listentry {
line-height: 1.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
padding-left: 15px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.gfg-listentry-odd {
background-color: #eee;
}
.gfg-listentry-odd a{color: #cc0000;}
.gfg-listentry-even {
}
.gfg-listentry-even a {color: #cc0000;}
.gfg-listentry-highlight {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifmqRGZCTTRBffK9G9dpKNC0DYKpqV-ZdqktLwDTVUmC0epvWcefU6gsMIF4kRExNAVDXi9CQsmulzn3eR35PCMrtdAYFZQPd6_jYzZBhtghTd3TX8OEkf4fxQmqZ9hLsjxmWcbORC13A/s1600/1as18.gif');
background-repeat: no-repeat;
background-position: center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height: 1.2em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
margin-bottom: 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height: 3.8em;
color: #000000;
margin-top: 3px;
}
/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/
.gfg-horizontal-container {
position: relative;
}
.gfg-horizontal-root {
height: 1.5em;
_height: 100%;
position: relative;
white-space: nowrap;
overflow: hidden;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding: 5px;
margin-right: 80px;
}
.gfg-horizontal-root .gfg-title {
font-weight: bold;
background-color: #FFFFFF;
line-height: 1.5em;
overflow: hidden;
white-space: nowrap;
float: left;
padding-left: 10px;
padding-right: 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title li {color: #cc0000; }
.gfg-horizontal-root .gfg-title a {
color: #ccc;
text-decoration: none;
}
.gfg-horizontal-root .gfg-entry {
width: auto;
height: 1.5em;
position: relative;
overflow: hidden;
text-align: left;
margin-top: 0px;
margin-left: 0px;
padding-left: 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position: relative;
background-color: white;
width: 100%;
height: 100%;
line-height: 1.5em;
overflow: hidden;
white-space: nowrap;
}
.gfg-horizontal-root .gfg-list {
display: none;
}
/*
* FeedControl customizations.
*/
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display: none;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #000;
margin-right: 3px;
float: left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float: left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display: block;
color: #cc0000;
}
.gfg-branding {
white-space: nowrap;
overflow: hidden;
text-align: left;
position: absolute;
right: 0px;
top: 0px;
width: 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor: pointer;
float: right;
width: 17px;
height: 20px;
}
.gfg-collapse-open {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFvl51BtVa1AEnmXdIQeZZWRVo8uoEDmQqq16Cin-u84FCIkJzctucPWyBmvtfGjXK7OP6c_6xzAwCS81r9YcYDtFX64Fbvykhrim21RY8ue52ZLph1vF-E5x0cZ7mUnZfDidyHgMhkM/s1600/5.gif');
}
.gfg-collapse-closed {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFvl51BtVa1AEnmXdIQeZZWRVo8uoEDmQqq16Cin-u84FCIkJzctucPWyBmvtfGjXK7OP6c_6xzAwCS81r9YcYDtFX64Fbvykhrim21RY8ue52ZLph1vF-E5x0cZ7mUnZfDidyHgMhkM/s1600/5.gif');
}
.gfg-collapse-href {
float: left;
}
.clearFloat {
clear: both;
}
</style>
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'Últimos posts',
url: 'AQUI O ENDEREÇO DE SEU BLOG/rss.xml'
},
];
var options = {
stacked : true,
horizontal : false,
title : "Posts + vistos"
}
new GFdynamicFeedControl(feeds, 'feed-control', options);
}
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
Cordiais cumprimentos.
ResponderExcluirLinkamos teu site na lista do nosso pois é muito rico nas publicações.
Gostariamos muito de saber como podemos adcionar um Widget com a lista dos blogs que seguimos, pois a lista é enorme e não temos espaço, na home e gostariamos de deixar visível para os amigos que nos visitam, temos uma fixa pequena mas achamos injusto colocar uns e outros não.
Então achamos que numa caixnha rolando os nome resolveria o problema.
Gratos pela atenção.
Nosso abraço
Olá, foi muito boa sua intenção neste gadget, mas ele tem um problema...Depois que ele carrega, não aparece nenhum post. do blog.Tentei inseri-lo em meu blog e não funcionou(VEJA: http://muryllodantas.blogspot.com).
ResponderExcluirOutra coisa, como eu faço parceria, pois ja entrei em contato mas não recebi nenhuma resposta.Grato
@muryllo dantasvoc~e colocou o endereço de seu blog no local indicado ? Se não colocou é por isso que não funciona.
ResponderExcluirSim coloquei como no indicado neste post. Ele fica com string Carregando e não aparece mais nada além disso.Tentei modificá-lo mas nada aconteceu.Grato
ResponderExcluirOi Elke
ResponderExcluirAchei muito legal os dois modelos
e funcionaram direitinho
como personalizo as cores branco e cinza do modelo?
Gostei muito!! Só que como faço para Adicionar mais Post, Ja que só aparece 4
ResponderExcluir