Invitados

Incluir un widget con actualizaciones de tu perfil de Google+

Publicado por Claudia en Mayo 28, 2013

Artículo de Pedro Mendez. Desarrollo y diseño de sitios web Blog.

Hasta el momento, no hay ningún “widget” o RSS funcionando que podemos insertar en Blogger para mostrar una lista de nuestros últimos puestos en Google Plus.

Por suerte, Google+ RSS ofrece un servicio gratuito que nos permite generar un feed RSS de los perfiles personales y las páginas que pueden agregar a un simple dispositivo de feed en Blogger.

Google RSS Feed

Puedes ver la foto para ver esta técnica en acción situada en la barra lateral y sigue leyendo para averiguar cómo agregar un gadget con actualizaciones de Google+ en tu propio sitio de Blogger.

Widget Google Plus

Para empezar, dirígete a Google+ to RSS y crea un feed para tu perfil de Google+. Tendrás que iniciar sesión con tu cuenta de Google+ para permitir acceder a la aplicación a tu perfil.

Tan pronto como hemos hecho esto, seremos capaz de “gestionar las entradas”. Busca la dirección URL de tu perfil de Google+ feed RSS:

Widget Google Plus

Entramos en el icono derecho del RSS al lado del perfil y elige copiar la ubicación del enlace. Esta es la URL feed RSS de las actualizaciones del perfil personal.

Para publicar estas actualizaciones para una página de Google+, entramos en el verde botón “Nuevo” y pegamos en el ID de perfil para tu página de Google+ y seguimos el procedimiento de arriba para obtener la URL.

Importante:  Sólo se pueden crear dos canales para cada cuenta de Google+ Esto evita el uso indebido del servicio gratuito proporcionado.

Una vez que tenemos la URL de la página de perfil, entramos en el panel de Blogger y optamos por añadir un nuevo gadget de Feed.

Ahí podemos pegar la URL de tu feed Google+ y cambiar el título / opciones para modificar el gadget a tus necesidades. Ahora seremos capaz de obtener una vista previa del gadget, y podemos adaptarlo para que coincida con el aspecto general del sitio.

Por último, guarda el gadget y disfruta con las actualizaciones de Google+ en tu blog.

¿Qué te parece?

Es cierto que este es un gadget bastante básico, y en particular depende de un servicio de terceros. Aún así, esta técnica resulta útil para aquellos que quieran añadir un canal de Google+ en Blogger hasta que los widget oficiales estén disponibles. Si quieres también como posicionarte en esta red social te recomiendo leer este artículo.

Por favor, siéntase libre de dejar tus opiniones y comentarios sobre este tutorial a continuación.

Tags: , ,
Blogger

Widget de comentarios recientes con avatar para Blogger

Publicado por Claudia en Septiembre 24, 2012

Osman había preguntado cómo agregar un gadget con los últimos comentarios pero mostrando avatar de los autores. Hay varios tutoriales al respecto, pero a veces es tedioso e innecesario seguirlos cuando tienes un generador que en menos de treinta segundos añadirá el gadget que necesitas. En Way2Blogging encontré un genial generador para añadir un widget de comentarios recientes a tu blog de Blogger. Aunque está en inglés, es realmente simple de usar, y no necesitarás tocar el código de tu plantilla en absoluto.

Comentarios recientes con avatar para Blogger

Sólo hay dos campos que necesitamos cambiar: Widget title (el título que queramos que lleve nuestro widget) y Blog URL (el enlace a nuestro blog, no el del feed). Los demás pueden quedar tal cual. Por defecto, el wiget mostrará 5 comentarios, con avatares de 60 píxeles de diámetro y con bordes redondeados. Aquellos comentarios de usuarios sin avatar mostrarán la imagen de incógnito de Gravatar, la cual podemos cambiar simplemente modificando el enlace que allí aparece (necesitamos alojarla previamente).

Una vez que hayamos hecho los cambios correspondientes, presionamos el botón “Generate“. A continuación, veremos un botón azul que dice “Add to Blogger“. Hacemos click sobre él, luego en “Añadir artilugio” en la nueva pestaña que se abrirá,  y veremos que el widget se ha agregado a la barra lateral de nuestro blog.

El resultado será el siguiente:

Comentarios recientes Blogger

Podemos hacer cambios en el CSS que se ha añadido en el widget, aunque quizás no sea necesario.

Enlace: Generador de comentarios recientes con avatar

Tags:
Blogger

Widget de Posts recientes con imágenes para Blogger

Publicado por Claudia en Febrero 7, 2012

Hay varias versiones de widgets para mostrar los últimos posts el Blogger. Si buscamos “recent posts” en los widgets de Blogger, podremos encontrar dos opciones distintas en inglés; no obstante, hay una versión que tomé de Webaholic y modifiqué muy levemente, y que considero útil de compartir por tres razones: (1) está en español; (2) no tienes que preocuparte del alojamiento del script; y (3) es fácilmente modificable.

Añade el widget

Este widget de posts recientes se añade simplemente copiando el siguiente códígo en un gadget en blanco (Diseño>Añadir un Gadget>HTML/Javascript):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<style type='text/css'>
img.recent_thumb {padding:2px;width:70px;height:70px;border:0;
float:left;margin:5px 10px 10px 0; border: 1px solid #ccc;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 100px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:75px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
.recent_posts_with_thumbs h4 {
text-transform: uppercase;
font-size: 14px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); 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=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)
 
{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='http://www.webaholic.co.in/other/no-image.jpg';
}
 
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";document.write('<li class="clearfix">');
 
 
if(showpostthumbnails==true) 
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><h4><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b></h4>');
 
    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 (showpostsummary == true) {
 
      if (postcontent.length < numchars) {
          document.write('<i>');
         document.write(postcontent);
          document.write('</i>');}
      else {
          document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...');
          document.write('</i>');}
}
 
