Feed dinamico en tu blog (Para Blogger y WordPress)

Blogspot, Internet, Tecnología, Tips, Tutoriales y Tips, Utilidades Añade despistes
dic 142009

Si tienes mas de un blog y quieres mostrar tus fedds en todos lo vas a poder hacer de la siguiente forma.

Puedes verlo funcionando en el blog de Recursos Gratis

Para alojar el gráfico y el archivo puedes usar Dropbox (Ver tutorial)

Descargar: (Gráfico y archivo js)

CODIGOS:

<style>.gfg-root {
width : 350px;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: “Arial”, sans-serif;
font-size: 12px;
border: 1px solid #9C1114;
}
.gfg-title {
font-size: 14px;
font-weight : bold;
color : #ffffff;
background-color: #9C1114;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
.gfg-title a {
color : #ffffff;
}
.gfg-subtitle {
font-size: 12px;
font-weight : bold;
color : #333333;
background-color: #eae6e7;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 5px;
}
.gfg-subtitle a {
color : #333333;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
/* 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 : #ffffff;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
background-image : url(‘http://i599.photobucket.com/albums/tt78/redblogs/banner/garrow.png’);
background-repeat: no-repeat;
background-position :  left center;
}
/*
* 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 a {
color : #444444;
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: #0000cc;
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: #AAAAAA;
}
.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(‘arrow_open.gif’);
}
.gfg-collapse-closed {
background-image : url(‘arrow_close.gif’);
}
.gfg-collapse-href {
float : left;
}
.clearFloat {
clear : both;
}</style>
<!– ++Begin Dynamic Feed Wizard Generated Code++ –>
<!–
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
–>
<!–
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
–>
<div id=”feed-control”>
<span style=”color:#676767;font-size:11px;margin:10px;padding:4px;”>Loading…</span>
</div>
<!– Google Ajax Api
–>
<script src=”http://www.google.com/jsapi?key=notsupplied-wizard”
type=”text/javascript”></script>
<!– Dynamic Feed Control and Stylesheet –>
<script src=”http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js”
type=”text/javascript”></script>
<script type=”text/javascript”>
function LoadDynamicFeedControl() {
var feeds = [ {title: 'Red ', url: 'http://feeds.feedburner.com/RedDeBlogs-InternetYTecnologiaWeb' }, {title: 'Recursos Gratis', url: 'http://todorecursosgratis.blogspot.com/atom.xml' }, {title: 'Templates', url: 'http://xanarts.blogspot.com/atom.xml' }];
var options = {
stacked : true,
horizontal : false,
title : “News”
}
new GFdynamicFeedControl(feeds, ‘feed-control’, options);
}
// Load the feeds API and set the onload callback.
google.load(‘feeds’, ’1′);
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
<!– ++End Dynamic Feed Control Wizard Generated Code++ –>

<style>.gfg-root {

width : 350px;

height : auto;

position : relative;

overflow : hidden;

text-align : center;

font-family: “Arial”, sans-serif;

font-size: 12px;

border: 1px solid #9C1114;

}

.gfg-title {

font-size: 14px;

font-weight : bold;

color : #ffffff;

background-color: #9C1114;

line-height : 1.4em;

overflow : hidden;

white-space : nowrap;

}

.gfg-title a {

color : #ffffff;

}

.gfg-subtitle {

font-size: 12px;

font-weight : bold;

color : #333333;

background-color: #eae6e7;

line-height : 1.4em;

overflow : hidden;

white-space : nowrap;

margin-bottom : 5px;

}

.gfg-subtitle a {

color : #333333;

}

.gfg-entry {

background-color : white;

width : 100%;

height : 6.9em;

position : relative;

overflow : hidden;

text-align : left;

margin-top : 3px;

}

/* 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 : #ffffff;

}

.gfg-listentry-even {

}

.gfg-listentry-highlight {

background-image : url(‘URL/garrow.png‘);

background-repeat: no-repeat;

background-position : left center;

}

/*

* 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 a {

color : #444444;

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: #0000cc;

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: #AAAAAA;

}

.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(‘arrow_open.gif’);

}

.gfg-collapse-closed {

background-image : url(‘arrow_close.gif’);

}

.gfg-collapse-href {

float : left;

}

.clearFloat {

clear : both;

}</style>

<!– ++Begin Dynamic Feed Wizard Generated Code++ –>

<!–

// Created with a Google AJAX Search and Feed Wizard

// http://code.google.com/apis/ajaxsearch/wizards.html

–>

<!–

// The Following div element will end up holding the actual feed control.

// You can place this anywhere on your page.

–>

<div id=”feed-control”>

<span style=”color:#676767;font-size:11px;margin:10px;padding:4px;”>Loading…</span>

</div>

<!– Google Ajax Api

–>

<script src=”http://www.google.com/jsapi?key=notsupplied-wizard”

type=”text/javascript”></script>

<!– Dynamic Feed Control and Stylesheet –>

<script src=”URL/gfdynamicfeedcontrol.js”

type=”text/javascript”></script>

<script type=”text/javascript”>

function LoadDynamicFeedControl() {

var feeds = [ {title: 'Red Blogs', url: 'http://feeds.feedburner.com/RedDeBlogs-InternetYTecnologiaWeb' }, {title: 'Recursos Gratis', url: 'http://todorecursosgratis.blogspot.com/atom.xml' }, {title: 'Templates', url: 'http://xanarts.blogspot.com/atom.xml' }];

var options = {

stacked : true,

horizontal : false,

title : “News”

}

new GFdynamicFeedControl(feeds, ‘feed-control’, options);

}

// Load the feeds API and set the onload callback.

google.load(‘feeds’, ’1′);

google.setOnLoadCallback(LoadDynamicFeedControl);

</script>

<!– ++End Dynamic Feed Control Wizard Generated Code++ –>

Modificas a tu gusto lo que marco en rojo de la CSS, el tamaño -width : 350px- los colores, La URL del gráfico -background-image : url(‘URL/garrow.png‘);-

Y el titulo y URL de tus feeds:

var feeds = [ {title: 'Red Blogs', url: 'http://feeds.feedburner.com/RedDeBlogs-InternetYTecnologiaWeb' }, {title: 'Recursos Gratis', url: 'http://todorecursosgratis.blogspot.com/atom.xml' }, {title: 'Templates', url: 'http://xanarts.blogspot.com/atom.xml' }];

Ya con todos tus datos pegas los códigos en un gadget HTML

------------------------------------------

Post relacionados:

  1. Otro efecto de nieve para Blogger al estilo WordPress
  2. Como poner nieve en tu web/blog
  3. Imagen navideña flotando en tu blog para Blogger y WordPress. Navidad 2009
  4. Estrellas de navidad en tu blog, Blogger y WordPress. Navidad 2009
  5. Agregar entradas relacionadas en Blogspot

Red Blogs

Publicado por Red Blogs a las 7:48 Etiquetado en:, ,

2 Respuesta a “Feed dinamico en tu blog (Para Blogger y WordPress)”

Comentarios (1) Trackbacks (1)
  1. czv dice:
    13 julio 2010 en 19:33

    hola amigo, no me resulta. subí a mi servidor el .js edité los códigos y lo pegué en un elemento html de blogger y se queda en “loading…” nada se ve.

    saludos.

    Responder

Deja Un Despiste

(necesario)

(necesario)

Puedes utilizar estas etiquetas HTML y atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© 2012 Red Blogs Suffusion theme by Sayontan Sinha