miércoles, 11 de marzo de 2009

Conseguido!!!


Ya he conseguido ocultar una entrada en la pantalla principal manteniéndo el enlace a ésta desde el archivo de entradas en el lateral . Si mirais en el listado de archivos del blog de la columna lateral, hay una entrada que se llama "Esta entrada va a caducar" . Aparece en el listado, pero no en la pantalla de inicio. Va a ser un poco complicado explicarlo de una forma sencilla, pero lo intentaré, en breve, en otra entrada. Esto va por fascículos. Saludos!! Seguir Leyendo!

martes, 10 de marzo de 2009

Alojar archivos para compartir en Google sites


Blogger no permite subir archivos de ningún tipo (únicamente imágenes y vídeos), y hemos de usar un servicio externo, como puede ser: google sites.

El proceso que seguiremos para alojar los archivos que queremos compartir será el siguiente:1. Vamos a la página de google sites, y entramos con nuestra identificación de blogger o de gmail: en principio es un servicio más de google.

2. A continuación, se nos abrirá una interfaz y buscaremos la opción “Crear nuevo sitio”, y haremos clic.

3. Posteriormente, tendremos que rellenar un formulario, en el cual son especialmente importantes los siguientes campos: Hemos de recordar el valor que damos al nombre del sitio y tendremos que recordarlo para crear en el enlace desde nuestro blog. En campos “Compartir”, ha de tener el valor “Todo el mundo puede acceder ”, con la finalidad de que cualquier persona pueda descargar un archivo de nuestro blog.

4. En esta pantalla haremos clic en la pestaña “Adjuntar”, aparecerá un desplegable en el cual seleccionaremos el archivo de nuestro disco duro que deseamos subir. Después de un breve período de tiempo nos avisará de que ha terminado de subir el archivo. Para subir más archivos bastará con pulsar otra vez en “Examinar”, y seleccionar el archivo que queramos subir a google sites.

5. En este momento, ya tenemos el archivo subido y únicamente tendremos que hacer el enlace desde blogger al elemento que acabamos de subir. A continuación vamos a nuestro panel de blogger, y creamos la entrada donde queramos compartir el archivo.

6. Escribiremos el texto con el que deseemos compartir nuestro archivo, lo seleccionaremos y pulsaremos el botón o Link. A continuación se nos abrirá un enlace en el que escribiremos la ruta del archivo que queremos compartir que será algo similar a: http://sites.google.com/site/titulodetusitio/Home/Archivosubido.pdf El título es el punto que recalcaba que teníamos que recordar del punto 3, y el nombre del archivo lo veremos junto al texto subido. Una vez hecho esto ya habremos compartido el archivo.

Seguir Leyendo!

Insertar buscador de google


Los pasos para ponerlo en nuestra web serán los siguientes:

1. En primer lugar, vamos a nuestro panel de blogger, y elegimos la pestaña “Diseño” y la subpestaña “Elementos de página”.

2. A continuación elegimos “Añadir nuevo elemento de página”, y elegimos la opción HTML/Javascript.

