Días Online

Mostrando entradas con la etiqueta cosas web. Mostrar todas las entradas
Mostrando entradas con la etiqueta cosas web. Mostrar todas las entradas

Ojos que siguen tu cursor

23 octubre 2010 0 comentarios
Se trata de incluir en el blog dos ojitos que persiguen al cursor y que su pupila parece estar observando en todo momento los movimientos que realizas con el ratón.

 Para poder poner eso tenemos que hacer lo siguiente: Diseño -> Añadir gadget -> Html-javascript






Seguidamente tendras que pegar este código:



<script type="text/javascript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var balcnimg1 = new Image();
balcnimg1.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijIIsFLgwKsaKT3cMf5PrKVHeKbuLtLIFZhUWen-uIuCkRIWpny8hTCXvdc-0zDCj_CcMKNKSol3tg2sbYpgVCWqo9a9vkhd7j74c7ulH0ycnogsKprHO4htkyNKjOthe1ZdDX87vUhFAN/s320/blojo2.gif";
var balcnimg2 = new Image();
balcnimg2.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-N6FOeCW1dJ5njhxhheb-EICy2OYwagOMdGA0-ju_7oUmaLKYLnwsN3aM3Ho_At52IozwbrAHtVkSMaGBhaATedk7qe29Wqi2u5cCGapDN6pL14KGH3Oix4a_9zPkCniNKdMVuanjKL4s/s320/blojo1.gif";
var balcnimg3 = document.images.length;
if ( document.getElementById("pic"+balcnimg3) ||
document.getElementById("balcnad"+balcnimg3) ||
document.getElementById("balcnad2"+balcnimg3)) balcnimg3++;

document.write('<img id="blcnvv'+balcnimg3+'" src="'+balcnimg1.src+'" alt="" style="position:absolute;top:0px;left:0px;width:69px;height:34px"/>'
+'<img id="balcnad'+balcnimg3+'" src="'+balcnimg2.src+'" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>'
+'<img id="balcnad2'+balcnimg3+'" src="'+balcnimg2.src+'" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>');

document.write('<a style="font-size:12px;"href="http://elbalcondejaime.blogspot.com/2010/08/ojos-que-persiguen-y-observan-al-cursor.html" target="_blank"><img src="http://goo.gl/5ZST"/></a>');
var h,w,r,balcneedimg,blcnimgmin,blcnimgmin2;
var d = document;
var my = 0;
var mx = 0;
var fy = 0;
var fx = 0;
var pix = "px";
var domWw = (typeof window.innerWidth == "33");
var domSy = (typeof window.pageYOffset == "33");
if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "33" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}
function blcnff(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else{
h = r.clientHeight;
w = r.clientWidth;
}
}
function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
my = e.pageY - msy;
mx = e.pageX;}
else{
my = e.clientY - msy;
mx = e.clientX;
}
}
function blcnsgg(){
var sy = scrl(0);
var sx = scrl(1);
var chy = Math.floor(fy-50);
if (chy <= 0) chy = 0;
if (chy >= h-50) chy = h-50;
var chx=Math.floor(fx-34);
if (chx <= 0) chx = 0;
if (chx >= w-69) chx = w-69;
var c1y = chy+17;
var c1x = chx+17;
var c2y = chy+17;
var c2x = chx+52;
var dy1 = my - c1y;
var dx1 = mx - c1x;//80
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
var dy2 = my - c2y;
var dx2 = mx - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
var ay1 = my - c1y;
var ax1 = mx - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
var ay2 = my - c2y;
var ax2 = mx - c2x;
var angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
var dv = 1.7;
var onEyeBall1 = (d1 < 17)?d1/dv:10;
var onEyeBall2 = (d2 < 17)?d2/dv:10;
balcneedimg.top = chy+sy+pix;
balcneedimg.left = chx+sx+pix;
blcnimgmin.top = c1y-6+onEyeBall1*Math.sin(angle1*Math.PI/180)+sy+pix;
blcnimgmin.left = c1x-6+onEyeBall1*Math.cos(angle1*Math.PI/180)+sx+pix;
blcnimgmin2.top = c2y-6+onEyeBall2*Math.sin(angle2*Math.PI/180)+sy+pix;
blcnimgmin2.left = c2x-6+onEyeBall2*Math.cos(angle2*Math.PI/180)+sx+pix;
}
function balcnimg4(){
dy = fy += (my-fy) * 0.05;
dx = fx += (mx-fx) * 0.05;
blcnsgg();
setTimeout(balcnimg4,30);
}

function blcndde(){
balcneedimg = document.getElementById("blcnvv"+balcnimg3).style;
blcnimgmin = document.getElementById("balcnad"+balcnimg3).style;
blcnimgmin2 = document.getElementById("balcnad2"+balcnimg3).style;
blcnff();
balcnimg4();
}
if (window.addEventListener){
window.addEventListener("resize",blcnff,false);
window.addEventListener("load",blcndde,false);
document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",blcnff);
window.attachEvent("onload",blcndde);
document.attachEvent("balcnkk",mouse);
}
})();
}
</script>


Visto en EsBlogmania

Menús para tu blog

12 octubre 2010 0 comentarios
Wibiya es una completa barra de herramientas que se implementa a pie de página en páginas web y blogs de forma elegante y sencilla.

Muy bien, ¿pero para qué sirve esta barra de herramientas Wibiya? En ella podemos incluir datos sobre nuestra cuenta Twitter, Facebook, vídeos Youtube, chat online, datos sobre el blog, mostrar entradas aleatorias del blog, añadir un buscador, suscripción RSS, contador de visitas online y un sinfín de posibilidades más.

La página está en inglés, por eso voy a tratar de explicar brevemente los pasos a seguir para incluir Wibiya en Blogger.

1) Vamos a Wibiya.
2) Nos registramos clicando en Get it now.
3) Nos llegará una notificación al email que deberemos confirmar.
4) Apareceremos en nuestra cuenta y allí podremos configurar la barra wibiya. Seleccionaremos qué aplicaciones activar y cuáles no. Podremos seleccionar el color de la barra, cuál será su posición en el blog y bajo qué plataforma. En este caso será Blogger, obviamente.







5) Automáticamente apareceremos en nuestro panel de control añadiendo la barra Wibiya como gadget.

Todo listo. Espero que sepas ver todas las posibilidades de esta increíble barra de herramientas Wibiya para Blogger.

Visto en QuieroCrearUnBlog

Como poner leer más con una imagen

10 octubre 2010 0 comentarios
Antes de empezar con la explicación hay que tener en cuenta que, una vez aplicados los cambios necesarios en la plantilla, el "Leer más" se aplicará a todas las entradas.

Después de incluir el código necesario en la plantilla para logar este efecto, las entradas sucesivas se editarán como siempre hemos hecho, es decir, no habrá que incluir ningún código en el editor, ni formatear las entradas de forma especial.

Una vez publicada la entrada, esta mostrará un determinado número de texto y una imagen en miniatura en la parte derecha del mismo.

La miniatura que se muestra, será por defecto, la de la primera imagen incluida en la entrada.
Si la entrada solo tiene una imagen, será la miniatura de esta la que se muestre en la entrada, si se incluyen varias imágenes, la miniatura que se mostrará será siempre la de la primera imagen de las que hayamos incluido en la entrada.
Si no incluimos imágenes en la entrada, se mostrará un resumen de texto determinado antes del "Leer más".



