Hacker of the Web
Tus ideas en código!...y mas

[+/-]
Otras formas de mostrar "Entradas recientes"

Existen varias formas de mostrar las entradas mas recientes de nuestro mismo blog o incluso de cualquier otro blog, de manera que puedes elegir entre las mas sencillas hasta las mas complejas. Como lo puede ser añadir un Gadget de feed directamente hasta un script que muestre parte de la entrada y hasta la fecha de la entrada.

Puedes usarlo para auto-promocionar el blog, esa técnica es muy utilizada para que los lectores puedan encontrar fácilmente lo que buscan o interesarse por las demás entradas de nuestro blog.

Ejemplo

Había tenido bastante tiempo estudiando los feeds del blog, de hecho yo mismo desarrollé la mayoría de los siguientes scripts. Solo el último fue desarrollado por Hans de Beautiful Beta

Los gadgets funcionan recogiendo las entradas por medio del feed del blog, al recoger las entradas simplemente les da un poco de formato, es decir los textos en negrita, el titulo y etc...


Simples

Este es el código del ejemplo, el mas pequeño y con mas funcionalidad que cualquier otro gadget en proporcion al código, lo que le quita capacidad de personalización pero al fin y al cabo cumple bien su función que es mostrar las entradas mas recientes.

Mostrar código
<div id='howentrrec'>
<script type='text/javascript'>
entradasrec = function (json) {
var m = 3;
var mltr = 100;
var f = '';
for (var i=0;i < m;i++) {
var n = json.feed.entry[i];
var l = n.link[4].href;
var r = '[...]'.link(l);
var e = n.summary.$t.substring(0, mltr);
var t = n.title.$t.link(l).bold();
f = f + t + '<br/>';
f = f + e + r +'<br/><br/>';
}
document.write(f);
}</script>
<script src='http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=entradasrec' type='text/javascript'></script>
</div>

En donde el texto color:
Rojo.- Máximo de entradas a mostrar
Verde.- Máximo de caracteres por entrada


Con metodos DOM

Es similar al anterior solo que este script tiene mas capacidad de personalización, es decir, puedes cambiar fácilmente los colores, la letra, el fondo. Utiliza métodos DOM para agregar el código al contenedor.

Mostrar código

<div id='howentrrec'><script type='text/javascript'>
entradasrecientesDOM = function(json) {
var m = 3;
var mltr = 100;
var contenedor = document.createElement('div');
contenedor.setAttribute('class','howentradasrecientes');
for (var i=0;i < m;i++) {
var contenedorPost = document.createElement('div');
contenedorPost.setAttribute('class','howpostreciente')
var post = json.feed.entry[i];
var link = post.link[4].href;
var readMore = document.createTextNode('[...]');
var entrada = post.summary.$t.substring(0, mltr);
entrada = document.createTextNode(entrada);
var titulo = document.createElement('a');
titulo.setAttribute('href',link);
titulo.setAttribute('style','font-weight:bold;');
var txtTitulo = post.title.$t;
txtTitulo = document.createTextNode(txtTitulo);
titulo.appendChild(txtTitulo);
var salto = document.createElement('br');
var salto_ = document.createElement('br');
contenedorPost.appendChild(titulo);
contenedorPost.appendChild(salto);
contenedorPost.appendChild(entrada);
contenedorPost.appendChild(readMore);
contenedorPost.appendChild(salto_);
contenedor.appendChild(contenedorPost);
}
document.getElementById('howentrrec').appendChild(contenedor);
}
</script>

<script src='http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=entradasrecientesDOM' type='text/javascript'></script></div>

En donde el texto color:
Rojo.- Máximo de entradas a mostrar
Verde.- Máximo de caracteres por entrada

Para modificar el estilo puedes utilizar los siguientes selectores
Para modificar el contenedor de las entradas
.howentradasrecientes {}
Estilo de cada entrada
.howpostreciente {}

Estilo del titulo de cada entrada
.howpostreciente a {}

Normales

Código mucho mas similar al simple, pero este tiene algunos arreglos que lo hacen mas fácil de personalizar incluso que al anterior. Utiliza el metodo innerHTML acelerando así la injección de código.

Mostrar código

