Este es un código JavaScript que permite mostrar las últimas publicaciones de cualquier feed con la particularidad de que tiene dos partes -ambas interesantes- y que podemos utilizar individualmente o combinadas.
En la parte superior se verá una sola entrada con su título (enlace), autor, fecha y un pequeño resumen de su contenido. Además, esta entrada irá rotando automáticamente de entre una lista cuya cantidad de elementos nosotros decidiremos. En la zona inferior se verá la lista completa de los posts seleccionados para el rotador y al pasar el puntero por encima de cualquiera de ellos, la entrada correspondiente se verá en la parte superior, rompiendo así el ciclo automático.Pero como siempre, mejor verlo en acción para ver si hace lo que queremos antes de montar nada.
OLOBLOGGER
de Oloman Oloman
-
04 May 2014
Con el código de hoy podremos convertir fácilmente una lista simple de elementos (imágenes y/o enlaces), en un menú tipo ...
Y como dije que se trata de un gadget, pues ahí es dónde hay que meter el código, en un gadget tipo HTML/JavaScript si hablamos de Blogger, aunque debería funcionar en cualquier plataforma.Esto es lo que habría que copiar y luego os comento los ajustes necesarios. Sin miedo, que la mayor parte es CSS.
<style>
/* CONTENEDOR GENERAL */
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 2px solid #666666;
}
/* TITULO FEED/BLOG */
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #fff;
background-color: #F69537;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
/* CONTENEDOR CUERPO SUPERIOR (entrada con resumen) */
.gfg-entry {
background-color : white;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
/* TITULO ENTRADA CUERPO SUPERIOR */
.gf-title a {
font-weight: bold;
}
/* SUBTÍTULO LISTA DE ENTRADAS */
.gfg-subtitle {
display: none;
}
/* CONTENEDOR CUERPO INFERIOR (lista entradas) */
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
/* CADA UNA DE LAS ENTRADAS DE LA LISTA */
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
/* ENTRADAS IMPARES DE LA LISTA */
.gfg-listentry-odd {
background-color : #eeeeee;
}
/* ENTRADAS PARES DE LA LISTA */
.gfg-listentry-even {
background-color : #fefefe;
}
/* MARCA PARA LA ENTRADA ACTUALMENTE VISIBLE */
.gfg-listentry-highlight {
background: #F69537;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #eee;
}
.gfg-listentry-highlight a {
color: #eee;
}
/* Ajustes */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;
}
</style>
<script src="http://www.google.com/jsapi" 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:'Lista',
url:'http://www.oloblogger.com/feeds/posts/default?redirect=false&
start-index=5&
max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{
title: 'OLOBLOGGER', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>
- title: 'OLOBLOGGER', el rótulo que saldrá arriba del todo.
- numResults : 10, número de posts que efectivamente se verán en la lista y rotando
- displayTime : 5000, tiempo de retardo entre posts en el rotador (en milisegundos)
- hoverTime : 500, tiempo mínimo sobre un elemento de la lista para que se visualice en la parte superior.
Y con CSS podemos obtener fácilmente un par de variantes que sólo nos mostrará el rotador o sólo la lista. En este mismo orden esto es simplemente lo que tendríamos que añadir para que se viera respectivamente como se muestra debajo del código.
.gfg-list {display:none;}
OLOBLOGGER
de Oloman Oloman
-
15 Ene 2014
Esto del flyout es el término que usa un plugin Wordpress llamado así (Nrelate Flyout) y que muestra en una ventana emergente ...
.gfg-entry {display:none;}
El código está obtenido de una librería que Google tiene para demos y en un principio no es probable que desaparezca. Si alguien quiere usarla desde un hosting propio, entonces habría quedescargarlo, cambiar la dirección y añadir a la carga de las librerías Google, la propia clave:
<script src="http://www.google.com/jsapi/?key=AQUI_LA_CLAVE_PROPIA" type="text/javascript"></script>
Imprimir artículo
No hay comentarios:
Publicar un comentario