Una vez pinchemos en el "Leer más", iremos a la página individual de la entrada, donde la entrada se verá tal como la hemos editado, con las imágenes a tamaño "real" y en la posición en que las hayamos incluido.


[1] Nos situamos en la pestaña de "Edición HTML" de nuestro panel y marcamos la casilla de "Expandir las plantillas de artilugios" para localizar este código:

[2] Una vez lo hemos localizado, lo eliminamos y en su lugar colocamos este otro:

<b:if
cond='data:blog.pageType != "item"'>
<div 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 cond='data:blog.pageType ==
"item"'><data:post.body/></b:if>


[3] Subimos ahora hacia arriba en el código de la plantilla hasta localizar la etiqueta:

Justo antes de esa etiqueta () colocamos este código:



<script
type='text/javascript'>

summary_noimg
= 430;

summary_img
= 340;

img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
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>








Modificaciones:

Código del paso [2]

Para sustituir el "Leer más" por una imagen, borramos Leer más... y colocamos en su lugar la url de nuestra imagen así:




El "Leer más" se muestra a la derecha de la entrada, para cambiarlo de posición, sustituimos en el código donde dice style='float:right' por style='float:left' (izquierda).

Si además queremos darle alguna propiedad al "Leer más" para que destaque del resto de enlaces de la plantilla, añadimos unas líneas de CSS en el código de la plantilla antes de ]]>:






.rmlink{
font-size:90%;
font-weight: bold;
text-transform:uppercase;
padding-top: 10px;
}
.rmlink a{
color: #228b22;
}
.rmlink a:hover{
color: #9acd32;
text-decoration:underline;
}