<div id='howentrrec'><script type='text/javascript'>
entradasrecientes = function (json) {
var id = 'howentrrec';
var c = (document.getElementById(id)?document.getElementById(id):document.All[id]);
var m = 3;
var mltr = 100;
var f = "";
for (var i=0;i < m;i++) {
var n = json.feed.entry[i];
var l = n.link[4].href;
var r = '[...]'.link(l);
var e = n.summary.$t.substring(0, mltr);
var t = n.title.$t.link(l).bold();
f = f + '<div class="howpostreciente">' + t + '<br/>';
f = f + '<div class="howposttext">' + e + '</div>' + r +'<br/><br/></div>';
}
c.innerHTML = f;
}
</script>

<script src='http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=entradasrecientes' type='text/javascript'></script></div>

En donde el texto color:
Rojo.- Máximo de entradas a mostrar
Verde.- Máximo de caracteres por entrada

Para modificar el estilo puedes utilizar los siguientes selectores
Estilo del contenedor#howentrrec {}
Estilo de cada entrada
.howpostreciente {}
Estilo del titulo de cada entrada
.howpostreciente a{}
Estilo del texto de cada entrada
.howposttext {}


Mas coplejas

Este script realizado por Hans, es uno de los mas complejos en el área. Pues tiene la funcionalidad de mostrar parte de la entrada así como la fecha en que fue publicada.

Mostrar código

<script type="text/javascript">
function showrecentposts(json) {

for (var i = 0; i < numposts; i++) {
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;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = '(leer mas)';
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = 'Ene';
monthnames[2] = 'Feb';
monthnames[3] = 'Mar';
monthnames[4] = 'Abr';
monthnames[5] = 'May';
monthnames[6] = 'Jun';
monthnames[7] = 'Jul';
monthnames[8] = 'Ago';
monthnames[9] = 'Sep';
monthnames[10] = 'Oct';
monthnames[11] = 'Nov';
monthnames[12] = 'Dic';
if ('content' in entry) {
var postcontent = entry.content.$t;}
else
if ('summary' in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = '';
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, '');
if (!standardstyling) document.write('<div class='bbrecpost'>');
if (standardstyling) document.write('<br/>');
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)]);
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (showpostsummary == true) {
if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(postcontent);
if (standardstyling) document.write('</i>');}
else {
if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(' ');
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
if (standardstyling) document.write('</i>');}
}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
document.write('<span style='font-size:80%;'><a href='http://beautifulbeta.blogspot.com'></a></span>');
if (!standardstyling) document.write('</div>');

}
</script>

<script type="text/javascript">
//Numero de entradas que mostrará
var numposts = 10;
//Numero de caracteres por entrada
var numchars = 50;
//Mostrar fecha(true o false)
var showpostdate = false;
//Mostrar el (leer mas)...(true o false)
var showpostsummary = true;
//Mostrar entradas con el estilo predeterminado
var standardstyling = false;
</script>

<script type="text/javascript" src="http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts"></script>



Para añadir las entradas recientes que elegiste, simplemente debes agregar los códigos en un gadget HTML/javascript.

Personalmente yo utilizo este tipo de gadgets, pues cuando los usuarios están navegando en una entrada, se muestran las cinco(o las que quieras) entradas mas recientes a lado de la entrada. Así cada que cambien de entrada verán mas entradas y navegarán mas por el blog.

|✔| Puedes aprender CSS, en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.

[+/-]
Añadir miniposts en el Blog

Seguro que ya haz visto alguna vez minimo, el tipico mensaje de 'Leer Mas', que muestra solo la primer parte del post. Pero ¿cómo hacerle para mostrar un resumen de verdad, es decir, algún tipo de doble entrada y que el segundo minipost se muestre solo la página de la entrada y el primer minipost en las demás?


Solo es cuestión de añadir en la entrada dos etiquetas clave, de las cuales, la primera encerrará al primer minipost(resumen), y la segunda, encerrará al segundo minipost(entrada real).

Y es que, en algunas ocasiones publicamos entradas grandísimas que nos ahorraría un poco de espacio en las páginas de búsqueda, principal o en las de etiquetas, si agregáramos un resumen mas atrayente que solo la primer parte de la entrada.

