Visitas en tiempo real con un botón

En whos.amung.us te proporcionan el código para colocar un botón en tu blog que muestra las visitas en tiempo real, sin necesidad de registrarte.


El código es este:

<a href="http://whos.amung.us/show/45gsm7xo"><img src="http://whos.amung.us/cwidget/45gsm7xo/00adef000000.png" alt="hit counter" width="81" height="29" border="0" /></a>


Y este es el resultado:



Si queréis el botón de otro color, en la página de whos.amung también podéis escoger el color de fondo del botón y de los números del contador.

Hacer que una imagen funcione como link

Me lo han preguntado varias veces y es muy sencillo de conseguir.
En primer lugar hemos de obtener la url de la imagen que funcionará como link, para ello la subimos a un alojamiento de imágenes o al propio Blogger.
Una vez obtenida la url de nuestra imagen, la colocamos en este sencillo código, donde dice URL_DE_IMAGEN y en el mismo código, colocamos la página que queremos linkar, es decir, la dirección web que se abrirá al pinchar sobre la imagen, en URL_DE_WEB:

<a href="URL_DE_WEB"><img src="URL_DE_IMAGEN"></a>

Ejemplo

<a href="http://eternamentecabreada.blogspot.com">
<img src="http://img373.imageshack.us/img373/4449/89653287xy8.png"></a>





Para que el enlace al pinchar en la imagen se abra en página nueva, añadiremos el target="_blank" al final del enlace:

<a href="URL_DE_WEB" target="_blank"><img src="URL_DE_IMAGEN"></a>

Ultimos comentarios personalizados (script)

Anteriormente había publicado una entrada para, mediante un script, mostrar en el blog las últimas entradas de una forma un poco más personalizada.
Este es un script que hace casi la misma función, pero con los comentarios. Tendremos la posibilidad de ver en la sidebar los últimos comentarios de nuestro blog, con la fecha de publicación, el nombre del autor del comentario, el título de la entrada donde a dejado el comentario, y parte del comentario seguido de "leer más".

Copiamos y pegamos este código en un nuevo elemento HTML-Javascript en la parte "editar" de nuestra plantilla:

<script style="text/javascript" src="http://lejaniaimposible.googlepages.com/comentarios.recientes.js"></script>
<script style="text/javascript">

var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 50;
var standardstyling = true;
</script>
<script src="URL_DEL_BLOG/feeds/comments/default?alt=json-in-script&
callback=showrecentcomments"></script>

El script colocado tal cual mostrará los comentarios así:



Para adaptarlo a nuestras necesidades, hemos de modificar algunos parámetros:

numcomments: Aquí podemos modificar el número de comentarios a mostrar.

showcommentdate: Aquí se muestra la fecha del comentario. Si lo queremos con fecha dejaremos true, si no vamos a mostrarla, pondremos false.

showposttitle: Aquí se mostrará el titulo de la entrada. Al igual que en la fecha pondremos true o false, según queramos mostrarlo o no.

numchars: Aquí podemos escoger el número de palabras que mostraremos de cada comentario.

standardstyling: Aquí se escoge el estilo del texto y la presentación. Podéis probar con true o false, para ver la diferencia, aunque según mi opinión queda mejor con true.

Por último, no se os olvide cambiar URL_DEL_BLOG por la dirección de vuestro blog.

Nota
Aunque el script ha sido traducido al español, no interpreta las eñes como tal, sino que las muestra como enes: diseño= diseno.

Actualización:
Dado que Google Pages ha anunciado hace un tiempo que llegará a cerrar, lo mejor será que cada uno se descargue el script a su PC y lo suba a un alojamiento adecuado.


Una vez obtenida la nueva url, la colocamos en el código en sustitución de esta otra:

http://lejaniaimposible.googlepages.com/comentarios.recientes.js

Ultimas entradas en el blog (script)

Acaban de pasarme por email un script para mostrar en la sidebar los últimos post del blog.
Pensé que sería más o menos como otros códigos que había probado para esta función, pero me llevé una grata sorpresa al aplicarlo.

Antes de comenzar nos descargamos el script a nuestra PC, lo subimos a un alojamiento de archivos y copiamos la url que nos proporcionan para usarla en el código colocandola donde dice "URL_DEL_SCRIPT".

[1] Si aplicamos el script tal como está, mostrará en primer lugar el título de la entrada, debajo unas líneas con el comienzo del post y seguidamente unos puntos suspensivos con (leer más) para ver la entrada completa:



El código puede adaptarse a las necesidades de cada uno:

var numposts aquí escogemos cuantas entradas vamos a mostrar.
var numchars aquí escogemos la cantidad de caracteres o palabras a mostrar.
var showpostdate si ponemos false la fecha del post no se verá, para mostrarla pondremos true.
var showpostsummary con true mostramos el ...(leer mas) y con false no se verá.
var standardstyling según pongamos true o false, cambiará el estilo del texto. Os recomiendo dejarlo en true, queda mucho más bonito.