font-size: Tamaño del texto.
font-weight: Tipo de texto (en este caso negrita).
text-transform: Texto en mayúsculas.
padding-top: Separación del enlace al texto (en pixeles).
rmlink a{ Propiedades del enlace a simple vista (en este caso solo he añadido color).
rmlink a:hover{ Propiedades del enlace al pasar el ratón sobre el (en este caso he añadido color y subrayado).

Código del paso [3]

He resaltado en color naranja el enlace al script que se necesita para hacer funcionar el "Leer más" que, como podéis comprobar, está alojado en Google Pages tal como el autor del blog de donde he tomado el truco lo proporciona. Es sabido que Google Pages dejará de funcionar en cualquier momento, así que lo más recomendable sería descargar el script y subirlo a nuestro propio alojamiento de archivos.

Modificaciones:
summary_noimg Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada, cuando no hemos incluido imágenes en ella.

summary_img Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada, acompañando a la miniatura de la imagen.

img_thumb_height El alto de la miniatura de la imagen en pixeles.

img_thumb_width El ancho de la miniatura de la imagen en pixeles.


Visto en el Escaparate de Rosa

Formulario de contacto

03 octubre 2010 0 comentarios
Estar en contacto con los lectores eNs esencial y acasi obligatorio, y como podemos conseguirlo lo puedes hacerlo asin:

1- Vamos a Diseño->Elementos de página->Añadir un gadget->HTML/Javascript:
 2- Cuando estemos hay pegamos este código:
___________________________________________________________________________________




<center><script
type="text/javascript"><br/>//<![cdata[ reg2.test(str))
else ) && (window.regexp) valid(form) return true; function }
if reg1str="(@.*@)|(..)|(@.)|(.@)|(^.)" { regexp(reg1str); reg2="new"
reg1="new" false;
reg2str="^.+@([?)[a-zA-Z0-9-.]+.([a-zA-Z]{2,3}|[0-9]{1,3})(]?)$"
regexp(reg2str); (!reg1.test(str) @ field="form.email; var" ;
str="field.value; if" if(str.indexof( field.select(); var
field.focus();>= 0)<br/>return
true;<br/>field.focus();<br/>field.select();<br/>return
false;<br/>}<br/>}<br/>//]]><br/></script>

<form action="
http://chicablogger.chica-web.es/email.php" name="myform" method="post" onsubmit="return
valid(this)"><input value="tucorreo@correo.com"
name="recipient" type="hidden"/><input value="Contacto
quierocrearunblog" name="subject" type="hidden"/><input value="http://www.tu-mundo-web.blogspot.com.com"
name="redirect" type="hidden"/>

Tu nombre (obligatorio):<input name="realname" size="30"
type="text"/><br/>Tu e-mail: (obligatorio)<input
name="email" size="30" type="text"/><br/>Tu
mensaje:<br></br><textarea rows="6" cols="23"
name="Comments" wrap="soft"></textarea><br/>

<input value="Enviar" type="submit"/> <input value="Borrar"
type="reset"/>

</form></center>

<br/>

<br/>

<br/>

<br/>

<center>Gracias por tu e-mail</center>


___________________________________________________________________________________


3- Ahora puedes cambiar las palabras en color verde por tus datos [tu web, tu e-mail, etc...] y si lo deseas las palabras en color azul por las palabras que quieras, ej: borrar -> eliminar.

Nos quedara así:

Generador de botones para tu blog

01 octubre 2010 0 comentarios
Existen páginas web en donde podemos generar o crearnos botones al instante para colocarlos en nuestro blog, foros, etc. Estos pequeños botones son agradables a la vista y pueden servirte como un botón de enlace o para otra utilidad. Lo único que tienes que hacer, es lo siguiente:

1. Ingresar a Button Maker.
2. Editar tanto el texto como los colores del bloque derecho, izquierdo y el botón en general.
3. Finalmente, clic en Generate Button (Generar Botón), lo descargas a tu computadora como si fuera cualquier imagen (clic derecho y escoges Guardar imagen como…). Después tendrás que subirlo a ImageShack o Photobucket, para pegar el botón en el blog.

Ejemplo del estilo del botón: 



Hay otras páginas que te ofrecen crear los botones de diferentes tamaños (cuestión de gustos). Aquí te dejo algunas:
Píxel Button
Web 2.0 Button Maker (Genera botones de todas las clases y colores, incluso añadiendo iconos con imágenes informativas)
Web Taller
Botones Flash
Graphic Navbar Generator
80x15 Brilliant Button Maker
gtmcknight-buttons (Es una colección con más de 3600 botones antipixel para descargar en forma gratuita, el cual están agrupados en diversas categorías)
Online Button Maker
Súpergenerador de Botones en Línea
Buttonator.com
Feed Subscription Button Maker (Botón de sindicación)

Como poner un video de Youtube en tu blog

21 agosto 2010 0 comentarios
Bueno esta entrada esta echa en video ya que todos los tutoriales intentaremos hacerlos en video.
Bueno pues que entre el video. [Los videos que hacemos estan echos 100% por User003 o Negrooogle en el caso de youtube]

Como cambiar el icono de tu blog

20 agosto 2010 2 comentarios
Hola, hoy os vamos a enseñar a como cambiar el icono o favicon de tu blog.

Lo primero que debemos hacer es crear una imagen de 16x16 pixeles de tamaño. El diseño depende de cada blog en particular, lo mismo que los colores e imagenes que le quieran poner.

Una vez que tenemos la imagen 16x16 pixeles que queremos la guardamos. Aqui hay que prestar atención, ya que esa imagen que creamos es un archivo .jpg y lo que necesitamos nosotros para hacer el favicon es un archivo .ico. Para convertir ese .jpg a un .ico vamos a dynamic y clickamos en examinar, elegimos la imagen que creamos y le damos a Create Icon. Esto nos creará el .ico y lo descargamos a nuestra PC.


Ahora ya tenemos nuestro favicon en formato .ico, lo que tenemos que hacer ahora es subir esa imagen a algun hosting de imagenes que soporte los .ico. Nosotros recomendamos iconj ya que no necesita registro, pero tiene un grado mas de complicación para encontrar la url de donde esta subida el favicon.


Bueno cuando ya tengamos nuestro favicon en formato .ico ya guardado, en la pagina de iconj, le daremos en examinar y buscaremos nuestro favicon, cuando ya lo tengamos seleccionado, le daremos a Upload it!

Ya tendremos nuestro favicon subido en un hosting, pero ahora biene lo importante, atención, para encontrar la URL, nos dirigimos abajo en el apartado donde dice: Host It at IconJ.com: (Direct Link)
Entonces abajo pone un código, ese código lo copiamos. Despues de eso abrimos el Notepad, hay es cuando pegamos el código en el Notepad. Buscaremos un link [el 1r que sale] que sale entre ' ' .
El link debe de parecer a este, http://www.iconj.com/ico/c/e/opzrclq9nw.ico .


Una vez que subimos el favicon solo nos queda insertarlo en el blog. Para ello vamos a Diseño y a la Edición HTML del blog y buscamos el siguiente código:



</body>

Y justo antes del mismo pegamos este código:

<link
href='http://sitio.com/favicon.ico' rel='shortcut icon'

type='image/x-icon'/>

Donde debemos reemplazar http://sitio.com/favicon.ico por la url del favicon que subimos en iconj. Guardamos los cambios y está listo, ya tenemos nuestro propio favicon.

Como poner música de fondo en tu web o blog

19 agosto 2010 0 comentarios
Hola, hoy os enseñaremos a como poner musica de fondo en tu blog o web, este tutorial lo hemos completado gracias a la ayuda de un video explicativo en YouTube, pero nosotros lo hemos echo en escrito.

Bueno, para poder poner musica de fondo en tu blog o web tenemos que buscar un video o musica en YouTube, y le damos a insertar y copiamos el código.


(Click en la imagen para ampliar)

El segundo paso es abrir el  Notepad, y pegar el texto que hemos copiado.
Despues tendremos que cambiar los nuemero 480 del width por el numero 0, despues aremos lo mismo al 385 del height.

Entonces despues tendremos que buscar las letras fs que estaran juntas, por autoplay
PD: Hay dos fs, dos 385 y dos 480.
Entonces copiamos el código que hemos modificado, y lo pegamos en un código html.

Y finalmente guardamos los canvios.

Cómo hacer un gráfico de quesitoen Excel

18 agosto 2010 0 comentarios
Vamos a hacer un gráfico muy sencillo con Microsoft Excel. Por ejemplo tenemos los porcentajes de votos de unas elecciones
  • Partido Pro-Emule: 50%
  • Comisiones BitTorrenteras: 35%
  • Organización Soulseekera: 15%
En un hoja nueva pegas los datos de la siguiente forma: en una columna los nombres de la categoría y en la contigua los datos. Una vez hecho esto, selecciona las 6 celdas haciendo click en la primera (A1) y arrastrando hasta la última (B3) en diagonal de forma que te queden todas como en la imagen:
ScreenShot132.jpg
A continuación haz click en Insertar/Gráfico . Selecciona el que te guste, en nuestro caso cogeremos el circular y en Subtipo el que tiene efecto 3D:
ScreenShot133_1.jpg
En el paso siguiente tenemos que introducir el rango de datos, es decir las celdas que contienen la información. Si las hemos seleccionado antes de introducir el gráfico ahora no tendremos que hacer nada, ya nos debería salir el rango y el gráfico formado. Sino, tendremos que seleccionas las celdas en este momento:
ScreenShot134.jpg
(click para ampliar)
En el paso 3 podemos configurar pequeñas cosas como ponerle título al gráfico, colocar la leyenda en un lugar distinto o que encima de los sectores aparezcan los porcentajes. Te recomiendo que pruebes a cambiar todas las opciones para ver cuál te gusta más:
ScreenShot135_1.jpg
En el último paso podemos pedirle que inserte el gráfico en la hoja de excel actual (donde los datos) o en un hoja nueva. En ambos casos podremos copiar y pegar la imagen a otros lugares como por ejemplo un documento de Word haciendo click sobre ella y pulsando Ctrl + C para copiarla y Ctrl + V en donde queramos pegarla.
ScreenShot136_1.jpg
La única dificultad del proceso puede ser introducir el rango de datos, por ello asegúrate de que seleccionas bien todas las celdas implicadas en el gráfico. También al final del proceso podemos hacer click en algunas partes del gráfico como por ejemplo la leyenda y ampliarla si consideramos que queda muy pequeña.


ScreenShot137.jpg

Infotmación gracias a Blogoff

Como poner un mensaje Flash

17 junio 2010 2 comentarios
Hoy os enseñaremos como poner un mensaje Flash, primero entramos en esta web: http://www.flashvortex.com/texts.php
Y elegimos cualquiera de los textos que queramos hay una gran variedad.
Y le damos debaje de la imagen donde pone CLICK HERE TO EDIT THIS
Después se nos abrira otra ventana, hay podremos poner/editar el texto cuando lo tenagemos echo/editado le damos abajo del todo donde dice GENERATE ANIMATION
Se os abrira otra ventana donde saldra el texto, codigo y download, nosotros eligiremos la opción easy [codigo]
copiamos el código, y lo ponemos en un gadget html/javascript.
Os tendria que salir un texto parecido al este, depende del texto que escojas y lo que pongas

Como poner una imagen con...

30 abril 2010 0 comentarios
Hola, hoy os eseñaremos a como poner una imagen en tu blog, con tu ip, el navegador, el sistema operativo que estas usando [SO], y la hora todo eso actualizado.
Para poder hacer eso tendremos que copiar el siguiente código:


<a
href='http://tu-mundo-web.blogspot.com'><img
src='http://generadores.subirimagenes.com/saludadorweb/saludador.php?saludador=0&mensaje=Tu Mundo Web' alt='subir
imagenes' border='0'></a>



Pero canviando la letra que esta en rojo poner el nombre de la web que salga como saludo, nos tendra que salir un tipo de cosa asin:
subir imagenes

Como quitar la barra de Blogger [Navbar]

24 abril 2010 1 comentarios
Blogger te da el servicio de Blog gratis con la simple condición de mostrar una Barra en la parte superior y sin mostrar publicidad. Pero si por cuestiones de estética o gusto quieres quitarla (más bien, ocultarla) te decimos como:

1. Da click en la pestaña “Plantilla” y después en la opción “Edición de HTML”


2. Busca el siguente código:

body
{

3. Justo arriba de él pega el siguiente código de acuerdo a tu versión de Blogger:
  Para el Nuevo blogger:

#navbar-iframe
{

height:0px;

visibility:hidden;

display:none

}

Para el Blogger Beta [Anterior]:

#b-navbar
{

height:0px;

visibility:hidden;

display:none

}

De este forma le damos el atributo de oculto a la Navbar de Blogger y no aparecerá más en nuestro Blog.

Como poner una imagen de Homer en tu Blog con: Deja un comentario

22 abril 2010 7 comentarios
Hola, hoy os enseñaremos a poner un HTML/JAVASCRIPT con la imagen de Homer.
Para eso tenemos que copiar el siguiente código:


<a
style="display:scroll;position:fixed;bottom:0px;right:0px;"
href="http://tu-mundo-web.blogspot.com"/><img
src="http://i252.photobucket.com/albums/hh18/juanjujuy5/homer-comentario.png"
/></a>




Despues con ese códig tendremos que copiarlo en un gadget HTML/JAVASCRIPT:
3-Html-and-javascript

Y ya tendremos nuestro Homer diciendo, Deja un comentario.
Este gadget es muy bueno ya que nos da un toque de personalidad, y ademas te "recuerda" que tienes que dejar un comentario.

Como poner la licencia de Creative Commons

21 abril 2010 1 comentarios
Hola, hoy os enseñaremos a como poner la licencia de Creative Commons. [No tienes que pagar]
Para poder lucir de una licencia de Creative Commons en tu blog, para eso tienes que seguir estos sencillos pasos:

1- Entramos en http://creativecommons.org/licenses/
2- Elegimos la licencia que deseamos.
3- Y se nos abrirá otra ventana, entonces vamos hacia abajo del todo, y le damos click donde dice: Use this license for your own work.

4- Entonces nos darán un código, lo configuramos y copiamos el código en un gadget HTML/JAVASCRIPT

Y nos saldrá algo parecido a esto:
Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.

Como poner barra de traducción "cool"

16 abril 2010 4 comentarios
¿Ha hecho traducir los widgets para facilitar a una persona que está visitando su sitio web para leer el artículo que usted tiene y se traducen en un idioma que comprenda. Si usted nunca ha hecho traducir los widgets bloggers a continuación voy a dar un simple puntas y ser capaz de ayudarle a traducir el lenguaje en muchos widget blogger. Esta es una manera simple que puede ayudarle porque muchas personas son muy difíciles de traducir un artículo interesante, y los visitantes de su sitio no puede confundirse traducir proporcionan una manera sencilla de traducir en el widget de blogger. Y el código que debe agregar es:

1. Paso uno Haga clic en HTML y JavaScript Widget
3-Html-and-javascript

2. Agregue el código existente por debajo en el código HTML y Javascript widget

</div>

<div>

<span class="Apple-style-span" style="border-collapse: collapse;
font-family: Consolas,'Bitstream Vera Sans Mono','Courier
New',Courier,monospace; font-size: 13px; line-height:
14px;"><code class="plain" style="background-image: none !
important; border-width: 0px ! important; bottom: auto ! important;
color: rgb(0, 0, 0) ! important; direction: ltr ! important; display:
inline ! important; float: none ! important; font-family:
Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace !
important; font-size: 1em ! important; font-style: normal ! important;
font-weight: normal ! important; height: auto ! important; left: auto !
important; line-height: 1.1em ! important; margin: 0px ! important;
outline-width: 0px ! important; padding: 0px ! important; position:
static ! important; right: auto ! important; text-align: left !
important; top: auto ! important; vertical-align: baseline ! important;
width: auto ! important;"></code></span>

<ul><code><style>

</code> </ul>

<ul><code>.google_translate img {
filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; }
.google_translate:hover img { filter:alpha(opacity=30); -moz-opacity:
0.30; opacity: 0.30; border:0; } .google_translatextra:hover img {
filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30;
border:0; }    </style></code><span
class="Apple-style-span" style="border-collapse: collapse; font-family:
Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace;
font-size: 13px; line-height: 14px;"> </span></ul>

<ul><code></code>

<div>

</div>

</ul>

<ul><code><a&nbsp;></a&nbsp;></code><code
class="keyword" style="background-image: none ! important;
border-width: 0px ! important; bottom: auto ! important; color: rgb(0,
102, 153) ! important; direction: ltr ! important; display: inline !
important; float: none ! important; font-family: Consolas,'Bitstream
Vera Sans Mono','Courier New',Courier,monospace ! important; font-size:
1em ! important; font-style: normal ! important; font-weight: bold !
important; height: auto ! important; left: auto ! important;
line-height: 1.1em ! important; margin: 0px ! important; outline-width:
0px ! important; padding: 0px ! important; position: static !
important; right: auto ! important; text-align: left ! important; top:
auto ! important; vertical-align: baseline ! important; width: auto !
important;"><span style="font-family: Consolas,'Bitstream Vera
Sans Mono','Courier New',Courier,monospace;"><style>

.google_translate img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

border:0;

}

.google_translate:hover img {

filter:alpha(opacity=30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

.google_translatextra:hover img {

filter:alpha(opacity=0.30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

</style>  </span></code>

<div>

<span style="font-family: Consolas,'Bitstream Vera Sans
Mono','Courier New',Courier,monospace;"><a
class="google_translate"
href="http://draft.blogger.com/post-edit.g?blogID=3948298862693133772&amp;postID=2247873290634284473#"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=auto%7Cen&amp;hl=en');
return false;" rel="nofollow" target="_blank"
title="English"><img align="absbottom" alt="English" border="0"
height="24"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg91qDkxwuP1DCzW4wRYFx7jbi41lXJWPAHTWFlFUYifgzaX2czZDhE37mDiUTQZBgDB4Kjn_G1lAn5wy_rCDW7R9vz49E4y9cl1u5UyN3zBBv6THPu2Go4n6r-XpLZ3w1mUtv5Utqykk8/s200/United+Kingdom%28Great+Britain%29.png"
style="cursor: pointer; margin-right: 8px;" title="English" width="24"
/></a>  <a class="google_translate"
href="http://draft.blogger.com/post-edit.g?blogID=3948298862693133772&amp;postID=2247873290634284473#"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=auto%7Cfr&amp;hl=en');
return false;" rel="nofollow" target="_blank" title="French"><img
align="absbottom" alt="French" border="0" height="24"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUYXaJ-SpzDvFPeBcPmyIY-y_7o8Re4CtMS4Dz3zmr-RIMQYN-2dYlEkxW6LNO2QTn-IJSzAuw0TXXwcO8n2ewCObhyphenhyphenxo9oZXRSpc9bjHDvadmKk3anm33Xf8zumbvadvEprMuTPUJ0d8/s200/France.png"
style="cursor: pointer; margin-right: 8px;" title="French" width="24"
/></a>  <a class="google_translate"
href="http://draft.blogger.com/post-edit.g?blogID=3948298862693133772&amp;postID=2247873290634284473#"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=auto%7Cde&amp;hl=en');
return false;" rel="nofollow" target="_blank" title="German"><img
align="absbottom" alt="German" border="0" height="24"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkUCmiy9h1jUzpTj-NYmrrezlh6mxJiLsvFr7lIJvpuBIGZRvhU8abRQ_lcjp6Kwpq6btD6qRQoUYA-mU7MBBiIPayh6-QTGFktxtUcB2vjuJnEiH1wdBiphAqN7Ap_7yhHZohHwZiok/s200/Germany.png"
style="cursor: pointer; margin-right: 8px;" title="German" width="24"
/></a>  <a class="google_translate"
href="http://draft.blogger.com/post-edit.g?blogID=3948298862693133772&amp;postID=2247873290634284473#"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=auto%7Ces&amp;hl=en');
return false;" rel="nofollow" target="_blank" title="Spain"><img
align="absbottom" alt="Spain" border="0" height="24"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZMUqRw5xsPgCSKXjgbGXEv2vKnLXarRmR5nS-xNgX5Ur4oz_GU35eWIuI1xFqIiI6xCgxq5Bq8slzRCDYnt0Ju8n_40QDx5-HodB42XDjAdy43YatX7fNbt-luafhyTS3RylmMnNkBVY/s200/Spain.png"
style="cursor: pointer; margin-right: 8px;" title="Spain" width="24"
/></a>  <a class="google_translate"
href="http://draft.blogger.com/post-edit.g?blogID=3948298862693133772&amp;postID=2247873290634284473#"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=auto%7Cit&amp;hl=en');
return false;" rel="nofollow" target="_blank"
title="Italian"><img align="absbottom" alt="Italian" border="0"
height="24"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh84vCxeEbVT7p7edFEg586-zP4_96Oa17MiUGRukdTYOXEj6dRAgUh21waj5Xt-zJtRap2a_5B7Ls6twB9VGhxNwbrCo1zxQ7Ifrvl23Tobo5bBFm8ngGEIUxzswOpfJ0_wHrnArKINZg/s200/Italy.png"
style="cursor: pointer; margin-right: 8px;" title="Italian" width="24"
/></a>  <a class="google_translate"
href="http://draft.blogger.com/post-edit.g?blogID=3948298862693133772&amp;postID=2247873290634284473#"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=auto%7Cnl&amp;hl=en');
return false;" rel="nofollow" target="_blank" title="Dutch"><img
align="absbottom" alt="Dutch" border="0" height="24"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnsB-dGf4pKVdNkd4uIRf-TnC4KsRmn-ED6vq-K56S0eZnPzFnxsdXOub9Uqb_mKRuPeBtoToNMHTO92qv5uDkm7hUUTTPhXicbjNeY2Qiyy0BxQmbntyW39kltP5p94MQA0TeRbBJKVQ/s200/Netherlands.png"
style="cursor: pointer; margin-right: 8px;" title="Dutch" width="24"
/></a> <a class="google_translate"
href="http://draft.blogger.com/post-edit.g?blogID=3948298862693133772&amp;postID=2247873290634284473#"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=auto%7Cru&amp;hl=en');
return false;" rel="nofollow" target="_blank"
title="Russian"><img align="absbottom" alt="Russian" border="0"
height="24"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZBrfKslHlQfb8UgMCbPgzRPT56D8D3GwMFElqSwx0YFf0kkno2bTsTWesAfhkJhuof5sWBC0vRArhKmGFAYPmM8DAyQGsrufn88T3LWaYabFfmkFTGKF1_NWeLQB-E-qczMaeOej8Xr8/s200/Russian+Federation.png"
style="cursor: pointer; margin-right: 8px;" title="Russian" width="24"
/></a>  <a class="google_translate"
href="http://draft.blogger.com/post-edit.g?blogID=3948298862693133772&amp;postID=2247873290634284473#"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=auto%7Cpt&amp;hl=en');
return false;" rel="nofollow" target="_blank"
title="Portuguese"><img align="absbottom" alt="Portuguese"
border="0" height="24"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis-Zrv8a3pyxyPjMqJqFa2xlC_OzuAh4doB3_93G17qy-ThJgVgZOwnhttlzyLuedqcoyIe2AgX_j9q4tYiu8xKmvNlFysJJuCyQlqYk4dbvVQRwHaEd6hzSDl_LwSqY_DiDjkQRfR_2g/s200/Brazil.png"
style="cursor: pointer; margin-right: 8px;" title="Portuguese"
width="24" /></a>  <a class="google_translate"
href="http://draft.blogger.com/post-edit.g?blogID=3948298862693133772&amp;postID=2247873290634284473#"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=auto%7Cja&amp;hl=en');
return false;" rel="nofollow" target="_blank"
title="Japanese"><img align="absbottom" alt="Japanese" border="0"
height="24"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBkIIiYLUGsdJr3FjkHP3dFj9UWfQSnXldMHEvX6WBgrkoBWydn9b_nkI9OJF_krY3yHexwJgsMdQH_DW43VFhj5la8mb1a4nckpiasbzxZMXW3UuIbXA35T5wdNqmoLeIvoYOdWK5cLI/s200/Japan.png"
style="cursor: pointer; margin-right: 8px;" title="Japanese" width="24"
/></a>  <a class="google_translate"
href="http://draft.blogger.com/post-edit.g?blogID=3948298862693133772&amp;postID=2247873290634284473#"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=auto%7Cko&amp;hl=en');
return false;" rel="nofollow" target="_blank" title="Korean"><img
align="absbottom" alt="Korean" border="0" height="24"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNBDYITOLODsSD-KOXVQdEojVPJ0rFMOpgWHsdQB7HpE9Hl8Zc1O4F6qL5FXsZw5TKejFbtbahwEmV-PsvsHLXjcqq9F71F1ceKuEo3yJhOSA9IHZxnfb9ru9tiuMR-0tPR3ES5nhRhPU/s200/South+Korea.png"
style="cursor: pointer; margin-right: 8px;" title="Korean" width="24"
/></a>  <a class="google_translate"
href="http://draft.blogger.com/post-edit.g?blogID=3948298862693133772&amp;postID=2247873290634284473#"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=auto%7Car&amp;hl=en');
return false;" rel="nofollow" target="_blank" title="Arabic"><img
align="absbottom" alt="Arabic" border="0" height="24"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjfmQe64hPD42x2ZUuSzlpg58Ls65wY9ru8UhnbVbOfxFVlHvfXRimm003tH1yJfvGhzUOvH_MlemRnPGpyUqfH_9IwnVPjN5yRDQYJSKjvXgYJp4bukKCkhn9gezBEeFycV8v8ac3fk4/s200/Saudi+Arabia.png"
style="cursor: pointer; margin-right: 8px;" title="Arabic" width="24"
/></a>  <a class="google_translate"
href="http://draft.blogger.com/post-edit.g?blogID=3948298862693133772&amp;postID=2247873290634284473#"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=auto%7Czh-CN&amp;hl=en');
return false;" rel="nofollow" target="_blank" title="Chinese
Simplified"><img align="absbottom" alt="Chinese Simplified"
border="0" height="24"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv82PQukQ_5y6e7Y6i6vCqVZ24BAQvDGUiohaa6O7M7ieXoW7ZI-rvfbsYp8eF1GF1BC8g8nfbe5P28u8vbfBroWmuW2HdJBDZA1nZyw002POoBlLtk09eAokL7nWZHWr_WItHQKVv_CY/s200/China.png"
style="cursor: pointer; margin-right: 8px;" title="Chinese Simplified"
width="24" /></a> </span></div>

<div 0px="" 0pxâ??="" 3px="" style="margin: 8px;">

</div>

<span style="font-family: Consolas,'Bitstream Vera Sans
Mono','Courier New',Courier,monospace;"><a
href="http://www.bloggerarticle.com/" linkindex="15">this widget by
www.AllBlogTools.com</a></span></ul>

</div>

<ul><code class="plain" style="background-image: none !
important; border-width: 0px ! important; bottom: auto ! important;
color: rgb(0, 0, 0) ! important; direction: ltr ! important; display:
inline ! important; float: none ! important; font-family:
Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace !
important; font-size: 1em ! important; font-style: normal ! important;
font-weight: normal ! important; height: auto ! important; left: auto !
important; line-height: 1.1em ! important; margin: 0px ! important;
outline-width: 0px ! important; padding: 0px ! important; position:
static ! important; right: auto ! important; text-align: left !
important; top: auto ! important; vertical-align: baseline ! important;
width: auto ! important;"></code> </ul>

<code></code>



<div style="text-align: left;">

<span class="Apple-style-span" style="font-family:
Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace;
font-size: small;"><span class="Apple-style-span"
style="border-collapse: collapse; font-size: 13px; line-height:
14px;">

</span></span></div>

<div style="text-align: left;">

<span class="Apple-style-span" style="font-family:
Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace;
font-size: small;"><span class="Apple-style-span"
style="border-collapse: collapse; font-size: 13px; line-height:
14px;">

</span></span></div>

<div style="text-align: left;">

<code class="plain" style="background-image: none ! important;
border-width: 0px ! important; bottom: auto ! important; color: rgb(0,
0, 0) ! important; direction: ltr ! important; display: inline !
important; float: none ! important; font-style: normal ! important;
font-weight: normal ! important; height: auto ! important; left: auto !
important; margin: 0px ! important; outline-width: 0px ! important;
padding: 0px ! important; position: static ! important; right: auto !
important; text-align: left ! important; top: auto ! important;
vertical-align: baseline ! important; width: auto !
important;"></code><span class="Apple-style-span"
style="font-family: Consolas,'Bitstream Vera Sans Mono','Courier
New',Courier,monospace; font-size: small;"><span
class="Apple-style-span" style="border-collapse: collapse; font-size:
13px; line-height: 14px;">

Seria algo parecido al que tenemos en nuestro blog.

Como poner tu dominio Blogspot.com en .tk

15 abril 2010 3 comentarios
Hola, hoy os enseñaremos como pasar vuestro dominio.blogspot.com a dominio.tk.
Para poder conseguir esto tenéis que seguir estos sencillos pasos:

1. Entran en http://www.dot.tk/es/index.html?lang=es
2. Escriben su URL completamente, con http://
3. Se les abrirá otra ventana y pones los campos que sean necesarios.

Metodo Dominio gratuito anónimo


Ya tendras tu dominio .tk por ejemplo si tenias tudominio.blogspot.com se pasara a tudominio.tk
Pero este dominio gratuito y anonimo no durara toda la vida nada mas durara 30 dias.

Método Dominio gratuito registrado


Después de a verle dado a continuar con la opción dominio gratuito registrado, se te abrirá otra ventana que tendrás que registrarte, después de a verte registrado tendrás tu dominio .tk para toda la vida.

AVENTAJAS


No tendrás tu dominio tan largo.
Saldrá el mismo contenido que tenga la URL que hayas registrado

DESVENTAJAS


El icono de la barra de navegación, no sera mu vistoso.
Para poder publicar algo tendrás que hacerlo desde blogger o otro sitio.

NOTA: el dominio de .tk nada mas podrás visualizar el contenido de la URL que hayas dado.


Ejemplo
http://www.tumundoweb.tk

Cómo escribir un articulo de blog

13 abril 2010 0 comentarios

Los artículos o posts que publicamos en un blog o bitácora responden a un impulso muy personal, y por tanto no se puede decir que tengan unas características especiales que los diferencien de otros tipos de escritura. Al fin y al cabo, un blog es un cuaderno en el que cada cual escribe como quiere. Sin embargo, para empezar a escribir en una bitácora puede ser conveniente apuntar algunas ideas que nos ayuden en esta tarea, sin olvidar nunca que la escritura de blogs, como la de los libros convencionales, supone la expresión de la personalidad y de la creatividad de quien escribe. En un blog se puede escribir de todo, pero siempre conviene conocer y tener presente una mínima estructura que después personalizaremos a nuestro gusto.

1. Qué escribir en un blog

¿Qué es un blog? Un blog o bitácora es un nuevo medio de publicación en la web que se caracteriza por los siguientes rasgos básicos:
  1. El contenido se incluye en el blog mediante un formulario desde la Administración, que es la parte privada del blog.
  2. Este contenido puede incorporar imágenes, elementos multimedia o enlaces a otros blogs.
  3. Los artículos se ven en la bitácora uno debajo de otro en orden cronológico inverso.
  4. Los artículos están divididos en categorías o secciones, y etiquetas.
  5. Se incluyen comentarios realizados por los lectores.
  6. Los artículos y los comentarios se distribuyen fuera del blog en canales de información mediante la tecnología RSS u otras parecidas.
Un blog educativo o edublog es el blog personal que elabora un docente, e incluyecontenido educativo. Un blog de aula suele incluir actividades educativas pensadas para estudiantes, y éstos participan activamente como usuarios del blog. Para saber más, podemos leer el artículo "Para qué sirve un blog de aula" o mi artículo "La experiencia del blog de aula".
Un artículo de blog se caracteriza por incluir al menos uno de estos tres tipos de contenidos:
  1. Información —. Quizá sea la información el contenido más buscado en la Red, por eso abundan los blogs que sólo incluyen este tipo de contenido. La información se ofrece generalmente en forma de noticia, pero también se puede completar con unainvestigación sobre la base de la noticia.
  2. Experiencia —. No siempre se ofrece la experiencia personal que se tiene respecto al contenido de un artículo de blog, sea o no sea una noticia, pero creo que resulta importante para la credibilidad del contenido, pues la experiencia ayuda siempre a matizar ese contenido.
  3. Opinión —. Tanto la experiencia como la opinión que tenemos de un contenido fomentan el aspecto personal de un blog, que es una de sus características distintivas. Deberíamos expresar simpre nuestra opinión sobre un asunto, por muy complicado que parezca, pues no sólo los expertos tienen derecho a ello.
Con estos tipos de contenido se pueden hacer muchas cosas, pero no cualquier cosa. Por ejemplo, nadie publicaría una tesis doctoral en un blog. Entonces, en un blog tienen cabida todos los contenidos que cumplan con los siguientes requisitos:
  1. Una publicación fragmentada. Por tanto, los textos tienen que ser de extensión reducida y de pretensiones limitadas. Cada artículo forma parte de un todo, que es el blog.
  2. Una publicación frecuente, pues la lectura de un blog se realiza de forma rápida y su fragmentación pide esa frecuencia.
  3. Un tono coloquial y poco académico, con un lenguaje apropiado a esa característica personal que tiene todo blog.

2. Los miedos de los principiantes

Los principiantes que se disponen a escribir su blog suelen tener algunos miedos muy lógicos a lo hay que enfrentarse desde el principio. Estos miedos, entre otros, pueden ser los siguientes:
  1. No saber qué decir —. No se puede forzar el cerebro para encontrar un asunto importante del que escribir, pero los tres tipos de contenido que hemos analizado nos pueden ayudar a encontrar temas y asuntos que nos interesen. Por lo general, hay que inspirarse en las noticias que leemos en otros blogs o esperar que nuestras propias necesidades nos obliguen a investigar sobre cualquier asunto.
  2. Miedo a opinar —. Es muy normal el miedo a opinar sobre lo que escribimos, pensando que hay que saber mucho para atrevernos a ello. Pero la opinión que damos en nuestro blog es personal; no es la opinión de un consejero ni de un experto, y como tal hay que aceptarla. Cuando damos nuestra opinión sobre un asunto, tenemos el derecho a equivocarnos, y los lectores siempre pueden corregirnos, que para eso están.
  3. Miedo al qué dirán —. Tarde o temprano tenemos que madurar como personas y perder el miedo a ser como somos. Escribir un blog es una buena forma deincrementar nuestra autoestima y de demostrar a los demás que nuestro cerebro no está vacío si se escarba bien.
  4. Miedo a no saber expresarse —. Éste es un miedo muy realista, y suele ser cierto que tenemos que mejorar nuestra forma de escribir, pero una forma de hacerlo es escribir un blog, porque la práctica es la que más y mejor nos enseña.
Sobre este asunto, he escrito el artículo Los temores del bloguero, donde profundizo un poco más en estos miedos.

3. Estructura de un artículo de blog

Aquí presento una estructura mínima para un artículo de blog, sabiendo que quien lo escribe tiene el deber de personalizarlo a su gusto.
  1. El título —. Nos olvidamos muchas veces de que el título de un artículo es fundamental, y debería tener las siguientes características:
    • Tiene que atraer la atención del que lee. Para ello, el texto del título ha de ser original, aunque nunca se debe abusar de la originalidad. Se debería evitar incluir frases hechas que sean demasiado conocidas o expresiones demasiado coloquiales o bruscas.
    • Tiene que informar del contenido del artículo, porque no podemos hacer perder el tiempo a quien no le interese lo que escribimos.
    • Debe ser breve pero completo; es decir, tenemos que conseguir resumir el contenido del artículo en el menor número de palabras, pero sin que esto suponga una obsesión.
  2. La introducción —. Tan importante como el título es la introducción del artículo, que suele ser el primer párrafo, en el que deberíamos incluir lo siguiente:
    • La noticia o el asunto principal de que trata el artículo de forma resumida y atractiva.
    • El origen de la noticia, que puede ser la lectura de otro artículo o la reflexión originada por otras circunstancias o lecturas.
    • Nuestra opinión, o al menos un indicio de cómo vamos a tratar el contenido: de manera formal o irónica o académica, entre otras posturas personales.
  3. El desarrollo del contenido —. Los siguientes párrafos del artículo deberían desarrollar algunos de los tres tipos de contenido que hemos tratado en el primer apartado, incluyendo cada uno de ellos en un párrafo aparte siempre que esto beneficie la claridad y la comprensión.
  4. La conclusión —. Para terminar el artículo, debemos escribir un párrafo que resuma el contenido del artículo y que deje clara nuestra opinión al respecto. También podríamos abrir el asunto a otras perspectivas relacionadas con él y que sólo apuntamos a modo de indicación.
  5. Los enlaces de interés —. Conviene siempre facilitar la lectura de otros artículos o páginas que tengan que ver son el asunto tratado, y así profundizar en los conocimientos. Los enlaces, además, son una forma de agradecer a otras personas que hayan despertado nuestro interés o ampliado nuestra información con su trabajo.

4. Elementos que se pueden incluir en un artículo

Aparte del texto mismo, que suele ser lo más importante de un artículo de blog, se pueden incluir otros elementos que contribuyan a ilustrar o a ampliar el contenido.
4.1. Los enlaces
Los enlaces sirven generalmente para ampliar la información dirigiendo al lector a otra página o documento, o para indicar la procedencia de dicha información. Hay dos tipos principales de enlaces:
  1. Los que se incluyen en el flujo del texto y están subrayados para que se sepa que son enlaces.
  2. Los que se colocan fuera del texto principal, generalmente al final en una sección aparte. A estos enlaces se los suele llamar enlaces de interés o relacionados.
Los enlaces se suelen utilizar para los siguientes objetivos:
  1. Ampliar la información que ofrecemos.
  2. Confirmar la información dada con otros documentos publicados en la Red.
  3. Definir términos que pueden resultar difíciles de comprender.
En los enlaces hay que indicar principalmente tres elementos:
  1. El texto del enlace, que es el texto que aparecerá enlazado y por lo general subrayado, aunque en muchos blogs los enlaces aparecen en negrita y con un color distinto al del texto normal. Por ejemplo: Google.
  2. La ruta del enlace, es decir, la dirección o URL del documento que se quiere enlazar. Por ejemplo: http://www.google.es.
  3. El título del enlace, es decir, una descripción del enlace, que se verá en un marco de texto coloreado cuando se coloque el cursor del ratón encima del enlace. Por ejemplo: "Buscador web".
En Blogger se puede incluir la ruta del enlace cuando hacemos clic en el icono de enlaces después de haber subrayado el texto que queremos enlazar. Pero sólo podemos incluir la descripción desde el código fuente si hacemos clic en la pestaña de Edición de HTML. Nosotros lo hemos hecho, y el código HTML de este enlace queda así:
Google
Aquí vemos la etiqueta  de apertura y de cierre, entre las que tiene que estar el texto del enlace. El atributo href, que se incluye dentro de la etiqueta de apertura, contiene la ruta del enlace. Y el atributo title contiene la descripción.
4.2. Las imágenes
Las imágenes son importantes en un artículo de blog por los siguientes motivos:
  1. Ilustran el contenido del artículo y ayudan a su comprensión. Por tanto, nunca tienen que ser accesorias o responder a un simple capricho.
  2. Pueden incluirse iconos o imágenes de tamaño reducido cuando sirvan para relajar la vista si hay mucho texto o para ofrecer una cierta ordenación visual del contenido.
En Blogger resulta sencillo incluir una imagen. Para ello, hacemos clic en el icono de "Añadir imagen", y entonces aparece una ventana emergente como la de la siguiente imagen:


Con este formulario, tenemos las siguientes opciones:
  1. Añadir una imagen desde su equipo —. En este caso, tenemos que pulsar el botónExaminar y buscar la imagen en nuestro ordenador.
  2. Añadir una imagen de la web —. En este caso, hay que escribir la URL completa de una imagen que esté guardada en un servidor web al que tengamos acceso.
  3. Elija un diseño —. Aquí decidiremos si queremos que la imagen se coloque a la izquierda o la derecha de un párrafo, o bien quede centrada sin texto alrededor.
  4. Tamaño de la imagen —. La imagen que elijamos tendrá el tamaño que queramos según las tres posibilidades que aparecen. La imagen además estará enlazada para que se pueda ver en una ventana aparte.
Blogger incluye un código muy confuso en las imágenes, pero si se quiere conocer la etiqueta HTML para las imágenes y sus atributos más utilizados con el fin de incluirlos desde el código fuente, aquí están:
  1. La etiqueta de imagen es que es de las pocas que no tienen su correspondiente etiqueta de cierre.
  2. Como atributos más utilizados tenemos los siguientes:
    • src, que incluye la ruta de la imagen.
    • alt, que incluye un texto alternativo para definir la imagen. Por ejemplo: "Mi familia", si hemos incluido una foto de nuestra familia.
    • title, que incluye una descripción de la imagen, y que viene a ser parecido al anterior atributo.
    • border, si queremos que la imagen tenga un borde medido en píxeles.
    • align, siq queremos colacar la imagen a la izquierda (left) o a la derecha (right) de un párrafo.
Así quedaría una imagen colocada a la izquierda de un párrafo:
Mi familia
4.2. La multimedia
Los vídeos, los podcasts y otros elementos multimedia han adquirido un gran auge en la Red y son ahora muchos los blogs que los incluyen en sus artículos. Este atractivo apartado lo podemos ver en dos artículos publicados en este blog:
  1. "Vídeos en Blogger".
  2. "Los elementos multimedia en el blog".

5. El diseño del contenido

Un asunto importante y a menudo olvidado es el diseño del contenido. El diseño web se preocupa de que los elementos que componen el diseño de un artículo o de un blog colaboren al objetivo que se persigue, en este caso con un blog. Estos objetivos no pueden ser otros que los siguientes:
  1. Sencillez y claridad visual de todo el contenido, sobre todo del texto, que es lo que cuenta en un blog por regla general. Para conseguir esto se deben tener en cuenta las siguientes normas:
    • El tipo de letra debe tener un tamaño legible, ni muy grande ni muy pequeño. Resulta sorprendente la cantidad de blogs que utilizan un tamaño muy reducido en los tipos de letra, sacrificando así una de las normas básicas para la comprensión de un texto.
    • El interlineado debe ser generoso. Es decir, la separación entre líneas debe ser amplia para que se pueda leer sin dificultad.
    • La longitud de las líneas de texto no debe ser muy amplia ni muy reducida, pues en ambos casos el texto se lee peor.
    • No se debe justificar el texto. El texto justificado a derecha e izquierda, como en los libros o en los periódicos, es factible en esos medios porque se pueden separar las sílabas al final de línea, pero eso no se puede hacer en la Web, y por tanto a veces quedan huecos en blanco muy amplios entre las palabras, lo que perturba la lectura.
    • Las imágenes no deben interrumpir la lectura ni ocupar gran parte del párrafo, dejando poco espacio para el texto.
  2. División visual del contenido de modo que queden espacios en blanco que permitan descansar a la vista. Esto se consigue introduciendo los siguientes elementos:
    • División del texto en párrafos homogéneos y no muy extensos.
    • Introducción de listas numeradas y de viñetas siempre que haya una cantidad suficiente de ítems.
    • Separación del texto en secciones tituladas y numeradas si es preciso, que tengan títulos bien visibles. No es aconsejable utilizar las mayúsculas para los títulos, sino una letra de mayor tamaño.
    • Las frases deben ser escuetas y cortas, y el lenguaje preciso y sin adornos innecesarios.
    • Resulta muy útil destacar frases importantes con letra negrita o cursiva, pero nunca subrayándolas, pues pueden confundirse con los enlaces.
Estos aspectos visuales se pueden cambiar en el código de la plantilla, pero en caso de que no se sepa hacer, hay que elegir una plantilla que se acerque a estos planteamientos visuales. Como ejemplo, aquí muestro las primeras líneas de este artículo en dos imágenes que se corresponden con dos plantillas de Blogger. La diferencia es evidente:

He escrito otro artículo en este blog donde profundizo un poco más en el tema, "Diseño y elección de la plantilla en Blogger", y algunos más específicos y técnicos con la etiquetadiseño web.

6. Herramientas para empezar a trabajar.

Los blogs se fundamentan en el conocimiento y la comunicación en la Red, y para ello es necesaria la lectura habitual de textos publicados en la Web. La herramienta imprescindible es un buen buscador que nos ayude a encontrar lo que deseamos. Googlepasa por ser el mejor, pero también Yahoo tiene un buscador muy aceptable.

Pero también necesitamos un lugar donde guardar las direcciones de las páginas y documentos que nos interesan. Los navegadores tienen ya sus favoritos o marcadores, pero resulta más práctico tener un espacio en la Web donde guardar esos marcadores y poder utilizarlos desde cualquier ordenador. La mejor herramienta para ello es del.icio.us, que conviene conocer y utilizar.

7. Actividad. Escribir un artículo con imagen.

Ahora vais a escribir un artículo de blog siguiendo los consejos de esta guía. Para que tengáis una perspectiva mayor, podéis ir al Planeta educativo, donde muchos docentes agregan sus blogs. Allí veréis ejemplos de distintos tipos de artículos.

Elegid un asunto que os interese y escribid un artículo breve pero completo. Podéis elegir fotografías u otras imágenes gratuitas de las siguientes páginas webs:
He escrito un artículo de ejemplo titulado "Cuida la corrección lingüística en tu blog". Podéis leerlo antes de escribir el vuestro.

Como poner un Contador de visitas en tu blog

12 abril 2010 0 comentarios
Muchos de ustedes ya saben como poner un contador de visitas en tu web o blog, pero otros muchos no, este tutorial lo hago para los que no lo saben y para los que si también.
Para tener tu Contador de visitas, tienes que seguir estos sencillos pasos.

1. Entras en esta web: http://es.99counters.com/
2. Te registras.
3. Le dan a crear contador
4. Lo configuran a su gusto
5. Copian el texto que pone: Javascript fijado
6. Y lo copian en un gadget HTML/JAVASCRIPT


Os saldrá un tipo de Contador de Visitas parecido a este, depende de la configuración que hagas elegido.

Como tener una estantería 3D

0 comentarios
Para tener una estantería en 3d en tu web o blog tienes que entrar en http://www.shelfari.com/WidgetAdd
y seguir estos 4 pasos.

Primer paso: añadir libros a su plataforma

Construya su plataforma mediante la búsqueda Shelfari, o importar su lista de libros desde un archivo o página web. Y le damos en CUSTOMIZE YOUR WIDGET

Paso dos: Personaliza tu Widget

Personaliza tu widget a la mirada que mejor se adapte a su sitio web o su estilo personal. Cambie las configuraciones de abajo o simplemente sáltese este paso. Desde hay podras hacer el tamaño mas grande, el color, el tipo de estantería, etc...

Y le dan en SAVE AND CONTINUE


Para poderlo guardar necesitaras registrarte, rellenen los campos y se registran
Paso tres: Poner el gadget
Por ultimo nos dara un codigo, ese codigo lo tenemos que poner en un gadget HTML/JAVASCRIPT y ya tendremos nuestra estanteria 3D


EJEMPLO:

Shelfari: Book reviews on your book blog