Por que, supongamos que publiqué una entrada gigante de las Chivas de Guadalajara, digamos que es un resumen del encuentro, y esta grandísimo. Ahora lo publico y tengo que ocultar una parte, pero si en vez de esa primer parte muestro otro resumen mas atrayente, es decir algo como "Las Chivas rayadas de Guadalajara acaban de golear al América, entra aquí para ver el resumen del partidaso!!" y lógico que en la página de la entrada no vas a mostrar eso, por que se supone que ya vas a haber entrado. No ahí se mostrará ya la entrada del resumen del partido.

Se supone que para esas situaciones fue diseñado este Hack, disfrutenlo que fue un poco molesto de desarrollar. Funcionará de la siguientes maneras:

Para publicar la entrada con los dos minipost, es decir, que se muestren entradas diferentes en las páginas del blog, que en la página de la entrada. En la entrada debes agregar lo siguiente:
<span class='resumen'>Aqui solo estaría el resumen, que este solo se mostrara en las páginas que no sean la página de la entrada</span>
<span class='fullpost'>Esta sería la entrada que se muestre en la página de la entrada</span>
Lo cual dará como resultado en la página de la entrada:

entrada con resumen y fullpost

Y en las demás páginas se mostrará otro contenido que atraiga a tus lectores:

entrada con resumen y fullpost en principal



Además si ya habías aplicado el truco del 'Leer mas', esto no afectará a las entradas con el truco, incluso puedes utilizarlo en las entradas que quieras de la siguiente manera:
Aquí estaría el resumen normal, el que todo mundo conoce, el que se muestra en la página principal del blog y también en la página de la entrada <span class='fullpost'> Aquí estaría la entrada completa</span> 
En la página de la entrada se mostrará todo el contenido:

entrada con fullpost

Y en las demás páginas solo la primer parte de la entrada:

entrada con fullpost en principal



Y si decidieras publicas una entrada sin ningun hack, la entrada se publicará tal cual es, sin el enlace de 'Leer mas':
Aqui solo estará la entrada normal
Y la entrada se mostrará de la misma manera en la página del post y en las demás:

Entrada limpia



[1] Para agregar el Hack, solo debes entrar en Diseño>Edicion HTML>expandir las plantillas de artilugios y agregar el siguiente código antes de la etiqueta </head>:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>.resumen{display:none;}</style>
<b:else/>
<style type='text/css'>.fullpost{display:none;}</style>
<script type='text/javascript'>
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].className == 'resumen') {
found = 1;
}
if (spans[i].className == 'fullpost') {
if (found == 1) {
spans[i].style.display = 'none';
}
else {
spans[i].style.display = '';
found = 1;
}
}
if (spans[i].className == 'leermas') {
if (found == 0) {
spans[i].style.display = 'none';
}
}
}
}
</script>
</b:if>


[2] Y sustituir <p><data:post.body/></p> o si no <data:post.body/>, por lo siguiente:
<div expr:id='&quot;post-&quot; + data:post.id'>
<data:post.body/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span class='leermas' id='leermas'><a expr:href='data:post.url'>...Leer entrada</a></span>
<script type='text/javascript'>
checkFull(&quot;post-<data:post.id/>&quot;);
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

/!\ Es importante que si ya utilizas el truco del 'Leer mas' o algo por el estilo, lo quites del blog antes de agregar este otro!!.

[+/-]
Nuevo editor de entradas en Blogger

Hace unos momentos estaba revisando blogger in draft y me encontré con el nuevo editor de entradas en Blogger, es un editor que desde hace un rato se estaba cocinando en Blogger, pero parece que va bien.

Aqui les dejo algunas capturas de las nuevas funcionalidades:

Nuevo editor en Blogger


Entre las nuevas funcionalidades esta el triangulo que esta en la esquina inferior derecha, con el que puedes modificar la altura del area de texto.

Fecha y Hora de la entrada, en este estan dos opciones, la primera es para publicar la entrada con la fecha actual y la otra es para publicarla con otra fecha.

Configuracion para editar HTML, con esta herramienta es posible incluir texto con saltos de linea sin necesidad de codificarlo. Pero también a la hora de insertar tablas es mejor ignorar los saltos de linea, ya que podría tomar mucha altura.

