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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5jpYDk8zPU_kTcXS2RlcpTXnSgwLePERcaOWe_2DGIpAXKBQCKKwv6qG_gNSTk9WKFKMi1fLRyYoaJGOKZ4ciqgM_3WTBmI_nxaFhU3Bcgb8eqOvmuFh3mK3gaMSKo01yV7skLO85l0Q/'/></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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB5eG0tAKoXNB5R-SH02fIjd6s6v8l_woXttrlpCKlCwIMpbzbwJ4nn35cDr7EoceGbXHuzD8EHVE4bIwNvlBOx4AVs5HpSoBTYBXYxKOh8xSdcm5xbW5iI9vzZInpHqOxMARBju8nKs8/') 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.