Web-Stat web traffic analysis
Mostrando entradas con la etiqueta Widgets. Mostrar todas las entradas
Mostrando entradas con la etiqueta Widgets. Mostrar todas las entradas

lunes, 10 de octubre de 2011

EDITAR LA PLANTILLA: Cómo añadir la edad del blog. Funcion diasonline()

Me gusta añadir como WIDGET una frase que va diciendo los dias de vida del blog. Para hacerlo tenemos que editar el código XML-HTML de la plantilla. Hagamos una copia, vamos a DISEÑO-EDICION DE HTML - DESCARGAR PLANTILLA COMPLETA. Grabalá añadiendole delante la fecha del dia por ejemplo "20081123nombredeltemplate.xml" para ir guardando copias historicas a las que puedas recurrir en caso de problema. Cada vez que añadas un bloque de código debes hacer una copia para poder retroceder en caso de error o fallo.

Otra buena practica es copiar (o cargar) todo el código en tu editor de texto (preferentemente que entienda XML y sea capaz de abrir y cerrar "parrafos"), trabajar en él y luego copiar el resultado a BLOGGER.

Más buenas prácticas: cuando introduzcas un bloque de código en tu plantilla resulta práctico encerrar el bloque con 2 lineas de comentario que pueden incluir la fecha de la modificación y para qué sirve el código que incluyen (y cualquiera otra información que encuentres útil con vistas a que el código sea más legible). Si el código es HTML, sería algo cómo esto:

<!-- 20081121 Widget para botones de reacción debajo del Post -->
...primera linea del código
...ultima linea del código
<!-- 20081121 FIN Widget para botones de reacción debajo del Post -->

Hay que rodear el comentario con los TAGS:

"<!--" INICIO del comentario
"-->" FIN del comentario

Busca al principio de la plantilla la etiqueta <head> y justo debajo pegale el código que contiene la función de calculo de fecha


<script type='text/javascript'>

function diasonline(){
fecha= new Date();
hoy = New Date(fecha.getFullYear(),fecha.getMonth()+1,fecha.getDate());

// Reemplazar (2001,01,29) por la fecha de inicio de tu sitio (aaaa,mm,dd)

inicio = new Date(2011,10,01)
resta = hoy.getTime() - inicio.getTime();
resultado = Math.floor(resta/(1000*60*60*24));
document.write("Este BLOG lleva "+resultado+" DIAS ONLINE");
}
</script>


por supuesto debes reemplazar:
new Date(2008,10,16)
por el día de inicio de tu blog (1 de Octubre de 2011, p.ej.):
new Date(2011,10,01)

Guardas el cambio.

Luego sólo resta añadir la como WIDGET la llamada a la función.

Añadimos un componente HTML y pegamos el siguiente código

<script language="javascript">diasonline()</script>

¡Y ya está!




Pulsa para CONTINUAR LEYENDO...

jueves, 30 de diciembre de 2010

BLOGUMUS: Etiquetas en 3D

Blogumus utiliza JavaScript y Flash Player 7 o superior para funcionar aunque se "degrada" correctamente mostrnado una lista convencional de etiquetas en los navegadores que no los tengan instalados. Hay que tener cuidado con los caracteres especiales en las etiquetas.

Buscamos la linea siguiente:

<b:section class='sidebar' id='sidebar' preferred='yes'>
Incluimos este bloque de código a continuación:


<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>