Configuracion de composición, se utiliza para mostrar el HTML escrito, es decir, sin compilarlo o para compilarlo.

También cambio la forma de visualizar la vista previa de la entrada, con un elemento flotante en la misma página:

Nuevo editor en Blogger

[+/-]
Mensaje de suscripción en página de cada etiqueta II

Hace un poco publiqué una manera de agregar un mensaje de suscripción en la página de cada etiqueta, junto con las entradas de la misma etiqueta, que se conseguía con un gadget, que yo mismo desarrollé. Pero a ese gadget se le pueden aplicar varias mejoras, como agregarle un fondo al mensaje, distinto con la etiqueta especificada, para conseguir el siguiente efecto:

Etiqueta 'Azul'
Etiqueta 'Rojo'

El código Blogger, es el siguiente:
<b:widget id='Label101' locked='false' title='Feed de etiquetas' type='Label'>
<b:includable id='main'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<b:if cond='data:label.name == "rojo"'>
<style type='text/css'>
.feedEtiqueta {background:red;}
</style>
</b:if>
<b:if cond='data:label.name == "azul"'>
<style type='text/css'>
.feedEtiqueta {background:blue;}
</style>
</b:if>
<span class='feedEtiqueta'>Tal vez te interese suscribirte a "<a expr:alt='"Suscribirse a " + data:label.name' expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name' expr:title='"Suscribirse a " + data:label.name'><data:label.name/> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMCv_2snT1V07m0zq4K-umBE19HATCsg1GqFlHOOTE0zuW5pGltKVej8Fnp1u27NuMs_fV6MZwQ_fiyFUwdAFZitrLVTQC1T19eE-KkHTlxT9gMwtB8Bk_akTyy4RQ36TU4_bx7ty7P8Y3/' style='border:0px'/></a>", para recibir entradas de "<data:label.name/>" actualizadas<br/> <b>URL:</b> <data:blog.homepageUrl/>feeds/posts/default/-/<data:label.name/></span>
</b:if>
</b:loop>
</b:includable>
</b:widget>

El texto en color:

rojo.- es el nombre de la etiqueta en la que quieres aplicar el efecto.
verde.- es donde debes colocar el estilo CSS, que se aplicará.

Lo que realiza este otro gadget, es que al entrar en la página de la etiqueta, revisa si es la que esta definida(en el ejemplo anterior: color rojo) y si es esa aplica el etilo definido(en el ejemplo anterior: color verde) en el mensaje, se puede cambiar el color de fondo, cambiar el color de letra, poner una imagen de fondo o lo que necesites.
[1] Para agregar el gadget necesitas entrar en Edicion HTML en la pestaña diseño de tu blog.
[2] Y agregar el código despues de cualquier etiqueta </b:widget> que veas. Luego podrás moverlo en Diseño
[3] Luego para modificar el estilo del gadget(lo que no cambiara) en CSS será algo asi como esto:
.feedEtiqueta {
border:1px dashed black;
display:block;
margin:0 auto 0 auto;
padding:5px;
width:500px;
}

Suerte!!

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

|✔| También puedes optar por aprender CSS y en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.

[+/-]
Administracion personal del Blog

Para los que ocultamos la navbar de Blogger, o al menos a mi, se hace muy tedioso el tener que ingresar a Blogger y después darle en edición de entradas, en especial si no esta activado el icono editor rápido de entradas. Pero gracias a una clase de CSS, predefinida por el mismo Blogger, esta tarea se simplifica y nos ahorra un poco de tiempo.

Lo primero a hacer, es obtener el id de el blog. Lo cual se consigue entrando a crear una entrada, en donde la barra de direcciones se contendrá algo parecido a esto:

Obtener el Id de nuestro blog