var towrite='';var flag=0;
document.write('<br><strong>');
 
if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+' - '+cdday+' - '+cdyear;flag=1;}
 
if(showcommentnum==true) 
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='0 Comments') commenttext='0 comentarios';
if(commenttext=='1 Comment') commenttext='1 comentario';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
 
if(displaymore==true) 
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más</a>';
flag=1;
;
}
 
document.write(towrite);
 
document.write('</strong></li>');
if(displayseparator==true) 
if (i!=(numposts-1))
document.write('');
}document.write('</ul>');
 
}
//]]>
</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 80;</script>
<script src='http://TUBLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Para que funcione, en la última línea debes reemplazar “TUBLOG” por el nombre de tu blog.

Vista previa del widget

Algunas opciones de configuración…

En general, puede ser que no necesites hacer ningún cambio extra al widget ya añadido; sin embargo puedes hacer algunas pequeñas modificaciones para hacer que éste se adapte a tus preferencias.

En los estilos, por ejemplo, puedes ver que el tamaño por defecto de los thumbnails o miniaturas de imagen, es de 70×70 píxeles (segunda línea), y que éstos tienen un borde. También, en los estilos puedes cambiar los estilos de letras.

Al final del código veremos una serie de variables, donde:

  • numposts: indica el número de posts que se muestran (por defecto, “5”).
  • numchars: indica el número de caracteres de los resúmenes (por defecto, “80”).

Las siguientes variables pueden ser cambiadas de “true” a “false” (o viceversa) para habilitar o deshabilitar alguna de las funciones:

  • showpostthumbnails: muestra miniaturas de imagen.
  • displaymore: muestra el enlace “Más”.
  • displayseparator: muestra una línea de separación entre cada ítem.
  • showpostdate: muestra la fecha de cada post.
  • showpostsummary: muestra un resumen de cada post.
Tags:
Blogger, Tutoriales

Blogger: Cómo dividir el widget de etiquetas en dos columnas

Publicado por Claudia en Noviembre 10, 2009

Etiquetas-BloggerCuando tienes muchas etiquetas y una barra lateral lo suficientemente ancha, siempre tienes la opción de dividir el widget de etiquetas en dos o más, por una cosa de orden y estética.

Hace un tiempo, Cebong mostraba una forma de crear un widget de etiquetas multicolumnas añadiendo una nueva sección en el footer o la sidebar.

En realidad, es mucho más simple de lo que parece: no es otra cosa que determinar anchos (%) para las listas de esa sección. En otras palabras, puedes hacer lo mismo si ya añadiste un widget de etiquetas a tu sidebar, pero con un código CSS simplificado a ser añadido antes de ]]></b:skin>:

#Label1 ul li{
float: left;
width: 45%;
}

A considerar:

  • El ancho (width) va a depender de cuántas columnas quiera incluir, y no siempre es exacto, porque el widget de etiquetas va a heredar el padding de las listas de la sidebar (.sidebar ul li o similar). En este caso, 45% está bien para dos columnas; para 3 columnas, quizá ande bien con 30 ó 33%.
  • El selector #Label1, puede variar. Por defecto, el widget de etiquetas (si tienes sólo uno), debiera ser Label1; pero, si tienes dos, tendrías un widget de ID Label1, y otro Label2.
  • Puedes dividir cualquier widget de lista (ejemplo, lista de enlaces) de la misma forma, averiguando su ID.

sidebar-blogger

Tags: , ,
Blogger

Crea un panel de acceso en tu blog de Blogger

Publicado por Claudia en Junio 25, 2009

BoyProdx (vía Viet Blog Guide) nos enseña a añadir un sencillo widget de acceso/login para los blogs de Blogger, similar en apariencia a los que podemos poner en WordPress.

El código, para el widget en español, sería:

<div id="loginform"><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()">
<input value="http://draft.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fdraft.blogger.com%2F" name="continue" type="hidden"/>
<br/>
<div>
<label for="Email"> Cuenta: 
<br/><input id="Email" tabindex="1" name="Email" size="20" type="text"/>
</label>
</div>
<br/>
<div>
<label for="Passwd"> Contraseña: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Olvidé mi contraseña">?</a>) 
<br/>
</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/>
</div>
<br/><br/>
<input id="signin-btn-ns" tabindex="0" value="Enviar" class="ubtn ubtn-block" name="submit" type="submit"/>
</form></div>

Debes pegar digo código en en un nuevo gadget de HTML/Javascript de la sección Diseño/Elementos de tu blog. Si quieres darle un poco más de “estilo”, puedes añadir un poco de CSS básico a tu plantilla:

#Email, #Passwd{
border: 1px solid #ff0084;
}
 
#signin-btn-ns { 
color: #FFF;
background: #FF55AA;
border: 1px solid #ff0084;
}

¿Simpático? A mí me parece una monería, pero puede ser bastante útil además de cómodo. El formulario trabaja en base al panel de acceso de Blogger, y como es posible darse cuenta, redirecciona al panel de Blogger in Draft. Ahora, si lo que quieres es que te lleve al panel tradicional de Blogger, deberás cambiar la url del input escondido que hace la redirección (mira el código del widget), quitando los dos “draft.” que aparecen allí para que en vez de ir a draft.blogger.com vayas a blogger.com.
Si no pudiste acceder a tu cuenta, ingresa tu e-mail de Gmail en “Cuenta” y tu contraseña en los campos correspondientes. Es un formulario que puedes usar tranquilamente, porque no almacena tus datos de acceso.

Tags: ,