[2] Este es el script que pegaremos en un nuevo elemento HTML-Javascript y listo.

<script src="URL_DEL_SCRIPT">
</script>
<script language="javascript">
var numposts = 10;
var numchars = 120;
var showpostdate = false;
var showpostsummary = true;
var standardstyling = true;
</script>
<script src="http://NOMBRE_DEL_BLOG.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts"></script>

No hay que olvidarse de cambiar "NOMBRE_DEL_BLOG" por el del blog donde vamos a aplicar el script.

Perfil en Blogger

Si hemos elegido colocar nuestro perfil en el blog para compartirlo con nuestros visitantes, podemos optar por hacerle unos sencillos cambios que nos ayuden a personalizarlo.


Fácilmente podríamos, por ejemplo, modificar nuestra imagen del perfil: el tamaño, borde, distancia al marco, posición...
Buscamos este código en nuestra plantilla-HTML:


.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor;
}


Si añadimos justo debajo de .profile-img { estas líneas de código, podremos controlar el tamaño de nuestra imagen del perfil, modificando el valor numérico en px:

width:50px;
height:40px;


Para modificar la distancia de la imagen al borde, modificaremos el valor en
padding: 4px;


Podemos eliminar el marco o borde de la imagen poniendo el valor 0 en border: 1px solid $bordercolor; si,por el contario, queremos el borde más grueso, aumentaremos ese valor.
Si cambiamos solid por dashed el borde se verá "punteado".

Para centrar la imagen en la sidebar, cambiamos el float: left; por float: center;

Tampoco es difícil eliminar el "Ver todo mi perfil" que aparece al lado de la foto.
Vamos a plantilla-html y después de expandir artilugios, buscamos esto en la plantilla:

<!-- normal blog profile -->

Unas líneas mas abajo veremos esta línea de código, la eliminamos y listo:

<a class='profile-link'expr:href='data:userUrl'><data:viewProfileMsg/></a>

Anima a tus visitas a que comenten

Este "truquillo" sirve para añadir un texto al pie de los post de tu plantilla, justo seguido de "comentarios", normalmente se usaría para animar a los visitantes del blog a comentar, puedes poner algo como "deja tu huella" "atrévete a opinar" "y tu que opinas"...
en fin, lo que te apetezca.
Vamos a plantilla-HTML-expandir artilugios,
luego buscamos esta parte del código:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link'
expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1
<data:top.commentLabel/><b:else/><data:post.numComments/>
<data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Y lo sustituimos por este otro:

<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 1'>1
Comment<!--<data:top.commentLabel/>-->
<b:else/><data:post.numComments/>
<data:top.commentLabelPlural/>
</b:if>
<a class='comment-link' expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>Deja tu huella</a>
</b:if>

Si todo ha salido bien se verá así:


Donde dice "Deja tu huella" ponemos el texto que consideremos oportuno sin límite de caracteres, ya que como sabéis, el texto de comentarios puede cambiarse en la plantilla en forma de edición pinchando sobre el "editar" del cuadrado de entradas, pero Blogger no admite de esa forma añadir más de 50 caracteres.

Centrar imagen subida con Blogger, en la cabecera

Cuando subimos una imagen a la cabecera del blog con el método que nos proporciona Blogger hemos de procurar que la imagen tenga el mismo tamaño, más o menos, que el tamaño de nuestra cabecera del blog.

Si el tamaño de la imagen es mayor, esta se "saldrá" de la cabecera, así que no tendremos más solución que, ampliar la cabecera o reducir la imagen.

Puede darse el caso de que nuestra imagen sea más pequeña porque así lo hemos decidido, entonces nos daremos cuenta una vez subida que (en el caso de algunas plantillas, por ejemplo la Rounders o la Denim) el título y la descripción del blog aparece hacia la izquierda y, por tanto, nuestra imagen también tomará esa posición.

Para evitar esto, si es que lo que queremos es centrarla, hemos de añadir un código en el CSS de nuestra plantilla.
Vamos a la edición de la plantilla - HTML Y colocamos estas líneas de código en la zona del CSS que ordena nuestra cabecera, justo después de /* Blog Header------ */:

.header .widget {
margin-top: 4px;
width: 520px;
padding: 0 100px;
}

El margin-top: 4px; es la distancia del borde de nuestra imagen abajo y arriba, a la cabecera.

En width: 520px; pondremos el tamaño en horizontal que tiene nuestra imagen en pixeles.

En padding: 0 100px; es donde controlamos la distancia de la imagen a los lados, si lo dejamos tal cual yo lo he puesto, por ejemplo, una imagen de 520px se verá centrada en la plantilla Rounders.
Según sea el tamaño de nuestra imagen y la plantilla que estamos usando, tendremos que "jugar" con el padding. Los cambios se ven en "vista previa" lo que nos evitará problemas antes de guardar los cambios definitivos.

Espero que te sirva Mike!