3. Finalmente, para terminar copiamos el siguiente código HTML, reemplazando NOMBRESITIO por el nombre de tu sitio, y DIRECCIONSITIO por la correspondiente URL (algo de la forma http://tublog.blogspot.com). Para que todo esté correcto en total se han de hacer 3 cambios. fg

  <form action="http://www.google.com/search" method="GET">
  <input value="UTF-8" name="ie" type="hidden"/>
  <input value="UTF-8" name="oe" type="hidden"/>
  <table bgcolor="#FFFFFF">
  <a href="http://www.google.com/">
  <img border="0" alt="Google" src=" http://www.google.com/logos/Logo_40wht.gif"/>
  </a>
  <input maxlength="255" value=""
 name="q" size="15" type="text"/> <input value="Buscar" name="btnG" type="submit"/>
  <font size="-1">
 <input value="DIRECCIONSITIO"
 name="domains" type="hidden"/><br/><input value=""
 name="sitesearch" type="radio"/> la web<input checked value="DIRECCIONSITIO" name="sitesearch" type="radio"/> NOMBRESITIO<br/>
  </font>
  </table></form>
Seguir Leyendo!

Tamaño de las imágenes


Blogger asigna el tamaño de las imagenes tomando como referencia el numero de pixeles del lado más grande, y proporcionando el lado pequeño. El tamaño de las imágenes medianas es de 320px, el de las imagenes grandes 400px y el de la imagenes pequeñas 200px. Pero podemos asignar un tamaño de imagen a voluntad de dos formas:

- Cambiar el tamaño de la imagen desde "Redactar" Seleccionamos la imagen pulsando con el boton izquierdo del ratón sobre la imagen, seguidamente nos situamos sobre uno de lso ocho cuadrados blancos. Con los cuadros centrales podemos aumentar las dimensiones de altura o amplitud, de forma separada; con los cuadrados de las esquinas el cambio es de ambas direcciones, siendo el cambio equilibrado y proporcionado.

- Cambiar el tamaño de la imagen desde "Edición de HTML" Simplemente has de buscar en el código HTML de la imagen las palabras hieght y width, junto a cada una de ellas viene el valor numérico, que tienes que cambiar para variar las dimensiones de la imagen. Puedes de este modo deformar la imagen o mantener la proporcionalidad de los lados, segun nos interese. La forma más sencilla de mantener la proporcionalidad es dividir a la mitad. Escogeremos un tamaño grande si queremos ver mayor detalle en la imagen, optaremos por tamaños pequeños para que la columna de texto junto al cuerpo no sea excesivamanete estrecha. Como curiosidad comentar que 400px de ancho es la anchura de algunas de las plantillas básicas de google, como minima strech.

Seguir Leyendo!

Ocultar la barra superior


Para ocultar la barra superior de Blogger, tendremos que indicar en los estilos que la barra va a tener las siguientes propiedades

.Navbar{ visibility:hidden; display: none; }

#navbar-iframe{ height:0px; visibility:hidden; display:none }

Los estilos los modificamos en Diseño >> Edición HTML >> Editar plantilla. Y los estilos se modifican entre las etiquetas del <head> y antes de ]]></b:skin> Seguir Leyendo!

lunes, 9 de marzo de 2009

Insertar buscador


Para insertar el buscador hemos de hacer lo siguiente:
1. Ir a la pestaña diseño del blog, y seleccionar la subpestaña “Elementos de página”.
2. Pulsar “Añadir nuevo elemento”, y seleccionamos “HTML/JavaScript”.
3. Copiar el siguiente código:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" type="text"/>
<input id="search-btn" value="Buscar" type="submit"/>
</form>


4. Guardar los cambios y hacer alguna pequeña prueba para observar que todo funciona bien.

Seguir Leyendo!

Nubes de etiquetas


Las nubes de etiquetas, permiten ordenar las etiquetas de nuestro blog con la finalidad de mostrar a los usuarios los diferentes temas de los que trata nuestra web. Para hacernos una idea os voy a mostrar una imagen en la que se aprecia la diferencia. En la imagen de la derecha podéis observar un ejemplo de nube de etiquetas. En ella lo que se hace es asignar un tamaño u otro de letra en función del número de entradas que haya para una entrada concreta ayudando a los buscadores a determinar cuales son los elementos más importantes de nuestra página. Desde el propio blogger los pasos serán los siguientes:

0. En caso de que no tengas ya etiquetas en tu blog, ves a la pestaña Diseño, y selecciona Elementos de Página, pulsa Añadir nuevo elemento en la columna de la derecha, y busca “Etiquetas”. Añádelo, guarda y comprueba que ya existe un apartado de etiquetas en tu blog.

1. Ves al panel de tu blog, selecciona la pestaña Diseño, y una vez ahí selecciona la opción “Edición de HTML”. Una vez allí antes de comenzar a hacer nada asegúrate que la opción “Expandir plantillas de artilugios está desactivada” (en principio debería estar desactivada).

Antes de pasar al paso 2 es muy importante que nos hagamos una copia de seguridad de la plantilla. Para ello, pulsaremos “Descargar plantilla completa”, y guardaremos una copia de seguridad para poder reemplarla otra vez en caso de que no salga.

2. Busca en el código el siguiente texto:

]]></b:skin>

.

3. A continuación pegaremos el siguiente código fuente justo antes de la etiqueta anterior.

/* Estilos de la nube de etiquetas----------------------------------------------- */

#labelCloud {text-align:center;font-family:arial,sans-serif;}

#labelCloud .label-cloud li{display:inline;background-image:none
!important;padding:0 5px;margin:0;vertical-align:baseline
!important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0
3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count
{padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

4. En este código no es necesario realizar cambios ya que es adaptable a cualquier blog. A continuación Procedemos a pegar el siguiente código justo después de la etiqueta que antes hemos buscado (]]></b:skin>) y antes de </head>.

