Galeria de posts o imagenes para blogger



Galería de posts o imágenes para blogger utilizando el feed o rss.

Después de estar investigando un poco he encontrado varias cosas interesantes, y a partir del random post que encontré, el cual utiliza el JSON (increíblemente útil), lo modifique un poquito y de forma muy simple lo implemente en mi plantilla. Sólo parece imprescindible utilizar una imagen en cada post y he comprobado que las imágenes(posts) puestas desde flickr no se indexan bien con este código



Se utiliza javascript, css y el feed, supongo que quien quiera puede utilizar jquery y mejorarlo mucho , pero para mi es suficiente. Creo que el feed debe estar en feedburner, pero no estoy seguro.

La idea es crear un botón lateral fijo, que al clicarlo oscurezca la pantalla y enseñe todos los posts, o el número de entradas deseadas para que el usuario pueda dar un vistazo rápido a todo el blog.
Esto sería muy útil para gente que tenga un blog de dibujo, ilustración, fotografías, diseño o cualquier material gráfico, que se basa sobre todo en imágenes más que texto.

Primero de todo se crea un sidebar nuevo. En el codigo html de la plantilla se añade lo siguiente:

<div class='edgaleria1'>
<a class='edgaleria2' href='javascript:togglecomments("edgaleria")' title='galeria'><img alt='galeria' src='http://lh5.ggpht.com/_hwS3LTvSUHU/Sw2f4td1HCI/AAAAAAAAA54/tbdKwJU8x2k/edgaleria1.png'/></a></div> <br/>
<div class='commenthidden' id='edgaleria'>
<b:section class='sidebar33' id='sidebar33' preferred='yes'>
<b:widget id='HTML10' locked='false' title='' type='HTML'/>
</b:section>
</div>

Yo he puesto en el link una imagen png sin rollover ni nada, sencillo, recordad que el id del sidebar debe ser única.

Después dentro del sidebar nuevo debéis poner un widget de HTML/JAVASCRIPT y pegar el siguiente codigo:

<script>
function rp(json) {
document.write('<ul>');

for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

var dodo = "'Riverloom - "+ entry.title.$t +"'"; var item = "<li><a href=" + entry.link[k].href + " title=" + dodo + "><img alt="+ dodo +" src=" + entry.media$thumbnail.url +"></img></a></li>";
document.write(item);
}
document.write('</ul>');

}
</script>

<script>
var numposts = 200;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<div id="random1">
<div id="random2" style="text-align:right;">
<a class="abrircerrar2" href="javascript:togglecomments("edgaleria")" title="cerrar"> CERRAR </a> <br/>
<script src="/feeds/posts/default?orderby=published&start-index=1&max-results=250&alt=json-in-script&callback=rp"></script>
</div>
</div>

De este código sólo seria necesario cambiar un par de cosas que he remarcado en rojo, el nombre del blog y el numero de posts que se quiere mostrar, todo esto es algo básico que se puede mejorar o cambiar como cada uno prefiera, con paginación, animación, etc...

Ahora el css que he utilizado:

.edgaleria1 {position:fixed; right:0px; top:50%; margin-top:-100px; display:block;}
.edgaleria2 a {font-size:14px;padding:10px;}

.commenthidden {display:none;} .commentshown {display:inline; }

.edgaleria1 a:link, .edgaleria1 a:visited, .edgaleria1 a:hover {background:transparent;}

#random1 {position:absolute; left:0px; top:0px; display:block; width:100%; height:100%; background: url('http://lh4.ggpht.com/_hwS3LTvSUHU/Sw2f4ki4E9I/AAAAAAAAA58/OUrU2wc9nsQ/edgaleria2.png') repeat transparent ; z-index:800;}
#random2 { display:block; width:800px; margin: 0px 0 0 -400px; padding:0px; position:fixed; top:50px; left:50%; background:#000; border:15px solid #000; }
#random2 ul {display:inline; list-style:none;}
#random2 li {display:inline; list-style:none;}
#random2 a img {border: 1px solid #940f04; padding:1px;}
#random2 a:hover img {border: 1px solid #fff; padding:1px;}
#random2 img {margin:2px;}
#random2 a:link, #random2 a:visited, #random2 a:hover {background:transparent;}
#random2 a:hover {color:#ff9900;}

Y para terminar el Javascript que hace aparecer y desaparecer el div:

<script type='text/Javascript'>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
Espero que sea útil esta base para crear vuestras galerías, se del cierto que las palabras y explicaicones no son mi especialidad XD, si tenéis cualquier duda preguntadme.

Bien y si alguien mejora el código, me encantaría echarle un ojo, como siempre , entre todos vamos mejorando los blogs.



2 comentarios:

  1. Hola !!!

    Al fin encontre lo que buscaba y solo aki he hayado.

    Esta herramienta (galeria) es justo lo que estoy necesitando .He seguido cada paso para implementarlo en mi blog (por cierto es un blog de imagenes), pero no he logrado buenos resultados ya que al ingresar al blog queda el fondo oscuro de la galeria sin siquiera hacer clik en el boton.Tampoco aparece ninguna imagen. Ayuda por favor!! y Si no es molestia me encantaria colocar tambien posts al azar como en el pie de tu blog.

    Mi correo es (www.yopi@gmail.com) por favor le suplico se comunique conmigo.

    Muchisimas gracias.

    ResponderEliminar
  2. Wenas, me alegro que alguien lo utilice :) bueno primero de todo decir que me habia dejado unos estilos css importantissimos!! jaja
    .commenthidden {display:none;}
    .commentshown {display:inline; }
    con esto el script para que aparezca y desaparezca ya funciona.

    por otro lado te enviare los codigos para el random y los ultimos posts por el mail, si quieres el de paginación que actualmente tengo en el blog, esta en el siguiente posts (pudiendo bajarte el cogido en un txt), pero con la paginación he tenido que utilizar un servidor externo y un iframe, ya que no he podido poner el codigo como blogger quiere para que funcione aqui.

    cualquier otra duda no dudes en decirme que si se te ayudo.

    ResponderEliminar