Bloggerinck

domingo, 18 de julio de 2010

Blogger ahora hay estadísticas en tiempo real

Blogger in Draft presenta una característica: Estadísticas web desde el panel de Blogger. Este sistema de estadísticas es independiente de Google Analytics y tiene como principal característica brincar datos casi en tiempo real.

¿Cómo funciona?

Por ahora, solo esta disponible entrando desde Blogger in Draft ( draft.blogger.com ), una vez ahí existe una nueva pestaña en cada blog llamada, precisamente, estadísticas, que a su vez, se divide en 4 secciones:

1. Visión general

2. Posts o entradas.

Que muestra las estadísticas de los posts, pero también de las páginas estáticas.

3. Fuentes de tráfico.

Con las búsquedas que traen más tráfico y las páginas que nos envían más visitantes.

4. Audiencia.

Con información general sobre los visitantes: País de procedencia, navegador y sistema operativo usado.

Por ahora no funciona en blogs privados.

Conclusión

El sistema de estadísticas de Blogger es muy básico y no reemplaza a soluciones como Google Analytics, sin embargo, como una herramienta de acceso rápido para tener una idea de lo que pasa en nuestro blog en eso momento ¡es estupenda!

Además tiene la ventaja de que no requiere la instalación de script alguno y es compatible con otros sistemas de estadísticas, como el ya mencionado Analytics.

Fechas más amigables en Blogger

Colocar fechas relativas o el tiempo transcurrido entre dos fechas (ejemplo: Publicado hace 2 días), es más amigable de interpretar que una fecha como tal. Este tipo de fechas son muy comunes en servicios como Twitter o Facebook

En Blogger es posible crear también este tipo de fechas con un poco de javascript y agregando un par de cosas en la plantilla, de manera muy rápida.

Procedimiento:

1. Entra al código de tu plantilla ( Escritorio → Diseño → Edición HTML → Expandir plantilla de artilugios ) y justo después del siguiente código: ]]></b:skin>

Añade el siguiente script:

/* Fechas amigables en Blogger: http://blogandweb.com/2784 */

function timeAgo(date1,date2,granularity){var self=this;periods=[];periods['semana']=604800;periods['día']=86400;periods['hora']=3600;if(!granularity){granularity=5;}

(typeof(date1)=='string')?date1=new Date(date1).getTime()/1000:date1=new Date().getTime()/1000;(typeof(date2)=='string')?date2=new Date(date2).getTime()/1000:date2=new Date().getTime()/1000;if(date1>date2){difference=date1-date2;}else{difference=date2-date1;}

output='';for(var period in periods){var value=periods[period];if(difference>=value){time=Math.floor(difference/value);difference%=value;output=output+time+' ';if(time>1){output=output+period+'s ';}else{output=output+period+' ';}}

granularity--;if(granularity==0){break;}}

return'Hace '+output;}

$(document).ready(function(){});

</script>

2. Ahora busca: <data:post.dateHeader/>

Nota: recuerda tener los artilugios expandidos o no encontraras este código.

Y sustitúyelo con:

3. El último paso es cambiar el formato de fecha para que sea compatible con el script entra a:Escritorio → Configuración → Formato → Formato de cabecera de fecha. Y cambia el formato de fecha por el sexto de arriba hacia abajo, es tipo: 7/18/2010. Guarda los cambios.

Y listo.

Compara ¿Qué tan rápido es tu sitio? con otros

La velocidad de carga de un sitio web es uno de los factores más importantes para una buena experiencia al usuario, adicionalmente, Google ya ha comentado que es un factor que toma en cuenta en el posicionamiento en su buscador.

Captura:

Una manera hasta divertida de leer la velocidad de carga es Which loads faster con el que puedes poner a competir tu sitio con otro y ver quien carga más rápido. Incluso puedes comparar con varias repeticiones (repeat) o hacer una competencia con varias páginas.

Sitio para realizar la prueba: whichloadsfaster.com

jueves, 8 de julio de 2010

Mapa 3D con contador de visitas

Bueno hoy les voy a explicar como poner este contador de visitas como el que ves en este blog