Opciones customizables:

  • ANCHURA: 240px
  • ALTURA: 300px;
  • COLOR DEL FONDO: Blanco (#ffffff)
    var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
  • COLOR DEL TEXTO: Gris oscuro (#333333)
so.addVariable("tcolor", "0x333333");
  • Tamaño de la Fuente del texto: 12

    so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

  • Quitando la doble barra de comentario en esta linea conectará la TRASPARENCIA DEL FONDO
//so.addParam("wmode", "transparent");


Pulsa para CONTINUAR LEYENDO...

miércoles, 22 de diciembre de 2010

Buscando WIDGETS Externos: OUTBRAIN

En http://www.outbrain.com se encuentran las mejores estrellitas para calificar los POSTS.

Se abre uno una cuenta, elige "Claim your BLOG", introduce la URL, elige el idioma y que es para BLOGGER,
y ya esta!
"Añadir Artilugio".
Después de Añadirlo al Blog se vuelve a la página de OUTBRAIN y se pulsa en un link que comprueba que el código ha sido añadido y que la página te pertenece.
La página recoge estadisticas.


Pulsa para CONTINUAR LEYENDO...

lunes, 29 de noviembre de 2010

Widget: Botones de Reacción

Entrando en BLOGGER en DRAFT , en Diseño, editamos el POST









Pero además tenemos que añadir el siguiente código a la plantilla:


<span class='reaction-buttons'>
           <b:if cond='data:top.showReactions'>
               <table border='0' cellpadding='0' width='100%'><tr>
               <td valign='center'>
               <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>

¿Dónde añadirlo? Pues debajo de una linea
<div class='post-footer-line post-footer-line-(NUMERO DE LINEA)'/>

Pero en cada caso habrá que ver si (NUMERO DE LINEA) es 1, 2, 3 ó ... En el caso de este blog
era la numero 3.


Pulsa para CONTINUAR LEYENDO...

domingo, 15 de noviembre de 2009

Hazte tu blog completito en Blogger en 20 minutos (ó en 2 patadas) (Parte Sexta)

Pero todo lo que hemos hecho hasta ahora para tener un blog con aspiraciones a rankear bien no vale para nada si no lo registramos en unos cuantos directorios. Tenéis en Mejorando MÁS el posicionamiento de tu Blogger con ALEXA en 2 patadas (Parte 03) un listado de los directorios que mejor resultado me han dado.
Una vez inscrito en unos cuantos directorios va siendo hora de que le demos unos retoques a la página. 

MONETIZAR CON ADSENSE
Habíamos dejado el blog preparado para monetizar con ADSENSE y conectado los anuncios en el FEED. Sólo queda que añadamos un par de anuncios en la portada del Blog donde mejor nos parezca:
image


ESTADISTICAS Y SEGUIMIENTO
Para controlar el crecimiento de nuestro blog necesitamos unas buenas estadísticas de seguimiento. Algún día hablaremos un poquito sobre como analizar las estadísticas y que significan, pero de mEomento vamos a conformarnos con capturarlas. Y creo que lo mejorcito que hay por ahí está en:
http://www.web-stat.com
Podemos abrir una cuenta con uso gratuito durante 1 mes. Es una pena que no sea gratis para siempre. Pero merece la pena, aunque sólo sea por 1 mes.
Es muy sencilla de configurar, SIMPLEMENTE PEGAMOS UNOS LINEAS DE CÓDIGO JUSTO ENCIMA DE LA ETIQUETA DE CIERRE DE BODY.

Toda aplicación de estadísticas debe tener la opción de discriminar (no tener en cuenta) tus propias visitas; porque si no estarás inflando el número de visitas reales al blog. Lo más cómodo es poder utilizar la IP pública.

LOS COMENTARIOS
Otro bonito toque es mejorar la gestión de los comentarios.
DISQUS COMMENTS
ofrece un servicio gratuito que permite potenciar y configurar los comentarios de tu blog. Es muy sencillo de instalar y verdaderamente mejora mucho el asunto tanto estética como funcionalmente.
OJO!!!: Para la instalación es necesario enviar el fichero XML de tu Blogger a su web y DISQUS lo devuelve con el código intercalado necesario. Por favor, antes de lamentar, haced siempre una COPIA DE SEGURIDAD. En el caso remoto de que el código añadido de DISQUS estropeara algo, debemos disponer de una copia de seguridad de nuestro Blogger en XML para cargarla y evitar quebraderos de cabeza.


Pulsa para CONTINUAR LEYENDO...

sábado, 22 de noviembre de 2008

WIDGETS: FEEDJIT

http://feedjit.com te llevará a la página de FEEDJIT.

FEEDJIT tiene unos Widgets muy interesantes desde el punto de vista de Geolocalización y seguimiento de tráfico entrante en tiempo real.



Pulsa para CONTINUAR LEYENDO...

WIDGETS EXTERNOS: SiteMeter

En http://www.sitemeter.com/ podremos empezar el proceso de inscribir nuestra Web para las estadisticas que sirve SiteMeter. Como siempre, deberemos primero registrarnos con usuario y contraseña.

Una vez capturados los datos de la pagina web que queremos registrar, te envian a tu cuenta de correo, el usuario y contraseña  


Pulsa para CONTINUAR LEYENDO...

viernes, 21 de noviembre de 2008

Formulario de Comentarios embebido debajo del Post sin salir de la página

En BLOGGER EN DRAFT Diseño - Comentarios

En español:




Una vez elegida la opción, dependiendo de la plantilla que tengas (plantilla NO blogger) es posible que no funcione. En tal caso:
Hay que añadir el siguiente codigo:

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if>



Y hay que añadirlo debajo de la linea
<p class='comment-footer'>
Pero ¡MUCHO OJO!
En la SEGUNDA OCURRENCIA de la linea, NO en la primera que deberás dejar como está.
Es decir, la que está encima de <div id="'backlinks-container'">


Pulsa para CONTINUAR LEYENDO...

martes, 18 de noviembre de 2008

Primera Aventura: La plantilla

La plantilla es la imagen de tu blog. Lo divertido es tener un blog diferente, un poco complejo y lleno de Widgets. Por eso vamos a dar un salto en el vacío y vamos a buscar y elegir una plantilla con más posibilidades. El momento oportuno es ahora, cuando sólo tienes un post y tu blog prácticamente por configurar. Después, aunque puede hacerse, es mucho más complicado.

http://btemplates.com/

http://www.oswd.org/designs/favorites/ 

http://blogger-templates.blogspot.com/

http://blogandweb.com/templates-blogger/

http://www.blogcrowds.com/resources/blogger_template.php

http://www.finalsense.com/services/blog_templates/

http://www.bloggertemplates.org/

http://www.template-godown.com/search/label/gallery

http://www.geckoandfly.com/blogspot-templates/blogger-templates/

http://www.pannasmontata-templates.net


Hay muchos sitios donde buscar una plantilla con un poco de picante pero yo recomiendo:
http://www.ourblogtemplates.com/

Tienes ciento y pico plantillas para elegir, bien documentadas (en inglés) pero algo es algo.

Cuando tengas elegida la que te gusta, lánzate, descarga el archivo (*.XML) guardalo en un directorio de tu disco duro con un añadiendole la fecha delante, "20081101nombredelaplantilla" u "original" o algo parecido para que en caso de necesidad puedas con facilidad recurrir a ella como COPIA DE SEGURIDAD.

Una vez tengas tu plantilla en el disco duro: ADELANTE!

DISEÑO-EDICION DE HTML- EXAMINAR (seleccionas el archivo) y SUBIR.

No hemos hecho copia de seguridad de la plantilla original ya que no hemos hecho ninguna modificación y siempre podremos recuperarla de BLOGGER.

puede que te salga algún mensaje "Vamos a suprimir el artilugio ("eso es un WIDGET") xxxx". Cómo no hemos configurado nada, AVANTI. Confirmar y guardar.


Pulsa para CONTINUAR LEYENDO...

  © Blogger template Newspaper III by Ourblogtemplates.com 2008

Back to TOP