Una vez que conoces el ID del blog, deberás sustituir el texto en rojo del siguiente código por el ID de tu blog:
<div id='Admin-Blog'
<span class='item-control blog-admin'>
<a href='http://draft.blogger.com/home'>Blogger Draft</a> |
<a href='http://draft.blogger.com/post-create.g?blogID=XXXXXXXXXXXXXXXXXX'>Crear entrada</a> |
<a href='http://draft.blogger.com/posts.g?blogID=XXXXXXXXXXXXXXXXXX'>Edición de entradas</a> |
<a href='http://draft.blogger.com/blog-options-basic.g?blogID=XXXXXXXXXXXXXXXXXX'>Configuración</a> |
<a href='http://draft.blogger.com/rearrange?blogID=XXXXXXXXXXXXXXXXXX'>Diseño</a>
<br/>
<a href='http://www.blogger.com/home'>Blogger</a> |
<a href='http://www.blogger.com/post-create.g?blogID=XXXXXXXXXXXXXXXXXX'>Crear entrada</a> |
<a href='http://www.blogger.com/posts.g?blogID=XXXXXXXXXXXXXXXXXX'>Edicion Entradas</a> |
<a href='http://www.blogger.com/blog-options-basic.g?blogID=XXXXXXXXXXXXXXXXXX'>Configuración</a> |
<a href='http://www.blogger.com/rearrange?blogID=XXXXXXXXXXXXXXXXXX'>Diseño</a>
</span>
</div>
Este código se agrega en un gadget HTML, pero no te preocupes nadie lo verá, solamente tu y eso solamente cuando estés logueado en Blogger.

De hecho lo que tenga las clases 'item-control blog-admin', solo podrá ser visto por los administradores del blog. Algún código en prueba o lo que se te ocurra.

[+/-]
Mensaje de suscripción en pagina de cada etiqueta

Al hacer clic en alguna etiqueta de cualquier blog, el enlace posiblemente nos puede enviar a la página donde solamente estén entradas con esa etiqueta, o probablemente nos puede dirigir a la página de suscripción por feed de la etiqueta mencionada.

Incluso puede dirigirnos hacia una página de suscripción donde muestre también las entradas mas recientes de la etiqueta. En Blogger se puede lograr lo antes dicho, solamente con un gadget genérico, que he desarrollado:
<b:widget id='Label101' locked='false' title='Feed de etiquetas' type='Label'>
<b:includable id='main'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<span class='feedEtiqueta'>Tal vez te interese suscribirte a "<a expr:alt='"Suscribirse a " + data:label.name' expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name' expr:title='"Suscribirse a " + data:label.name'><data:label.name/> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMCv_2snT1V07m0zq4K-umBE19HATCsg1GqFlHOOTE0zuW5pGltKVej8Fnp1u27NuMs_fV6MZwQ_fiyFUwdAFZitrLVTQC1T19eE-KkHTlxT9gMwtB8Bk_akTyy4RQ36TU4_bx7ty7P8Y3/' style='border:0px'/></a>", para recibir entradas de "<data:label.name/>" actualizadas<br/> <b>URL:</b> <data:blog.homepageUrl/>feeds/posts/default/-/<data:label.name/></span>
</b:if>
</b:loop>
</b:includable>
</b:widget>

[1] Para agregar el gadget tendrás que entrar en Edicion HTML en la pestaña diseño de tu blog.
[2] Debes agregar el gadget justo despues de cualquier </b:widget> que veas. Luego podrás moverlo en Diseño, lo que obtendrás será
algo como esto:

Feed de etiquetas en sus páginas


[3] Luego para modificar el estilo del gadget en CSS será algo asi como esto:
.feedEtiqueta {
background: #CADAE4;
border:1px dashed black;
display:block;
margin:0 auto 0 auto;
padding:5px;
width:500px;
}

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

|✔| También puedes optar por aprender CSS y en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.

[+/-]
Las intimidades del gigante de Internet

Despues de que Google, publicara su logo del cumpleaños de Samuel Morse:

Logo de google

Estuve navegando por la web y me encontré con algunas páginas de google, como:

Los logotipos oficiales de Google
http://www.google.com/stickers.html

Todos los logotipos de dias festivos de Google
http://www.google.com/holidaylogos.html

Y la galería de la central de Google en Picasa Web
http://picasaweb.google.com/googjobsmain/

Y otra página interesante, ya que estamos hablando de Samuel Morse, un traductor a morse:
http://elezeta.net/morse/

Entradas más recientes Entradas antiguas Página Principal
Arriba