Manos a la obra:
1- Tenes que entrar al enlace. http://www.revolvermaps.com/?target=setup
2- Luego podes configurar el mapa a tu gusto
3- Copias el código y guardar en una cajita HTML Para hacer esto tenes que ir a Diseño>Elementos de la pagina>Añadir un Gadget>HTML/Javascript. Pegas el código y le pones un titulo el que vos quieras ,Presionas guardar y listo entras a tu blog y te quedara así

4- Tambien pueden hacer un boton como este,
que indica el lugar donde vives o te conectas.Para esto tenes que entrar al siguiente enlace http://www.revolvermaps.com/?target=setupbutton y realizas el mismo procedimiento que en el anterior También le podes cambiar los colores como al otro. La verdad queda muy lindo. Espero que te sirva.

Como poner Leer más automático menos en el primer post

Guarda siempre una copia de tu plantilla. Utiliza la vista previa.. Para buscar elementos en la plantilla utiliza Ctrl + f .

Lo primero que haremos será aplicar el leer más automático en todas las entradas, así que primero vamos a Diseño | Edición de HTML marcamos la casilla Expandir plantillas de artilugios y buscamos esta etiqueta:

<data:post.body/>

Y la sustituimos por esto:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div style='text-align:justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right;'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Ahora antes de </head> pegamos este script:

<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Con esto ya tenemos el leer más en todas las entradas, ahora haremos que no se aplique en la primera entrada, para lograrlo buscamos esta línea:

<b:include data='post' name='post'/>

Y la cambiamos por esto:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='post hentry'>

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-body entry-content'>
<p><data:post.body/></p>
</div>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
</b:if>
</span>
<span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
</span>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Y listo, con eso ya tenemos el leer automático con miniaturas menos en la primera entrada de la página principal.

Imagen flotante en el blog

Para poner una imagen flotante lo que tienes que hacer es poner el codigo que dejo abajo en una caja HTML para hacer esto tienes que ir a Diseño>Elementos de la pagina>Añadir un Gadget>HTML/Javascript Pero antes... debes decidir qué imagen colocar.

Acá te dejo el código

<img style="display: scroll; position: fixed; bottom: 10px; left: 10px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi84iGf-V-cg49Jgx36AOjwR0gN_x7RypdW2XUF-kiq_14VHQZLQAbV7YuDT_XCjIysYUV82J5l9W09-0XY4e0c27n2qVMZ-q45yTE1jt_N56P6shXeiBwomjqPYJbnTRavLt-mWSMNSFI/s320/vv.png"/>

Ustedes podrán reemplazar la parte verde, que es la URL de la imagen de mi imágen.

Tambien podes buscar IMAGENES en el buscador de Google, abrir la imagen elegida y copiar la URL. ( Botón derecho del ratón > opción Propiedades > URL. Entonces la reemplazan por la que yo les puse en verde.
Para los más detallistas: pueden cambiar la posición de la imagen reemplazando left (izquierdo) por right (derecho) según el lado en que quieran ubicarla y bottom (abajo) por top (arriba).

Culquier duda pregunten espero que les sirva.

miércoles, 7 de julio de 2010

Titulo Parpadeante en la pestaña

Hola Gente acá les explico como poner títulos parpadeantes en la pestaña como aparece acá en Bloggerinck lo que lo hace llamativo y sobresalta de las demás pestañas destacandonos del resto. Puedes colocar una frase, el titulo de tu blog, lo que desees.
Empecemos:

Lo que tenes que hacer es Copiar y pegar el código que dejo abajo en un Gadget HTML. Para hacer esto tenes que ir a Diseño>Elementos de la pagina>Añadir un Gadget>HTML/Javascript, reemplazando la parte en verde con el texto que quieras, presionas guardar y ya esta entras en tu blog y veras como queda .

<!—Mas trucos en Bloggerinck --><SCRIPT LANGUAGE="JavaScript">

var txt=" :-) Aquí va tu texto - Bienvenidos - ";

var espera=100;

var refresco=null;

function rotulo_title() {

document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

refresco=setTimeout("rotulo_title()",espera);}

rotulo_title();

</SCRIPT>

Bueno espero que te haya quedado bien Gracias por tu visita y vuelve cuando quieras.