Gadget de posts rotativos

El gadget de posts rotativos es una idea adaptada por Templates Novo Blogger y que muestra una serie de entradas con un efecto interesante.

Lo primero que necesitamos para utilizarlo es disponer de una clave del API AJAX de Google para búsquedas. Al leer esto, parecería que se trata de algo mu y complicado pero, en realidad, basta ir a esa página, colocar la URL del sitio donde vanos a usarla y generar la clave que será una larga lista de números y letras como esta:

GFQIYYYmEsy0hRTvLkOBHGTRFoTOxQdHqM2VVjGZXZiTctOOgVFDSbcuBBp_W_qoHvPa_omCD5vxrkeKJxQ_V

He leído y acepto los términos y condiciones
Dirección URL de mi sitio web:


Con ese trámite burocrático terminado, ya podemos aplicar el truco.

El código lo agregaremos donde nos guste verlo, en la sidebar, debajo del header o incluso en un post en cuyo caso deberemos escribir todo en una sola línea:

<script src="http://www.google.com/jsapi/?key=AQUI_PONEMOS_LA_CLAVE_AJAX" 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:'NOMBREBLOG', url:'http://URLBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},];
    new GFdynamicFeedControl(feeds, 'feedGadget', {numResults : 1000, stacked : true, title: "TEXTO TITULO DEL GADGET"});
  }
    google.load("feeds", "1");
    google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Cargando ...</div>

donde debemos agregar nuestros datos, la clave AJAX, el nombre del blog o la dirección URL y él título que queremos usar.

Guardamos y listo.

Bueno, listo no ... faltaría el CSS que, como siempre, es lo que le dá características gráficas personales y que podemos agregar antes de </b:skin> o entre etiquetas STYLE:

#feedGadget { /* es el bloque donde se mostrará */
  margin: 0 auto; /* lo centramos */
  width : 350px; /* le damos un ancho */
}
.gfg-root { /* el gadget */
  background-color: #234;
  border: 1px solid #456;
  font-family: Arial,sans-serif;
  font-size: 12px;
  height: auto;
  overflow: hidden;
  padding: 4px;
  position: relative;
  text-align: center;
}
.gfg-title { /* el título superior */
  background-color: #456;
  color: #CDE;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4em;
 overflow: hidden;
  white-space: nowrap;
}
.gfg-subtitle { /* el título inferior */
  background-color: #456;
  font-size: 14px;
  line-height: 1.4em;
  overflow: hidden;
  white-space: nowrap;
}
.gfg-entry { /* el contenido */
  height: 9.9em;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 100%;
}
.gfg-root .gfg-entry .gf-result { /* el contenido */
  background-color: #123;
  height: 100%;
  padding: 0 10px;
  position: relative;
  width: auto;
}
.gfg-root .gfg-entry .gf-result .gf-title { /* el título de las entradas */
  color: #ABC;
  display: block;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.2em;
  margin-top: 5px;
  overflow: hidden;
  white-space: nowrap;
}
.gfg-root .gfg-entry .gf-result .gf-snippet { /* el texto de las entradas */
  color: #AAA;
  font-size: 12px;
  line-height: 1.3em;
  margin-top: 5px;
}
.clearFloat {
  clear : both;
}
.gfg-list { /* lista de entradas opcional */
  display:none !important;
}

Loading...