<script type='text/javascript'>
// Variables de usuario de la nube de etiquetas
var lcBlogURL = 'http://TUBLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

5. En esta ocasión es muy importante que pongáis el nombre de vuestro blog, y completéis la dirección donde pone TUBLOG. Además, una vez lo probéis después podéis hacer cambios como el tamaño máximo de letra o el mínimo que queráis que tengan las etiquetas, y los colores de estas.

6. Una vez hecho esto vamos al tercer y último paso necesario para tener una nube de etiquetas en nuestro blog es el siguiente. Buscaremos el siguiente texto en nuestro blog: <b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>

7. Finalmente, REEMPLAZAMOS la línea seleccionada por el siguiente bloque:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>

</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

 
// No cambiar nada -----------------
 
function s(a,b,i,x){

if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)

}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

}
return v
}
 
var ta=0
var c=[];
var labelCount = new Array();var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
 
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
 
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';

span.className = 'label-count';
a.appendChild(document.createTextNode(t));

li.appendChild(a);
li.appendChild(span);
}
 

else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);

}
ul.appendChild(li);
abnk = document.createTextNode(' ');

ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

 
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>

<a expr:href='data:label.url'><data:label.name/></a>
</b:if>

(<data:label.count/>)
</li>
</b:loop>
</ul>

</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>

</b:widget>

8. Una vez hecho esto ya tendremos la nube de etiquetas en nuestro blog.

Seguir Leyendo!

Entradas resumidas


Si lo que queremos mostrar en la pantalla de inicio y en los listados de entradas es una versión reducidad de la entrada para luego mostrarla completa en la página de la entrada haremos los siguiente: Copiar esto antes del cierre del head:


<style><b:if cond='data:blog.pageType == "item"'> 
   span.fullpost {display:inline;}
<b:else/>
   span.fullpost {display:none;} 
</b:if></style></head>

Enlace "Seguir leyendo"

Añade el código siguiente a tu plantilla, después del código <data:post.body/>:

<b:if cond='data:blog.pageType != "item"'><br />

   <a expr:href='data:post.url'>Seguir leyendo!</a>
</b:if>

Este vínculo sólo aparecerá en la página principal y las páginas de archivo, y redireccionará al lector a la página de entrada que contiene todo el texto de la entrada. Puede sustituir "Seguir leyendo" por el texto que desees.

Modificaciones de las entradas

El último paso es añadir código en la entrada real. Cada entrada en la cual desees utilizar esta funcionalidad deberá incluir este código:

<span class="fullpost"></span>

De hecho, esta parte puede colocarse en la plantilla de entrada para no tener que escribirla cada vez. Introduce el texto del resumen fuera de los códigos span y el resto dentro:

Esto es el principio de mi entrada. <span class="fullpost">Y esto el resto.</span>

Cuando un usuario visite tu blog, la entrada que aparecerá será ésta:

Esto es el principio de mi entrada.
Seguir leyendo
Al hacer clic en el vínculo, accederá a la página de entrada donde se encuentra el resto del texto:
Esto es el principio de mi entrada. Y esto el resto.
Seguir Leyendo!

Enlaces para crear contadores para mi blog


Permite crear también fácilmente contadores sencillos. El contador de la derecha es de este servicio. Require registro: http://contadores.miarroba.com/

Servicio de contadores gratuito http://es.99counters.com/ El primer contador que aparece en la columna derecha de este blog es suyo.

Para crear un contador que muestra los visitantes online: whos

Para tener un servicio de contador y estadísticas: motigo webstats

Para insertar en nuestro blog un contador sencillo: micontador

Para crear distintos tipos de contadores sencillos. Permite también seguir estadísticas. 24log.es

Seguir Leyendo!

Enlaces para crear contadores para mi blog


Permite crear también fácilmente contadores sencillos. El contador de la derecha es de este servicio. Require registro: http://contadores.miarroba.com/

Servicio de contadores gratuito http://es.99counters.com/ El primer contador que aparece en la columna derecha de este blog es suyo.

Para crear un contador que muestra los visitantes online: whos

Para tener un servicio de contador y estadísticas: motigo webstats

Para insertar en nuestro blog un contador sencillo: micontador

Para crear distintos tipos de contadores sencillos. Permite también seguir estadísticas. 24log.es

Seguir Leyendo!