Ayuda para el Blog®

Entradas relacionadas con imagen (2) -84-

2010-03-03T16:18:00.002-05:00

LinkWithin es un servicio web que permite a través de un widget enlazar con post antiguos que guarden relación con el contenido del nuevo artículo publicado, el cual incrementa el número de visitas y el tiempo de permanencia de tus usuarios en tu blog.
El widget dispone de la imagen en miniatura que contenga el artículo, es gratuito y sencillo de instalar.

1. Accedemos a la página de LinkWithin y a la derecha veremos el formulario para obtener el Widget, en donde tenemos:
- Introducir un correo electrónico
- La url del blog donde vamos a colocar el Gadget.
- En que plataforma esta el blog, es decir en donde esta alojado, si en Wordpress, Blogger, Typepad u otros.
- El número de entradas que se muestre, puede ser 3, 4 ó 5.

****Si el blog tiene fondo oscuro en las entradas, marcamos la opción que dice: “My blog has light text on a dark background”, para que el widget se adapte al color de fondo del blog.

- Finalmente click en Get Widget.

Click en la imagen para agrandar

2. En la siguiente página se muestra instrucciones sobre como instalarlo en la plataforma elegida:
Blogger
- Click Install Widget. Si es necesario ingresas a tu blog.
- Seleccionas tu blog, luego Add Widget.
- Para un mejor funcionamiento de este widget, ponerlo debajo de las entradas del blog.
- Finalmente Guardar.

Tener en cuenta:
Este Widget se demora en mostrar, dependiendo del número de entradas que se quiera visualizar.
Por ejemplo: Mostrar 5 entradas.

Wordpress
- Hay que descargar un archivo ZIP y descomprimirlo en una carpeta.

Nota:
1. La frase que lleva el widget en su título “You may also like stories” se cambia automáticamente al español por “Quizás también le interese”, simplemente esperar a que se haga el cambio respectivo. En caso contrario, si queremos poner un texto mucho mejor, editamos el widget y colocamos lo siguiente:

<script>linkwithin_text='El texto aquí:'</script>

2. Podemos hacer que el widget se vea en la parte del blog que nosotros queramos, ya sea arriba o abajo, simplemente colocando esta línea de código:

<div class="linkwithin_div"></div>

3. Si queremos mostrar este widget dentro del post porque utilizamos entradas ampliables -Leer más o Continúa Leyendo-, buscar lo siguiente:
<b:widget id='HTML12' locked='false' title='LinkWithin' type='HTML'> y después agregar lo siguiente (lo que esta de color azul):

<b:widget id='HTML12' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'>

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


<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

** id='HTML12' = Número de Widget.

¿Cómo añadir Entradas Relacionadas a tu blog? (1) -83-

2009-01-03T16:21:00.008-05:00

Entradas Relacionadas.- Muestra una serie de entradas relacionadas con la actual para proveer a los usuarios de otros temas en el blog que podrían interesarles.
El proporcionar una lista de entradas relacionadas tiene como consecuencia el que los usuarios se mantengan más tiempo en tu blog en lugar de tener que recurrir a un buscador para encontrar información sobre un tema que puede ser que ya hayas hablado.

1. Ir a Diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios. Después agregar el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

.related-posts{
float:center;
width:450px;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
background-color:#fff
}
#related-posts .widget h4, .related-posts h4{
font-size: 1.2em;
font-weight: bold;
color: #666666;
font-family: Georgia, "Times New Roman", Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
.related-posts a{
color:#A10000;
}
.related-posts a:hover{
color:#369;
}
.related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:13px;
text-color:#000000;
}
.related-posts ul li{
background:transparent url(http://www.blogblog.com/tictac/tictac_orange.gif) no-repeat 0 6px;
display:block;
list-style-type:none;
margin-bottom: 8px;
padding-left: 15px;
padding-top:0px;
}

** Este código se refiere el estilo de los Post Relacionados o Entradas Relacionadas, el cual se podrá realizar cambios utilizando tu criterio.

2. Agregar el siguiente código entre ]]></b:skin> y </head>. Preferible que lo pegues después de ]]></b:skin>, es decir antes que cualquier otro script que hayas definido después de ]]></b:skin>.

- if (cuantosPosts == 3).- Se refiere a la cantidad máxima a mostrar, es decir que solamente se verán tres entradas.
Puedes cambiarlo por el número de entradas que quieras que se vean

3. Buscar la siguiente sección de código y agregar lo siguiente (lo que esta de color azul):

<p 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:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=10"'
type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span> </p>

4. Finalmente, una vez que han pegado el código anterior, ahora pegar lo siguiente (lo que está con color azul) después de:

<p class='post-footer-line post-footer-line-3'/>
<div class='related-posts'>
<b:if cond='data:blog.pageType == "item"'>
<h4>Entradas Relacionadas</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>

5. Guardar.

¿Como añadir una Lista de Blogs? -82-

2009-01-02T08:37:00.002-05:00

La Lista de Blog mejora la lista de enlaces de nuestros elementos de página, utilizando feeds RSS o Atom para mostrar información actualizada con frecuencia, títulos de posts y resúmenes.
Puedes utilizar la Lista de Blog para poner un listado de los enlaces de tus blogs favoritos en la barra lateral, o utilizarlo para categorizar los blogs que sueles leer.
La Lista de Blog funciona muy bien para cualquier página que tiene feeds RSS o Atom, así que puedes ser creativo: enlaza sitios de noticias, podcasts, Twitter stream, resultados de búsqueda o cualquier otra información con un feed.

» Ir a diseño de la plantilla, luego en Elementos de la página añadimos un Gadget o Widget y seleccionas Lista de Blogs.
- Agregar un título, como por ejemplo: Mis blogs favoritos, los blogs que leo, mi lista de blogs, blogs de tu interés, etc.
- Ordenar alfabéticamente o por última fecha de actualización.
- Mostrar todos los enlaces o esconderlos detrás de un enlace de "Ver todos".

** Para agregar un blog a tu lista puedes hacerlo de 2 maneras:
- Añadir por URL. (http://ayudaparaelblog.blogspot.com)
- Blogs de los que soy asiduo.

Conoce a los "Seguidores" de tu blog -81-

2008-12-04T21:03:00.001-05:00

¿Tienes un blog favorito y deseas que el autor y los lectores conozcan que tú eres un seguidor de su blog?
Pues ahora puedes hacer un seguimiento de los blogs con el widget Seguidores. Incluso puedes estar al tanto de los blogs que sigues a través de la Lista de lectura ubicada bajo la lista de blogs del escritorio.
Seguidores del blog se utiliza para crear una especie de comunidad en el blog, en la cual se encuentran personas que siguen tu blog, es decir que lo leen, pero normalmente no se da.
Por ejemplo, tú lees mi blog y yo leo el tuyo, esto es como decir “comenta en mi blog que yo comentare en el tuyo”, el cual he visto que no siempre sea cierto.
Con esto podrás ver quienes son tus seguidores, seguir así mismo a otros blogs que nos interesan, ver el número de seguidores en nuestro panel y leer las últimas entradas de los blogs que seguimos.

¿Cómo añadir el widget “Seguir” a tu blog?
1. Ir a diseño de la plantilla, luego en Elementos de la página añadimos un Gadget o Widget y seleccionas Seguidores.
2. Después le introduces el título que desees para tu widget Seguir. Una vez hayas elegido el título, haz clic en Guardar, para que se agregue el widget Seguir a tu blog.
Resultado:* Ahora los lectores pueden ir a tu blog y ser Seguidores. Una vez que tus lectores se conviertan en seguidores de tu blog, la imagen del perfil se mostrará en el widget Seguir. Además se mostrará una cuenta acumulativa de tus seguidores junto al nombre del blog en el escritorio.
¿Cómo puedo hacerme seguidor de un blog?
3. Visitar un blog que haya añadido el widget Seguir y hacer clic en el enlace Seguir este blog o en Seguir.
4. Verás una ventana emergente con las opciones para seguirlo de forma pública o anónima.
* Público: Al seguir un blog de forma pública, aparece la imagen de tu perfil y un enlace a tu perfil de Blogger en el widget Seguidores del blog.
* Anónimo: Al seguir un blog de forma anónima, la imagen y el enlace de tu perfil NO se mostrarán en el widget Seguidores del blog.
Finalmente, seleccionar el modo en que deseas seguir el blog y luego haz clic en Follow (Seguir).

5. Cuando te hagas seguidor de un blog, dicho blog también se añadirá a tu Lista de lectura del escritorio de Blogger. Además, puedes hacerte seguidor de cualquier blog o URL (aun si el blog no tiene el widget Seguidores) añadiendo el blog a tu Lista de lectura en el escritorio.

¿Cómo utilizo la Lista de lectura?
6. Con la Lista de lectura, puedes leer las últimas entradas de tus blogs favoritos en el Escritorio.
La Lista de lectura, ubicada bajo la lista de blogs del escritorio, te permite suscribirte a cualquier blog con un feed. Éste se actualizará al instante cada vez que se publique una nueva entrada en cualquier blog de la Lista de lectura.

7. Para añadir un blog a la Lista de lectura tienes que hacer clic en la pestaña Blogs que sigo y luego Añadir.
8. Después, introduce la URL del blog que te gustaría seguir. Puedes añadir tantos blogs como desees haciendo clic en Añadir otro. Una vez que hayas añadido todos tus blogs favoritos, haz clic en Añadir.

* Ahora, cada vez que se actualicen los blogs, se mostrará la última entrada en la Lista de lectura bajo la sección "Elementos".

Paginación en el blog -80-

2008-11-23T19:33:00.002-05:00

La paginación es cualquier tipo de sistema de control que permite al usuario navegar a través de las páginas de resultados de búsqueda, archivos, o cualquier otro tipo de contenidos.
La paginación se encuentra también en algunos blogs, foros de debate y en la web de comics.

1. Ir a diseño de la plantilla, luego en Elementos de la página añadimos un Gadget, seleccionas HTML/Javascript y pegas el siguiente código:

Explicación:
- .showpageArea .- Es el rectángulo donde se va a mostrar la paginación.

- .showpageArea a .- Son los enlaces en general (los números de las páginas y los textos Anterior y Siguiente). Podemos usar cualquier propiedad, como ponerles una imagen y un borde.

- .showpageArea a:hover .- Se refiere al efecto gráfico cuando colocamos el ratón encima de la paginación.

- .showpageNum a y .showpageNum a:hover .- Son los enlaces con los números de las páginas si es que queremos que se vean diferentes.

- .showpage a y .showpage a:hover .- Son los enlaces con los textos si es que - queremos que se vean diferentes.

- .showpagePoint .- Es el texto que se muestra en la página actual, es decir los números.

- var pageCount .- La cantidad de posts que se mostrarán por página.
Si var pageCount=4 entonces se mostraran por pagina 4 artículos publicados.

- var displayPageNum .- La cantidad de páginas listadas.
Si var displayPageNum=1 entonces se listarán 1 más 1 página, serian 2.

2. Finalmente, después de haber pegado el código en un HTML/Javascript necesitas arrastrar el widget y ponerlo debajo de Entradas del blog.
Resultado:

- Por ejemplo, si deseas eliminar Página 1 de 88 entonces tendrías que eliminar el siguiente código que se encuentra casi al final:

html = '<div class="showpageArea"><span style="font-size:10px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Página '+thisNum+' de '+(postNum-1)+': </span>'+html;

Via: Blogger Accessories

¿Cómo insertar el formulario para comentarios en los post? -79-

2008-11-21T15:37:00.001-05:00

Este formulario para comentarios aparecerá al final de cada post y es más conveniente para los lectores porque pueden publicar un comentario rápidamente.

1. Ir a Configuración. Después a Comentarios. De ahí, en donde dice: Ubicación del formulario de comentarios, escogemos la siguiente opción:

* No te olvides que tienes que Guardar valores.

2. Finalmente vas a tu blog y verás el siguiente resultado:

Click en las imagenes para agrandarla

¿Cómo mostrar los comentarios numerados? -78-

2008-08-23T13:48:00.001-05:00

1. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantilla de artilugios, agregar el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para eliminarlo.

.CommentIndex{
float:right;
position:relative;top:25px;left:3px;
margin-left:-200px;
font: italic bold 30pt 'Century Gothic','Trebuchet MS';
color:red;
opacity:0.3;
-moz-opacity:0.3;
filter:alpha(Opacity=30);
}

.CommentIndex:hover{
font-size:80px;
}

Explicación:
- En float, puedes cambiarlo de posición, sea left (izquierda) o right (derecha).
- En margin, ver aquí.
- En font y color, si deseas le cambias.
- En opacity, el número aparecerá opaco o transparente (sobre puesto), si deseas lo eliminas y desaparecerá lo transparente.

2. Buscar lo siguiente:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

3. Agregar lo siguiente (lo que está con color azul) después de:

<dl id='comments-block'>
<script type='text/javascript'>Index = 1;</script>
<b:loop values='data:post.comments' var='comment'>

4. Debajo de: <b:loop values='data:post.comments' var='comment'> pegar lo siguiente:

<span class='CommentIndex' title='solo comentario enumerado'><script type='text/javascript'>document.write(Index); Index= Index+1 ;</script></span>

5. Finalmente, guardamos los cambios.

¿Cómo mostrar la foto del autor del comentario en la página principal? -77-

2008-08-11T23:16:00.002-05:00

1. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios, buscar lo siguiente:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

2. Agregar lo siguiente (lo que está con color azul) después de:
<b:loop values='data:post.comments' var='comment'>

<div style="clear:both">
<dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'>
</dt>
<b:if cond='data:comment.authorUrl'>
<script type="text/javascript">
if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':'<data:comment.authorUrl/>'});
</script>
<b:else/>
<script type="text/javascript"> if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':''});
</script>
</b:if>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</div>

</b:loop>
</dl>

Explicación:
<div style="clear:both">
<dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'>
- En float, puedes cambiarlo de posición, sea left (izquierda) o right (derecha).
- En margin, ver aquí.

3. Pegar lo siguiente antes de: </body> (esto se encuentra al final de la plantilla)

* Agregar tu propia imagen en donde dice: &defaultimage='+encodeURIComponent('http://aquí-la-dirección-de-tú-imagen'), porque algunos no agregan su foto y aparecerá una imagen como un anónimo(?), pero si están registrados en Blogger (con-enlace).
En el caso del anónimo aparecerá simplemente la imagen que ustedes han puesto.
- Con respecto a la imagen tiene que ser de ancho 60px por 45px de alto aproximadamente.
** px.- pixeles

4. Finalmente, guardamos los cambios.

¿Cómo calificar los post de tu blog? -76-

2008-06-24T00:00:00.008-05:00

Un Widget es uno de esos artilugios que habitualmente adornan las barras laterales de los blogs.

Si quieres saber lo que piensan tus lectores acerca del contenido de tu blog o de los posts de tu blog, puedes añadir el widget Outbrain ratings y tus lectores podrán calificar cada post con una determinada cantidad de estrellas (1 al 5) el contenido de tu blog o página web.
El Outbrain ratings es el más completo y elegante. Sencillo de instalar y funciona en las plataformas Blogger, TypePad, WordPress, Drupal, javascript y FeedBurner RSS feed.
El widget inserta automáticamente el selector de 5 estrellas, en la parte inferior de cada entrada que se publica.
Te recomiendo que te registres para que lleves un registro de tus propias votaciones y asi poder solicitar las estadísticas de tu blog.
Outbrain ratings, incluye soporte para varios idiomas, incluyendo el español. Además te muestra en el blog las 3 Publicaciones más Populares.

1. Ingresar a Outbrain ratings.
2. Selecionar la plataforma que esta alojado tu blog (Blogger, WordPress, TypePad, Drupal u otros).
3. Registrarse (Opcional). Caso contrario instalas el widget.
Ejemplo:

Click en la imagen para agrandarla

4. Recibirás un correo en caso de que te hayas registrado.
5. En caso de que no te hayas registrado te aparecera lo siguiente:

Click en la imagen para agrandarla

6. Finalmente:

Click en la imagen para agrandarla

Existen otras páginas como:
Spotback

¿Como incluir una barra "Cargando Página"? -75-

2007-12-09T12:18:00.000-05:00

Permite insertar una barra en el centro de la página que especifica que el sitio está cargando su contenido. Una vez finalizado, se elimina la barra y muestra la página completa.

1. Ir a Plantilla, luego a Edición de HTML y antes de </head> pegar el siguiente código:

2. Después ir a Elementos de página y pegar el siguiente código:

<div id='imgLOAD' style="TEXT-ALIGN: center">
<b>Cargando</b>
<IMG src="http://i151.photobucket.com/albums/s137/andrewmusic1/loading.gif">
</div>

* Después lo arrastramos en donde mejor nos parezca.

Nota:
Esto también lo podemos poner dentro del código de la plantilla.

Existen páginas que te ofrecen diferentes tipos de barras Cargando Página:
Napyfab
Load Info
Activity Indicators

¿Cómo incluir una Radio Online en el Blog? -74-

2007-10-11T23:29:00.015-05:00

Si deseas que tu radio favorita suene en tu blog, lo podrás hacer utilizando un simple código que a continuación te proporcionare:

1. Necesitamos obtener la URL de la radio, es decir su dirección por donde transmite su señal. Generalmente se puede obtener desde el mismo reproductor que la emisora tiene en su página web, entonces tendrás que escuchar la radio, para luego poner el mouse sobre el reproductor, después presionar el botón derecho, el cual se abrirá una ventana y clic en Propiedades, es ahí en donde veras la URL por la cual transmite su música.

2. Pegar el siguiente código en donde quieras, sea en la Sidebar o en la Columna principal:

* En donde dice la URL de la radio online, pones la dirección de la emisora.
* Para que funcione debes cambiar: AutoStart=False por AutoStart=True.

Nota: Por ejemplo, puedes poner el mouse sobre el reproductor, luego seguir los pasos anteriormente mencionados y verás que la dirección por donde se transmite la radio que estás escuchando es: http://216.246.4.18/asxfiles-live/ny60winlive7001.asx

Estas escuchando Kiss Radio (España)

¿Como hacer una Nube de Etiquetas? -73-

2007-09-07T19:25:00.000-05:00

Una nube de etiquetas es una representación visual de las “etiquetas” o palabras clave usadas en un sitio web. Generalmente este listado de palabras se ordena alfabéticamente y con diferente tamaño según su relevancia.

Para empezar a poner nuestra nube de etiquetas en el blog tenemos que etiquetar todos nuestros post.

1. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios y tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>).

/* Label Cloud Styles
----------------------------------------------- */
#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}

2. Después agregar el siguiente código entre ]]></b:skin> y </head>. Preferible que lo pegues casi al final (antes de </head>).

3. Buscar el widget con el id Label1 y con el title Etiquetas. Esto lo encuentras donde dice:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

<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'>
<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'><?xml:namespace prefix = data /></data:label.name></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

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

4. Una vez ubicado, tienes que reemplazar todo el código anterior por lo siguiente:

<b:widget id='Label1' locked='false' title='Label Cloud' 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'>

// Do not change anything past this point -----------------
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>

Explicación del paso Nº 2
- En lcBlogURL, se debe poner la dirección de tu blog.

- En maxFontSize, podemos modificar el tamaño de la fuente mostrada.

- En maxColor = [0,0,255], podemos modificar el color de la fuente mostrada.
Por ejemplo:
[255,0,0] = Rojo claro
[0,255,0] = Verde claro
[128,0,0] = Rojo oscuro
[0,128,0]= Verde oscuro
[0,0,128] = Azul oscuro
Mas combinaciones de colores en HYPE's Color Specifier.

- En minFontSize, podemos modificar el tamaño de la fuente mostrada.

- En minColor = [0,0,0], podemos modificar el color de la fuente mostrada.

- En lcShowCount (true o false) .- Si es true se mostrará una nube de etiquetas con el número de entradas que existen. Mientras que en false simplemente se vera una nube de etiquetas sin su respectivo número.

Nota:
- Para que te resulte este truco debes tener como máximo más de 2 entradas en caso contrario no se mostrará.

Etiquetas (categorías o secciones) en forma de un menú de pestañas o solapas -72-

2007-08-18T13:35:00.000-05:00

En algunos sitios web encontramos un menú de pestañas en forma horizontal para una navegación mucho mejor. Probablemente para algunos es de bastante utilidad por su fácil y rápida navegación por la página.

Para empezar a poner nuestro menú de pestañas en el blog tenemos que etiquetar todos nuestros post.

1. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios y buscas lo siguiente:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

* Cambia los valores de mawidgets="2" y showaddelement="yes".

2. Después buscas el widget con el id Label1 y con el title Etiquetas. Esto lo encuentras donde dice:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

3. Una vez ubicado, tienes que reemplazar todo el código anterior por lo siguiente:

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsE'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li></b:loop>
</ul>

</div>
</b:includable>
</b:widget>

4. Seguimos en la Plantilla. El siguiente código lo deje para el último, porque se refiere estilo del menú, el cual se podrá realizar cambios, utilizando tu criterio.
El código lo tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.

/*- Menu Tabs E--------------------------- */

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("http://i151.photobucket.com/albums/s137/andrewmusic1/tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("http://i151.photobucket.com/albums/s137/andrewmusic1/tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}

En donde dice:
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
el número 50 se refiere al posicionamiento, es decir moverlo hacia la izquierda, por ejemplo cambialo a 0 y mira lo que pasa.
Luego mas abajo dice: padding:5px 15px 4px 6px;
el número 5 se refiere al espacio, por ejemplo cambailo a 0 y mira lo que pasa.

Nota: Te voy a proporcionar algunos estilos de menú que he subido a Photobucket para que lo utilices en tu blog. Pero al utilizar algún estilo, tendrás que hacer una simple modificación.

Tabs A Color de las Tabs: Blancas
Tabs B Color de las Tabs: Grises
Tabs C Color de las Tabs: Verdes
Tabs D Color de las Tabs: Rosas
Tabs E Color de las Tabs: Rojas
Tabs F Color de las Tabs: Celeste
Tabs G Color de las Tabs: Azules
Tabs H Color de las Tabs: Negras
Tabs I Color de las Tabs: Naranjas
Tabs J Color de las Tabs: Cristal
Tabs K Color de las Tabs: Cafe

Por ejemplo, si utilizas el estilo A, entonces te vas al paso 2 y en <div id='tabsF'> le cambias el id por el estilo que haz escogido. En este caso hemos escogido el estilo A entonces seria, <div id='tabsA'>

5. Finalmente cuando vas a guardar los cambios te saldrá probablemente un mensaje:
Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.
• Label1
Confirmar y guardar
Simplemente guardas y confirmas.

Nota: Para que resulte todo esto debes irte a Elementos de la página y arrastrar Etiquetas poniendolo debajo de la cabecera.

Plantillas con una 2da Sidebar (3 columnas) -71-

2007-07-09T12:40:00.000-05:00

1. Para usar estas plantillas tienes que descargar el documento y copiar el código que se te brinda.
2. Ir al blog. Tienes que ir a diseño de plantilla, después a Edición de HTML (no necesitas Expandir plantillas de artilugios) y automáticamente te muestra el código de la plantilla que usas actualmente.
3. Selecciona todo el código y bórralo. Ahora pega el código que ya tenías copiado (la nueva plantilla).
4. Guarda los cambios. Reconstruye tu blog y listo.

Minima Descargar
Minima Black Descargar
Minima Blue Descargar
Minima Ochre Descargar

Minima Descargar
Minima Black Descargar
Minima Blue Descargar
Minima Ochre Descargar

Denim Descargar

Denim Descargar

Nota: Poco a poco estre subiendo las demás.

Ocultar/Mostrar la barra de navegación de Blogger (2) -70-

2007-06-30T21:12:00.000-05:00

Acerca el mouse aquí abajo para que aparezca la imagen y alejalo para que desaparezca.

Consiste en ocultar la barra de navegación y mostrarla cuando se coloca el mouse en la parte superior del blog o página.

Así que para ocultar esta barra tendrás que hacer lo siguiente:
- Ir a Plantilla, después a Edición de HTML (no necesitas Expandir plantillas de artilugios) y agregas el siguiente código entre ]]></b:skin> y </head>.

Vía: Hodavame

Menú desplegable, un simple botón (2) -69-

2007-06-26T15:20:00.000-05:00

Este menú desplegable consiste en hacer clic al botón y se muestra una lista de opciones.

1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>)

.texthidden {
display:inline
}

.shown {
display:block
}

2. Entre ]]></b:skin> y </head> agregar lo siguiente:

- Guardar cambios.

3. Ir a Elementos de la página, clic en Añadir un elemento de página y seleccionar HTML/Javascript. Ahí tendrán que agregar el siguiente código:

<a href="javascript:void(0);" onclick="expandcollapse('musica')"><img border="0" src="http://dirección-de-la-imagen-del-botón"/></a><br/>

<ul id="musica" class="texthidden">
<li><a href="http://www.radioblogclub.com/" target="_blank">Radio Blog</a></li>
<li><a href="http://www.goear.com/index.php" target="_blank">Goear</a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('video')"><img border="0" src="http://dirección-de-la-imagen-del-botón"/></a><br/>

<ul id="video" class="texthidden">
<li><a href="http://www.youtube.com/" target="_blank">Youtube</a></li>
<li><a href="http://www.veoh.com/" target="_blank">Veoh</a></li></ul>

**Como punto de partida hemos hecho un menú de música en el que aparece una lista: Radio Blog y Goear. Además, hay un menú de video en el que aparece: You Tube y Veoh

- En esta parte de código puedes repetirla cuantas veces quieras, ustedes tendrán que armarlo a su gusto.
- Solo tendrán que agregar el botón, la dirección de la página con su respectivo nombre.
- Además, puedes añadir una imagen justo antes del texto que aparece la lista.

Explicación:
- Si por ejemplo, a parte de música deseamos poner video entonces al crear otro botón, en expandcollapse('musica') cambiamos en donde dice música por video. Además, el id=”música” lo modificamos por video.
- En <img border="0" src="http://direccion-de-la-imagen"/>, viene hacer la imagen del botón.
- En donde dice Radio Blog, Goear, You Tube, vienen a ser una lista.
- En <a href="http://www.radioblogclub.com/" target="_blank">, viene hacer el enlace de la página enlazada.

Ejemplo:

Crear botones en Buttonator

Vía: A Consuming Experience

Agregar Emoticones en el blog -68-

2007-06-18T23:00:00.000-05:00

Emoticones.- Son figuras construidas con caracteres ortográficos, para expresar gestos o emociones en los mensajes enviados y los usuarios las utilizan diariamente en su chat. Algunas de las más usuales son:
1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <head> y </head>. Preferible que lo pegues casi al final (antes de </head>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

2. Entre <b:skin><![CDATA[ y ]]></b:skin> agregar lo siguiente:

.post-body img#new {
margin:0;
padding:0;
border:none;
}

* Esto es para evitar que los Emoticonos se desplacen o se vean con un borde.

- Los emoticones se verán en los post (entradas) y en los comentarios cuando están expandidos. Una vez que el blog acabe de cargar aparecerán los emoticonos.

Nota: Estos emoticones te funcionan bien si es que no utilizas el Leer Más (Entradas ampliables).

Vía: Ben's

Cambiar el color de fondo de los comentarios -67-

2007-06-17T00:12:00.000-05:00

Consiste en agregar un color de fondo a los comentarios, el cual puedes asignar un color de fondo para el autor del blog (un color de texto también) y otro para el autor de los otros blogs.

1. Ir a diseño de la Plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios. Buscar el id ='comments-block'.

* Agregar lo que está de color rojo.

3. Seguimos en la plantilla. Entre <b:skin><![CDATA[ y ]]></b:skin> buscar lo siguiente (estilo del comentario):

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
Sigue más código de estilo
…..
…..
….
.deleted-comment {
font-style:italic;
color:gray;
}

4. El siguiente código lo deje para el último porque se refiere al estilo del comentario (modificado), el cual se podrá realizar cambios utilizando tu criterio. Una vez ubicado el estilo del comentario lo reemplazamos por lo siguiente:

#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:#e6e6e6 url("http://4.bp.blogspot.com/_wIBBe1JWnPQ/RjoyOtvN3eI/AAAAAAAAAGA/PsaYcfwBLQg/s200/page_edit.png") no-repeat 2px .35em;
margin:.5em 0 0;
padding:3px 0 0 18px;
font-weight:bold;
}
.comment-body {
background:#eeeee6;
margin:0;
padding:7px 7px 7px 7px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author {
background:#e5e5e5;
margin:0;
padding:7px 7px 7px 10px;
}
.comment-body-author p {
font-size:105%;
margin:0 0 .2em 0;
color:#6728B2;
text-decoration:bold;
}
.comment-footer {
background:#e6e6e6;
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Explicación:
- En .comment-author, aparece el nombre del autor y puedes cambiar el color de fondo y la url que viene a ser el icono
- .comment-body, ahí se visualiza el color de fondo para los que dejan comentarios.
- .comment-body-author, ahí se visualiza el color de fondo para el autor del blog.
- .comment-body-author p, puedes cambiar el color de texto del autor del blog.
- .comment-footer, aparece la fecha y puedes cambiar el color de fondo.

Vía: Stubborn Fanatic

Colores aleatorios en el fondo del blog -66-

2007-06-12T21:30:00.000-05:00

Consiste en un color distinto cada vez que entramos al blog.

1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y buscas lo siguiente:

body {
background:$bgcolor;
...
}

* Eliminar background:$bgcolor;

2. Agregar el siguiente código después de <body>

- En new Array (), puedes cambiar los códigos de los colores que deseas.
Por otro lado, si quieres que más colores cambien le agregas más o en caso contrario le quitas.

- Para que veas el resultado en tu blog presiona F5 de tu teclado y veras que aparecen distintos colores en el fondo del blog.

Últimos Post (2) -65-

2007-06-11T00:00:00.000-05:00

En Blogger existe la manera de agregarle a nuestro blog los títulos de los últimos post, pero a muchos no les ha gustado, quizás sea porque el número máximo de post es cinco, entre otras cosas. Pero existe un nuevo truco y me parece mucho mejor.

» Ir a diseño de plantilla, clic en Añadir un elemento de página y seleccionan HTML/Javascript. Ahí tendrán que agregar lo siguiente:

Explicación:
Podemos modificar lo siguiente:

numpost .- Es el número de post a mostrar desde 1 hasta 25.

numchars .- Se mostrará un número de palabras para cada comentario.

showpostdate (true o false) .- Si es true se muestra la fecha del post.

showpostsummary (true o false) .- Si es true se mostrará el resumen del post (entradas).

standardstyling (true o false) .- Si es true se aplicará un estilo estándar. El resumen se mostrará en letra cursiva y existirá un espacio entre cada comentario. Mientras que en false se vera todo junto.

** En donde dice: andrewmusicmovie.blogspot.com cámbialo por la dirección de tu blog.

Vía: Beautiful Beta

Últimos Post (Blogger)

¿Cómo modificar la Columna Pricipal y la Sidebar del blog? -64-

2007-06-08T13:49:00.000-05:00

Para aumentar o disminuir el tamaño de la Columna principal o Sidebar necesitaremos hacer algunas modificaciones en el blog.
Esto prácticamente resulta para las siguientes plantillas: Todas las Minima (Dark, Blue, Ochre, Lefty, Stretch, Lefty Stretch), Denim.

» Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios).

1. En la plantilla tenemos que ubicar lo siguiente:
/* Header
-----------------------------------------------
#header-wrapper {
width:660px;
...
}

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
...
}

#main-wrapper {
width: 410px;
...
}

#sidebar-wrapper {
width: 220px;
...
}

2. Tendremos que modificar el width (ancho) del #header-wrapper, #outer-wrapper, del #main-wrapper y de la #sidebar-wrapper.
Ejemplo:
#header-wrapper {
width: 900px;
...
}

#outer-wrapper {
width: 900px;
...
}

#main-wrapper {
width: 500px;
...
}

#sidebar-wrapper {
width: 320px;
...
}

3. Para que veas los cambios haces clic en Vista Previa y si crees que has hecho bien las modificaciones, simplemente clic en Guardar Plantilla.

Nota: Quizás esto te pueda servir como una guía para las demás plantillas.

¿Cómo poner un texto en movimiento en la barra de estado y título? -63-

2007-06-04T00:00:00.000-05:00

La barra de título, está en la parte superior y nos indica la página web en la que el navegador está situado.

La barra de estado, nos aparece en los exploradores por lo general abajo y suele mostrar información sobre la página.

Para agregar el siguiente código tienes dos formas de agregarlo:
- Ir a diseño de la plantilla, clic en Añadir un elemento de página y seleccionas HTML/Javascript.
- Ir a diseño de la plantilla, luego Edición de HTML y lo agregas antes de </head>

Para la barra de título

** setTimeout("titlemove()",140), esta línea se refiere al movimiento del texto, si deseas le cambias el valor de 140 por otro valor.
Probablemente el texto lo veas muy junto o no se aprecie bien, entonces en Opciones, Básico y en el Título le agregas guiones o puntos. Pero acuérdate que cambiaria el titulo de tu blog, es decir estaría con puntos o guiones.

Para la barra de estado

- En var MessageText, escribes tu mensaje.
- var DisplayLength, viene a ser la longitud de tu mensaje.
- setTimeout("ScrollInStatusBar()",100), esta línea se refiere al movimiento del texto, si deseas le cambias el valor de 100 por otro valor.

Personalizar la fecha de los post (entradas) -62-

2007-06-01T00:00:00.001-05:00

Blogger coloca por defecto la fecha de los post en una sola línea, asi que en esta oportunidad vamos a cambiar la apariencia de la fecha en un estilo diferente, el cual podrás personalizarla a tu gusto.

1. Ir a Configuración. Después a Formato. De ahí, en donde dice: Formato de cabecera de fecha, escogemos la siguiente opción:

Clic en la imagen para agrandarla

* No te olvides que tienes que Guardar valores.

2. Ir a plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios. Después agregas el siguiente código entre <head> y </head>. Preferible que lo pegues al final (antes de </head>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

3. Después buscas lo siguiente:

4. Una vez ubicado, reemplazas <data:post.dateHeader/> por lo siguiente:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

5. Seguimos en la Plantilla. El siguiente código lo deje para el último, porque se refiere al estilo de la fecha, el cual se podrá realizar cambios, utilizando tu criterio.
El código lo tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.

#fecha {
display: block;
margin: 0px 1px;
float: right;
padding: 5px;
color: #464646;
background: #cccccc;
border: #cccccc 1px solid;
text-transform: capitalize;
}

.fecha_dia {
display: block;
font-size: 16px;
font-weight:bold;
}

.fecha_mes {
display: block;
font-size: 10px;
}

.fecha_anio {
display: block;
font-size: 10px;
}

Explicación:
#fecha {
En margin, ver aquí.
float, puedes cambiarlo de posición, sea left o right.
padding, puedes aumentar o disminuir el formato de la fecha.
color y background, puedes modificar los colores del texto como el fondo.
border, cambiar el color y en 1px por otro valor, sea 2 ó 3 (aumenta mas el borde).

.fecha_dia, .fecha_mes y .fecha_anio {
En font-size, puedes cambiar el tamaño de la letra.

Vía: Recursos Blog & Web

¿Cómo utilizar un bloque entrecomillado? (blockquote) -61-

2007-05-27T13:50:00.000-05:00

Blockquote.- Define una cita. Es comúnmente usado para definir citas largas como párrafos. <blockquote> </blockquote>

En algunos blogs/sitios web encontramos citas o frases con una imagen de unas dobles comillas de apertura, el cual nos puede servir para citar algo que dijo alguna actriz, cantante, entre otras cosas.

1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

blockquote {
background: url(http://aquí-la-direccion-de-la-imagen) no-repeat 0 3px;
color: #666;
padding-left: 25px;
font-size : 15pt;
font-style: italic;
margin-bottom: 1px;
display:block;
padding-top:5px;
}

Explicación
- En url, se debe poner el enlace a la imagen con las dobles comillas.
- En padding-left, sirve para mover el texto entre le borde izquierdo.
- En font-size, podemos modificar el tamaño de la fuente mostrada.
- En font-style, define que la fuente se muestre en una de tres formas: normal, italic u oblique (inclinada).
- En padding-top, sirve para desplazar el texto hacia abajo.

2. Para que las dobles comillas tengan efecto en una entrada hacemos lo siguiente:
Escribimos alguna cita o frase, luego lo sombreamos y clic en bloque entrecomillado o sino en edición de HTML también lo podemos insertar.

Clic en la imagen para agrandarla

Nota: Te voy a proporcionar algunas comillas que he subido a Photobucket para que lo utilices en tu blog.

http://i151.photobucket.com/albums/s137/andrewmusic1/quoteblack.gif

http://i151.photobucket.com/albums/s137/andrewmusic1/quotefirebrick.gif

http://i151.photobucket.com/albums/s137/andrewmusic1/quote.gif

Últimos Comentarios (2) -60-

2007-05-21T10:54:00.000-05:00

En Blogger existe la manera de agregarle a nuestro blog los últimos comentarios que nos dejan los que nos visitan, pero a muchos no les ha gustado, quizás sea porque el número máximo de comentarios es cinco, tarda en actualizarse, entre otras cosas. Pero existe un nuevo truco y me parece mucho mejor.

» Ir a diseño de plantilla, clic en Añadir un elemento de página y seleccionan HTML/Javascript. Ahí tendrán que agregar lo siguiente:

Explicación: Podemos modificar lo siguiente:

numcomments .- Es el número de comentario a mostrar desde 1 hasta 25.

showcommentdate (true o false) .- Si es true se muestra la fecha del comentario.

showposttitle (true o false) .- Si es true se mostrará el titulo del post (entradas), en donde el usuario ha dejado su comentario.

numchars .- Se mostrará un número de palabras para cada comentario.

standardstyling (true o false) .- Si es true se aplicará un estilo estándar. El resumen se mostrará en letra cursiva y existirá un espacio entre cada comentario. Mientras que en false se vera todo junto.

** En donde dice: andrewmusicmovie.blogspot.com cámbialo por la dirección de tu blog.

Vía: Hasckospere y Beautiful Beta

Últimos Comentarios (Blogger)

¿Cómo cambiar la cabecera por una imagen? -59-

2007-05-17T16:03:00.000-05:00

Cabecera de página.-Visualiza el título y la descripción de tu blog.

En Blogger existe una opción para insertar una imagen en la cabecera de forma fácil y rápida. Así que ahora podemos dejar de lado aquellos trucos que utilizábamos.

» Ir a diseño de la Plantilla, después clic en editar Cabecera (header) y nos aparecerá lo siguiente:

Clic en la imagen para agrandarla

Si deseamos que nuestra imagen tenga un título y una descripción debemos seleccionar la primera casilla, en caso contrario que queramos solamente la imagen la segunda casilla.
** Al subir nuestra imagen la guardamos y volvemos hacer clic en editar Cabecera, para que nos aparezcan las opciones.

Probablemente si el título y la descripción lo queremos en el centro, entonces hacemos lo siguiente:
» Ir a Plantilla, después a Edición de HTML (no Expandir plantillas de artilugios). Ahora buscamos lo siguiente:
#header y #header .description
Tanto al primero como al segundo le agregamos después:
text-align:center;
* Si en tu plantilla existe esto, lo modificas a tu gusto.

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 710px (píxeles) y un alto de 120 px. Estos valores son simplemente un aproximado. En todo caso puedes fijarte en donde dice #header, ahí te indica un ancho (width).

Encuesta para el Blog: Free Website Polls -58-

2007-05-16T00:15:00.000-05:00

Free Website Poll es una herramienta sencilla y práctica que nos permite generar hasta quince encuestas a la vez para nuestro blog o sitio web.
Para hacer una encuesta no hace falta ni registrarse, basta formular la pregunta, las posibles respuestas y obtendrás un código HTML para agregarlo en nuestro site o blog. Cada encuesta activa te permite un máximo de 20 respuestas.
Por otro lado, si deseas puedes registrarte y obtendrás aspectos configurables, tal es el caso de agregarle color, alineamiento de opciones, tipografía a usar, entre otras cosas.
**En mi Sidebar he agregado esta herramienta**

Insertar elementos en la Sidebar (Blogger nuevo)
Insertar elementos en la Sidebar (Blogger antiguo)

Ocultar/Eliminar el mensaje: Mostrando entradas... -57-

2007-05-12T00:30:00.000-05:00

Probablemente a muchos usuarios les molesta aquel mensaje que aparece cada vez que haces clic sobre una etiqueta (categoría o sección) y nos dice en que etiqueta estamos. Además nos da la opción de ver todas las entradas publicadas.

- Si queremos ocultar hacemos lo siguiente:
» Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

.status-msg-wrap {
visibility:hidden;
display:none;
}

- Si queremos eliminar hacemos lo siguiente:
» Ir a diseño de la plantilla. Después clic en Edición de HTML y clic en Expandir plantillas de artilugios y buscas lo siguiente (eliminas lo que está de color azul):

<div class='blog-posts'>

<b:include data='top' name='status-message'/>

<data:adStart/>

Si no deseas eliminarlo, entonces puedes ponerle un par de código de comentario (lo que está de color rojo):

<--! <b:include data='top' name='status-message'/> -->

Imágenes aleatorias en la cabecera -56-

2007-05-10T19:00:00.000-05:00

Consiste en una imagen distinta cada vez que entramos al blog.

» Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código después de <body>.

- En banner [0], [1], [2], [3], [4] tendrás que agregar la dirección de tu imagen, el cual debe tener un ancho de 660px (pixeles) y un alto de 130px aproximadamente. En todo caso, buscas en la plantilla que estas utilizando, el ancho de la cabecera (header).
Por otro lado, si deseas que más imágenes cambien le agregas más líneas o en caso contrario le quitas.

banner[0]="http://aqui-la-dirección-de-la-imagen"

- En donde dice: left (izquierdo), le puedes cambiar por center (centro) o right (derecho).

- Prácticamente esto resulta mucho mas fácil con las plantillas Minima, Denim, Scribe y Tic Tac. Con las demás también, pero se tiene que hacer ciertas modificaciones en la cabecera.

- Para que veas el resultado en tu blog presiona F5 de tu teclado y veras que aparecen distintas imágenes en la cabecera.

- Finalmente, si deseas que te ayude mas con las plantillas que se tiene que hacer ciertas modificaciones, me dejas un comentario mencionándome que plantilla usas.

** Utlizando esto el titulo aparecera, si deseas eliminarlo visita aquí. Simplemente te puede servir como una guía.

Cambiar la Plantilla (Template) del Blog (2) -55-

2007-05-07T15:10:00.000-05:00

Si deseas hacer un cambio de imagen en tu blog, en TemplatePanic puedes encontrar plantillas para la versión antigua y nueva de Blogger y también para WordPress.

1. Para usar estas plantillas tienes que guardar en la computadora un archivo zip.
2. Luego el archivo que haz guardado en la PC, lo descomprimes.
3. Ir al blog. Tienes que ir a diseño de plantilla, después a Edición de HTML y clic en Examinar, buscas la plantilla y clic en Subir.
4. Clic en vista previa y luego guardas los cambios. Reconstruye tu blog y listo.

Nota: Para hacer este cambio, te recomiendo que guardes primero el código de la plantilla que estas utilizando.

Poner un icono en la lista de Etiquetas (Categoría o Sección), Comentarios, Autor... -54-

2007-05-05T12:23:00.000-05:00

Icono para la lista de Etiqueta (Categoría o Sección)
» Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

#Label1 li {
list-style:none;
padding-left: 18px;
background: transparent url(http://Aquí-la-dirección-del-icono) no-repeat center left;
}

Explicación:
- La lista de etiquetas están definidas con la clase Label1.
- La propiedad list-style, especifica el tipo de marcador de artículos de lista.
- La propiedad padding-left, describe cuanto espacio colocamos entre el borde izquierdo y el contenido.
- En el background, la url correspondiente al icono.
** Estos iconos tienen que ser: 16px por 16px.
** Terminando de leer este post, te proporciono 2 páginas de iconos.

Icono para los Comentarios
Es el mismo paso cuando agregas un icono a la lista de Etiqueta. En este caso he puesto dos códigos: en el primero el icono aparece al costado de la palabra comentario y el segundo un icono al lado del nombre del autor.

.post-comment-link {
padding-left:20px;
padding-top:5px;
background: url(http://Aqui-la-direccíón-del-icono) center left no-repeat;
}

#comments dl dt {
font-weight: bold;
font-style: italic;
margin-top: 35px;
padding: 1px 0 0 18px;
background: transparent url(http://Aquí-la-dirección-del-icono) top left no-repeat;
}

Icono para el Autor (Publicado por)
Es el mismo paso cuando agregas un icono a la lista de Etiqueta.

.post-author {
padding-left:20px;
padding-top:5px;
background: url(http://Aquí-la-dirección-del-icono) center left no-repeat;
}

Icono al costado de la palabra Etiqueta
Es el mismo paso cuando agregas un icono a la lista de Etiqueta.

.post-labels {
padding-left:20px;
padding-top:5px;
background: url(http://Aquí-la dirección-del-icono) center left no-repeat;
}

Páginas de Iconos
famfamfam
FreeIconsWeb

Vista de post en Etiquetas/Páginas de archivos -53-

2007-05-03T19:45:00.000-05:00

Esto consiste en mostrar sólo los títulos de los post cuando seleccionas una Etiqueta (Categoría o Sección), el cual está provisto de un [+/-] para poder expandir/reducir y leer el post.
Por ejemplo, cuando le das clic en Blogger (nuevo) se mostrará todos los post con su respectivo título pero no la información y al hacer clic en [+/-] recién podrás leer el artículo completo.

1. Ir a plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios. Después agregas el siguiente código entre <head> y </head>. Preferible que lo pegues al final (antes de </head>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

2. Luego buscas lo siguiente:

<b:includable id='main' var='top'>

<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

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

<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>

3. Agregas lo siguiente antes de <b:includable id='main' var='top'>

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>
</div>
</b:includable>

4. Seguimos en la Plantilla. Una vez que han pegado el código anterior, ahora pegas lo siguiente (lo que está con color azul) después de:

5. Finalmente, guardarmos los cambios.

Generador de Botones -52-

2007-04-26T12:04:00.000-05:00

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:

80x15

88x31

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)

¿Cómo poner una imagen de fondo en el blog? -51-

2007-04-23T00:31:00.000-05:00

1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y buscas lo siguiente:

body {
background:$bgcolor;
...
}

2. Tendrás que agregar después de background:$bgcolor lo siguiente (lo que está de color azul):

body {
background:$bgcolor url(http://Aquí la direción de la imagen) fixed no-repeat top left;
...
}

Explicación:
- El valor no-repeat, la imagen no se repite. Además podemos cambiarlo por otros valores como repeat-x, repetirá la imagen horizontalmente mientras que el valor repeat-y, repetirá la imagen verticalmente y si se especifica repeat, la imagen se repetirá horizontal y verticalmente.
- El valor fixed, la imagen se desplazará con el contenido o será fija.
- El valor top left, la posición de la imagen.

Nota: La imagen debe ser grande, tipo wallpaper, el cual tienen un ancho de 1024 pixeles (px) y un alto de 685 px aproximadamente.

Ver ejemplo aquí.

Cambiar la cabecera por una imagen (Plantillas Nº 867 y Nº 865) -51-

2007-04-11T16:36:00.000-05:00

Cabecera de página.- Visualiza el título y la descripción de tu blog.

Para insertar una imagen en la cabecera necesitamos agregar simplemente un código. Esto prácticamente resulta para la plantillas Nº 867 y Nº 865.
Te recomiendo que no te arriesgues hacer esto con las otras plantillas porque la modificación no va hacer igual para las demás. Quizás esto te puede servir simplemente para guiarte.

Para poner una imagen en la cabecera de las plantillas Nº 867 y Nº 865 tendremos que hacer lo siguiente:
1. Ir a Plantilla, después a Edición de HTML y clic en Expandir plantillas de artilugios. Entonces, ahora buscamos el div con el id header-wrapper.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='PruebaBlog (cabecera)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

2. Una vez ubicado <div id='header-wrapper'>, tendrás que reemplazar todo el código anterior por lo siguiente (lo que esta en azul agregas):

<div id='header-wrapper'>
<div id='header'>
<a href="http://aquí-la-dirección-de-tu-blog">
<img src="http://aquí-la-dirección-de-tu-imagen" /></a>
</div>
</div>

* Al reemplazar todo esto, te saldrá un mensaje diciendo:
Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.

Header1

Le das un clic en: Confirmar y Guardar

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 744 px y un alto de 130 px. Estos valores son simplemente un aproximado.
- Si deseas agregarle un ancho y un alto a tu imagen tendrás que hacer lo siguiente:

**Por ejemplo he subido una imagen en Photobucket y he pegado lo siguiente:

Y he añadido al último esto: /

Cambiar el título por una imagen
Cambiar la descripción por una imagen

¿Cómo poner etiquetas en Blogger? -50-

2007-04-11T00:05:00.000-05:00

Para poner Etiquetas, Secciones o Categorías en la Sidebar (Barra lateral) tendrás que hacer lo siguiente:

1. Ir a diseño de la plantilla. Después clic en Añadir un elemento de página, seleccionar Etiquetas, luego le pones un título y lo clasificas por orden alfabético o por frecuencia de uso.

2. Para que aparezca en los posts. Clic en Editar Entradas del blog, luego marcar la casilla correspondiente y poner en el cuadro de texto: Categorías o Secciones, entre otros.

3. Asignar etiquetas. Cuando escribes una entrada, tienes un espacio en la parte inferior del formulario denominado Etiquetas de esta entrada. Ahí tendrás que introducir las etiquetas que quieras, separándolas por comas. También puedes hacer clic en el vínculo Mostrar todo para ver una lista de las etiquetas que hayas utilizado previamente y para añadir una, simplemente haz clic en ella.

Clic en la imagen para agrandarla

4. Etiquetar. En Editar entradas, seleccionamos los posts que queramos que compartan etiquetas.

Clic en la imagen para agrandarla

Stickers para el blog -49-

2007-04-09T01:06:00.000-05:00

Blogsticker es un servicio que permite colocar stickers sociales al blog, el cual es una banda diagonal que aparece en la esquina superior del blog.
En Blogsticker podemos encontrar diferentes categorías como: banderas de países, deportes, películas, TV, ciencia, música, entre otras.
Una vez que te registras puedes escoger entre todas sus categorías un máximo de 5 stickers, los cuales se alternaran cada vez que accedan a tu blog, pero al momento que hagan click al sticker, irás a la página de blogsticker y resumirá todas las noticias de los diferentes blogs registrados.
Por ejemplo, si le das click al sticker veras como resume en la página de Blogsticker toda aquella persona registrada al servicio y con su respectivo sticker.

Para comenzar a utilizar el servicio tenemos que hacer lo siguiente:
1. Crear una cuenta (con activación por e-mail).
2. Clic en Claim a new blog, después agregar la dirección de nuestro blog y comprobar que sea nuestro, ya sea mediante un post con un código, subiendo un archivo a nuestro servidor o añadiendo un metatag.
3. Insertar un código Javascript que hace referencia única a tu blog.
4. Empezar a elegir los stickers que aparecerán en tu blog.

Cambiar la cabecera por una imagen (Plantillas Rounders) -48-

2007-04-02T01:00:00.000-05:00

Cabecera de página.-Visualiza el título y la descripción de tu blog.

Para insertar una imagen en la cabecera necesitaremos agregar algunos códigos y a su vez hacer algunas modificaciones en el blog. Esto prácticamente resulta para la plantillas Rounders (2, 3, 4).
Te recomiendo que no te arriesgues hacer esto con las otras plantillas porque las modificaciones no van hacer iguales para las demás. Quizás esto te puede servir simplemente para guiarte.

En la cabecera de las plantillas Rounders tienen unas curvas, así que lo eliminaremos y luego agregamos la imagen:
1. Ir a Plantilla, después a Edición de HTML y clic en Expandir plantillas de artilugios. Entonces, ahora buscamos el siguiente código:

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background:$titleBgColor url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
padding:0 15px 8px;
}

2. Tendrás que eliminar el background de header-wrapper y la url en header. Después cambiar el valor de padding de header. Entonces el resultado seria así:

#header-wrapper {
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("") no-repeat left bottom;
padding:0 0 8px;
}

3. Luego buscas el div con el id header-wrapper.

4. Una vez ubicado <div id='header-wrapper'>, tienes que reemplazar todo el código anterior por lo siguiente (lo que esta en azul agregas):

<div id='header-wrapper'>
<div id='header'>
<a href="http://aquí-la-dirección-de-tu-blog">
<img src="http://aquí-la-dirección-de-tu-imagen" /></a>
</div>
</div>

Header1

Le das un clic en: Confirmar y Guardar

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 740px y un alto de 120px. Estos valores son simplemente un aproximado.
- Si deseas agregarle un ancho y un alto a tu imagen tendrás que hacer lo siguiente:

**Por ejemplo he subido una imagen en Photobucket y he pegado lo siguiente:

Y he añadido al último esto: /

Cambiar el título por una imagen
Cambiar la descripción por una imagen

Drop Caps al estilo revista para el blog -47-

2007-03-31T23:10:00.000-05:00

Drop Caps.- Es la primera letra de un párrafo que aparece más grande que las demás.

1. Ir a Plantilla, después a Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues al final, porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.

.dropcaps {
float:left;
color: $headerBgColor;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}

En algunas plantillas no tienen definido $headerBgColor, así que lo cambias por $titlecolor o sino puedes ponerle el código del color que quieras. Además le puedes cambiar el tamaño de la letra en: font-size.

2. Para que funcione esto necesitas un código más, que lo vas a pegar en:
- Ir a Opciones. Después a Formato y en Plantilla de entrada lo pegas.
- Cuando vas a publicar algo, prácticamente en todas las entradas te saldrá este código, sin necesidad de estar escribiéndolo en cada entrada. No olvidar guardar los cambios. El código es el siguiente:
<span class="dropcaps">D</span>
Ejemplo:

Dolores O’Riordan, vocalista del grupo irlandés, The Cranberries presenta su tema ‘Ordinary Day’, primer sencillo promocional de su primer disco en solitario titulado “Are You Listening?”, que saldrá a la venta el 7 de mayo en Estados Unidos y al día siguiente en Europa.
- El resultado es una letra mayúscula que se alarga 5 líneas.

Nota:
En vista previa no se visualiza.

Via: Mandarin Design

¿Cómo puedo modificar el número de entradas que se muestran en mi blog? -46-

2007-03-30T16:48:00.000-05:00

posts=entradas

1. Ir a Configuración. Después a Formato.
2. Ajustar el número según considere:No olvidar Guardar valores.

Cambiar la cabecera por una imagen (Plantillas Denim) -45-

2007-03-23T00:56:00.000-05:00

Cabecera de página.- Visualiza el título y la descripción de tu blog.

Para insertar una imagen en la cabecera necesitaremos agregar algunos códigos y a su vez hacer algunas modificaciones en el blog. Esto prácticamente resulta para la plantillas Denim (Stretch Denim, Washed Denim, Stretch Denim Light).
Te recomiendo que no te arriesgues hacer esto con las otras plantillas porque las modificaciones no van hacer iguales para las demás. Quizás esto te puede servir simplemente para guiarte.

En la cabecera de las plantillas Denim eliminaremos un borde y el título para luego agregar la imagen:
1. Ir a Plantilla, después a Edición de HTML y clic en Expandir plantillas de artilugios. Entonces, ahora buscamos lo siguiente:

/* Header
----------------------------------------------- */

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
}

2. Se tiene que cambiar el valor del border de header, entonces el nuevo valor será: border:0 (sin px). Después en el mismo header agregamos lo siguiente:
background: url(http://Aquí-la-direccion-de-tu-imagen) no-repeat;
Entonces el resultado seria así:

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
background: url(http://i151.photobucket.com/andrewmusic1/Ayudaparaelblog.jpg) no-repeat;
border: 0 solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

3. En h1.title ocultamos el título, así que tendrás que agregar lo siguiente (lo que esta en azul):

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
visibility:hidden;
}

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 760 px y un alto de 120 px. Estos valores son simplemente un aproximado.
- Otra alternativa para este tipo de plantillas es utilizar: Cambiar el titulo por una imagen.
El resultado seria así:

En este ejemplo el titulo y la descripción del blog son imágenes.

Cambiar el título por una imagen
Cambiar la descripción por una imagen

Cambiar la cabecera por una imagen (Plantillas Minima) -44-

2007-03-21T09:05:00.000-05:00

Cabecera de página.- Visualiza el título y la descripción de tu blog.

Para insertar una imagen en la cabecera necesitaremos agregar algunos códigos y a su vez hacer algunas modificaciones en el blog. Esto prácticamente resulta para las plantillas Minima (Dark, Blue, Ochre, Lefty).
Te recomiendo que no te arriesgues hacer esto con las otras plantillas porque las modificaciones no van hacer iguales para las demás. Quizás esto, te puede servir simplemente para guiarte.

En la cabecera de las plantillas Minima tienen un borde, así que lo eliminaremos y luego agregamos la imagen:
1. Ir a Plantilla, después a Edición de HTML y clic en Expandir plantillas de artilugios. Entonces, ahora buscamos el siguiente código:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Aquí tenemos que cambiar el valor del border de header-wrapper y header. Entonces el nuevo valor para los dos será: border:0 (sin px).

2. Luego buscas el div con el id header-wrapper.

3. Una vez ubicado <div id='header-wrapper'>, tienes que reemplazar todo el código anterior por lo siguiente (lo que esta en azul agregas):

<div id='header-wrapper'>
<div id='header'>
<a href="http://aquí-la-dirección-de-tu-blog">
<img src="http://aquí-la-dirección-de-tu-imagen" /></a>
</div>
</div>

Header1

Le das un clic en: Confirmar y Guardar

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 660 px y un alto de 110 px. Estos valores son simplemente un aproximado.
- Si deseas agregarle un ancho y un alto a tu imagen tendrás que hacer lo siguiente:

**Por ejemplo he subido una imagen en Photobucket y he pegado lo siguiente:

Y he añadido al último esto: /

Cambiar el título por una imagen
Cambiar la descripción por una imagen

Generador de Iconos de E-mail -43-

2007-03-20T11:08:00.000-05:00

Existen páginas web en donde podemos generar iconos de correo electrónico para colocarlos en el blog, foros, etc. Lo único que tienes que hacer, es lo siguiente:

1. Ingresar a E-Mail Icon Generador.
2. Introducir la dirección de tu correo.
3. Clic en Generate y aparecerá tu icono.
4. Finalmente, copias la primera línea roja para pegarlo en tu blog o sino lo guardas en tu PC para luego subirlo en un hosting de imágenes o fotos.
En caso de que copies la línea roja tendrás que hacer lo siguiente:
<img src="Aquí-pegas-la-primera-línea-roja" />
Aquí unos ejemplos del resultado de esta herramienta:

Otras páginas:
correoIconos.com
Safe Mail
NeedAsig
mailonpix.com
hidetext
chxo
- Generador de Icono para Gmail
- Otro Generador de Icono para Gmail

Ocultar la barra de navegación de Blogger (1) -42-

2007-03-19T01:20:00.000-05:00

Probablemente a muchos usuarios les molesta la barra de navegación de Blogger porque desean que su blog tenga una mejor apariencia.
Por ejemplo en mi plantilla no esta la barra, pero agregue el logotipo de Blogger porque me parece muy importante el darle crédito a los de Blogger por permitirnos tener un espacio gratuito en la web.

Así que para ocultar esta barra tendrás que hacer lo siguiente:
- Ir a Plantilla, después a Edición de HTML (no necesitas Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues al final, porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.

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

]]></b:skin>

</head>

¿Puedo hacer que mis comentarios aparezcan en una ventana emergente? -41-

2007-03-15T00:00:00.000-05:00

ventana emergente=mini-ventana

Sí, encontrarás esta opción en Configuración, Comentarios:Después no olvides Guardar valores.

¿Qué es un Pop-up?

Agregar su URL en motores de búsqueda -40-

2007-03-12T09:55:00.000-05:00

Motor de búsqueda.- Es un sistema informático que indexa archivos almacenados en servidores web. Un ejemplo son los buscadores de Internet cuando se pide información sobre algún tema.

Si quieres aparecer en Google, MSN o en Altavista solamente tienes que agregar dos cosas: la URL de tu sitio web o blog y alguna descripción de la página. Una vez hecho esto, simplemente nos queda esperar a que estemos en los buscadores.

1. Agregar URL a Google:
http://www.google.es/addurl/?continue=/addurl

2. Agregar URL a MSN:
search.msn.com/docs/submit.aspx?FORM=WSDD2

3. Agregar URL a Altavista (Yahoo):
Aquí optas por Envío básico:
http://www.altavista.com/addurl/default

Agregar iconos de navegación al blog -39-

2007-03-09T00:05:00.000-05:00

Iconos de navegación.- Son imágenes enlace que incluimos en las páginas y que suelen tener la apariencia de botones o flechas, cuya función es ayudar al visitante a navegar por nuestra página.
Ejemplo:

1. Para agregar los iconos de navegación tendrás que ir a Plantilla (Template), luego a Edición de HTML y clic en Expandir plantillas de artilugios. Luego buscas el includable con el id nextprev.

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

2. Una vez ubicado <b:includable id='nextprev'>, tienes que reemplazar todo el código anterior por lo siguiente:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='http://i151.photobucket.com/albums/s137/andrewmusic1/left.gif'/></a>
</b:if>

<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='http://i151.photobucket.com/albums/s137/andrewmusic1/right.gif'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='http://i151.photobucket.com/albums/s137/andrewmusic1/home.gif'/></a>
</div>
<div class='clear'/>
</b:includable>

3. Por otro lado, si tu quieres cambiarlo por algún texto, tienes que reemplazar:
- <img src='http://...left.gif'/> (Entradas antiguas) por tu texto.
- <img src='http://...right.gif'/> (Entradas más recientes) por tu texto.
- <img src='http://...home.gif'/> (Página principal) por el texto que deseas.

Nota: Te voy a proporcionar algunos iconos que he subido a Photobucket para que los pegues en tu blog, pero si no te gustan, entonces tendrás que utilizar un buscador y escribir iconos de navegación

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/right-1.gif" />

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/home-1.gif" />

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/left-1.gif" />

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/right-2.gif" />

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/home-2.gif" />

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/left-2.gif" />

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/right-3.gif" />

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/home-3.gif" />

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/left-3.gif" />

Via: Hoctro's Place

Agregar un buscador - caja de búsqueda en el blog -38-

2007-03-05T11:42:00.000-05:00

Buscador.- En informática un buscador es una herramienta que permite al usuario encontrar un documento que contenga una determinada palabra o frase.

En esta oportunidad te proporcionare 3 buscadores para que lo pongas en tu blog.

Búsqueda de blogs en Blogger
Este buscador lo pegas en la Sidebar o en donde tu quieras, pero lo único que tienes que agregar es la dirección del blog (cambiar lo que esta en azul).

Via: Gem@ BLOG

Búsqueda de blogs en Google
Realiza búsquedas dentro del blog y además busca en la web.
Este buscador lo pegas en la Sidebar o en donde tu quieras, pero lo único que tienes que agregar es la dirección del blog (cambiar lo que esta en azul)

Sobre el aspecto puedes cambiar algunas cosas:
- El texto del botón es Buscar (VALUE=Buscar) puedes cambiarlo por algo diferente, como ok, ver, etc.
- El tamaño de la caja se cambia en donde dice size=15.
Via: Google

Búsqueda dentro del blog
Realiza búsquedas dentro del mismo blog.
Este buscador lo pegas en la Sidebar o en donde tu quieras.

Insertar elementos en la Sidebar (Blogger nuevo)
Insertar elementos en la Sidebar (Blogger antiguo)

MajikWidget -37-

2007-03-02T15:35:00.000-05:00

MajikWidget es un servicio para webblogs, el cual ofrecer pequeños widgets o mini-aplicaciones para que los autores los usen en sus blogs o sitios web y que funcionan de forma remota. En la colección de widgets hay encuestas, un sistema de ranking, entre otras cosas. Funciona sin que sea necesario nada más que copiar y pegar un código en las anotaciones donde quieras usarlas. Son sencillos pero a la vez útiles, bonitos y potentes, que muchas veces no van incluidos en las herramientas convencionales para crear blogs.
Para usar los servicios de MajikWidget, primero se tiene registrarse y añadir un código Javascript y luego puedes obtenerlos gratis o comprando cada uno de los widgets que se quieran usar. Los nuevos usuarios tienen 25 «créditos» gratis para probarlo, y luego se pueden comprar en paquetes de 500 créditos por 25 dólares.

Agregar una segunda Sidebar en el blog -36-

2007-02-24T13:53:00.000-05:00

#outer-wrapper - Define el blog entero.
#main-wrapper - Define la columna principal.
#sidebar-wrapper - Define la sidebar.

Para insertar una nueva Sidebar necesitaremos agregar algunos códigos y a su vez hacer algunas modificaciones en el blog. Esto prácticamente resulta para las siguientes plantillas de Blogger:
Todas las Minima (Dark, Blue, Ochre, Lefty, Stretch, Lefty Stretch), Denim, Dotsdark

1. En la plantilla tenemos que ubicar lo siguiente:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

2. Tendremos que modificar el width (ancho) del #outer-wrapper, el width (ancho) del #main-wrapper y el width (ancho) de la #sidebar-wrapper, para poder agregar la nueva sidebar. Además hay que agregarle un margen hacia la izquierda (margen-left) para que haya un espacio entre la nueva sidebar y la columna principal.
Ejemplo:

#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}

3. Después de haber modificado el ancho del blog entero, de la columna principal y de la sidebar, agregamos una declaración o código para la nueva sidebar (lo que esta en azul agregas a tu blog) después de:

#sidebar-wrapper {
width: 150px;
float: right;
...
}

#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

4. Ahora necesitamos hacer algunos cambios en el cuerpo de la plantilla. Tendrás que buscar el div con el id content-wrapper y de ahí tienes que agregar algunas líneas de código para que funcione.
Después de:

<div id="content-wrapper">
<div id="crosscol-wrapper" style="text-align:center">
<b:section class="crosscol" id="crosscol" showaddelement="no" />
</div>

Agregar lo siguiente:

5. Para que veas los cambios haces clic en Vista Previa y si crees que has hecho bien las modificaciones, simplemente clic en Guardar Plantilla.

Cambiar la Sidebar del lado izquierdo al derecho o viceversa

Cambiar la Sidebar del lado izquierdo al derecho o viceversa -35-

2007-02-13T00:30:00.000-05:00

#main-wrapper.- Define la columna principal.
#sidebar-wrapper.- Define la Sidebar.

Para colocar la Sidebar del lado izquierdo al derecho, tienes que buscar el siguiente código en la plantilla.

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Tienes que cambiar la parte que dice: float.- Permite ajustar el texto, left o right.

Por ejemplo, en #sidebar-wrapper cambias el float, en este caso lo modificas por left (izquierdo) y en #main-wrapper, cambias el float por right (derecho).
En el caso del lado derecho al izquierdo haces lo mismo.

Nota: Todas las plantillas contienen este código, algunas han puesto #main-wrap1, div#main o #main y han obviado la siguiente palabra, al igual que #sidebar-wrap, div#sidebar o #sidebar.

RadioBlog -34-

2007-02-12T23:43:00.000-05:00

1. Hay que descargar este archivo zip aquí y descomprimirlo en nuestro ordenador.
Una vez descomprimido aparecerá la carpeta RadioBlog, dentro hay los siguientes archivos:
a. config.xml .- En este archivo editaremos con el Bloc de notas o WordPad:
- Si queremos podemos modificar los colores de los botones o el texto del playlist, entre otras cosas:
Color1: Botones y el logo.
Color2: Texto en los botones y el fondo.
Color3: Texto del playlist (las canciones).
Color4: Borde del radioblog
Si quieres cambiar el Radioblog con fondo transparente, entonces cambia lo siguiente:
<bg_opacity value="100" /> el número 100 cámbialo por el 0.

b. playlist.xml .- En este archivo editaremos con el Bloc de notas o WordPad el track que esta entre dos etiquetas y ahí colocaremos toda la información que queremos incluir.
<tracks> </tracks>
- El trackMod: es un número que se obtiene de la fecha de descarga. Las instrucciones te dan el número correspondiente a la fecha y hora en que se ha producido la descarga.
- En title debes poner el nombre de la canción y su intérprete. Pero no se pueden poner acentos, ni eñes.
- En el path tienes que poner la ruta de la canción.
Finalmente tienes que poner tantas líneas como ésta que acabas de hacer con las canciones que quieras incluir, cambiando los valores title y path por lo que corresponda.
Ejemplo:

c. radioblog.swf .- Este archivo simplemente tendremos que subirlo a nuestro servidor (hosting).
d. rbcore.swf .- Este archivo simplemente tendremos que subirlo a nuestro servidor (hosting).
e. index.html .- Este archivo tendremos que subirlo y ahí se visualizarán los cambios realizados (hosting).

2. Empecemos a subir los mp3 en FreeWebTown.
- Se registran, llenan un formulario (nombre, e-mail, etc).
- Después clic en Audio para subir los mp3 y después tienes que copiar la ruta del mp3.
- No olvides que la ruta de los mp3 tienes que pegar en el archivo playlist.xml.

3. Después de pegar los mp3 en el playlist.xml (path=”ruta-del-mp3”), tendrás que subir primero los siguientes archivos: radioblog.swf, rbcore.swf, index.html, config.xml y al último subes el playlist.xml. Estos archivos lo subes en otra cuenta de FreeWebTown.
- El procedimiento es el mismo cuando subes mp3 o imágenes, pero para subir tienes que irte a File Manager.

4. El siguiente código lo pegas en donde tú quieras para que se visualice el RadioBlog:

Puedes cambiar los valores de width y height, según el ancho y alto deseado.
Nota: En donde dice: http://ruta-del-index.html tienes que reemplazarlo por el archivo index.html que has subido en el FreeWebTown.

Importante: Muchas páginas han publicado acerca de como poner el RadioBlog en un sitio web o blog. En mi publicación he obviado, el paso de convertir los mp3 a rbs porque es ahí en donde la mayoría se complica, así que no hay problema si en el playlist.xml pegan los mp3, igual se escuchan bien.

Insertar elementos en la Sidebar (Blogger antiguo)
Insertar elementos en la Sidebar (Blogger nuevo)

Hosting para subir archivos -33-

2007-02-11T22:31:00.000-05:00

Hosting (alojamiento o también conocido como hospedaje web, alojamiento web, web site hosting, web hosting o webhosting) es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, música, vídeo, o cualquier contenido accesible vía Web.
Aquí algunas páginas que trabajan muy bien:

EggDisk
Límite de almacenamiento: 6GB
Límite de tamaño para los archivos: 125MB
Bandwidth: 30GB mensual
URL: http://www.eggdisk.com
Tutorial

FileDen
Límite de almacenamiento: 500MB
Límite de tamaño para los archivos: 50MB
Bandwidth: 5GB mensual
URL: http://www.fileden.com
Tutorial

FreeWebTown
Límite de almacenamiento: 2GB
Límite de tamaño para los archivos: 125MB
Bandwidth: 2GB mensual
URL: http://www.freewebtown.com

MediaFire
Límite de almacenamiento: sin límite
Límite de tamaño para los archivos: 100MB
Bandwidth: sin límite
URL: http://www.mediafire.com

MediaMax
Límite de almacenamiento: 25GB
Límite de tamaño para los archivos: sin límite
Bandwidth: sin límite
URL: http://www.mediamax.com

Openomy (solo mp3)
Límite de almacenamiento: 1GB
Bandwidth: 10GB
URL: http://www.openomy.com

Nota: Últimamente el Mediamax y el Openomy han estado fallando pero funcionan bien.

Entradas ampliables - Leer Mas (el post aparece en la misma página principal) -32-

2007-02-10T16:37:00.000-05:00

Esto consiste, que cuando le das clic en “Leer Más”, aparece la publicación completa en la misma página principal y cuando le das clic en “Solo Resumen”, la publicación se reduce, el cual regresa al resumen.

1. Ir a Plantilla (Template), luego a Edición de HTML y clic en Expandir plantillas de artilugios. Después agregas el siguiente código entre <head> y </head>. Preferible que lo pegues al final (antes de </head>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

2. Luego buscas lo siguiente:

<div class='post-header-line-1'/>
<div class='post-body'>

<p><data:post.body/></p>

<div style='clear: both;'/> 
</div>

3. Después tendrás que borrar la siguiente linea: <div class='post-body'> y reemplazarla por el siguiente código:

4. Seguimos en la Plantilla. Una vez que han pegado el código anterior, ahora pegas lo siguiente después de <p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

Ahora puedes guardar los cambios de la plantilla.

5. Para que funcione esto necesitas un código más, que lo vas a pegar en:
- Ir a Opciones. Luego a Formato y en Plantilla de entrada lo pegas.
- Cuando vas a publicar algo, prácticamente en todas las entradas te saldrá este código, sin necesidad de estar escribiéndolo en cada entrada. No olvidar guardar los cambios. El código es el siguiente:

Aquí escribes el contenido.
<span id="fullpost">
Aquí escribes el resto del contenido que no se vera.
</span>

Veamos un ejemplo:

Click en las imagenes para agrandarla

Nota: Esto resulta práctico para artículos largos o cortos.

Crear resúmenes en entradas ampliables en la versión antigua del Blogger (Un simple botón, Leer Mas)

Crear resúmenes en entradas ampliables en la versión antigua del Blogger (Leer Mas)

Ocultar el Suscribirse a: Entradas (Atom) -31-

2007-02-09T21:58:00.000-05:00

b:includable.- Son trozos específicos de código que ejecutan alguna acción, el cual deben llevar un nombre (id) que debe ser único y que siempre debe haber un includable id='main', es decir que los b:includable son declaraciones de funciones.

Para ocultar el Suscribirse a:, tendrás que buscar el includable con el feed id feedLinksBody. Luego tienes que agregar algunas líneas de código para que funcione.

- Ir a Plantilla. Después a Edición de HTML y clic en Expandir plantillas de artilugios y buscar lo siguiente (agregar las líneas que están marcado con azul):


.....

<b:includable id='feedLinksBody' var='links'>
<b:if cond='data:blog.pageType == "item"'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:if>
</b:includable>

Estas dos líneas de código hacen que el Feed Link solo aparezca sobre la página del artículo y no en la página principal o en la página del archivo.
Por otro lado, si tu quieres cambiar el texto del Feed Link de Suscribirse a: por otro texto, tienes que reemplazar <data:feedLinksMsg/> por el texto que deseas.
Finalmente, lo mismo puedes hacer con el texto Entradas, solo reemplaza <data:f.name/> y también lo puedes hacer con (Atom), ahí reemplaza <data:f.feedType/>. Si deseas lo cambias por otro texto o sino lo eliminas.

Cambiar la Plantilla (Template) del Blog (1) -30-

2007-02-04T17:02:00.000-05:00

Para los que buscan un cambio de imagen en su blog, en Finalsense puedes encontrar estupendas plantillas para la versión antigua de Blogger y también para la nueva versión de Blogger

1. Elige la nueva plantilla que deseas usar (Get it now).
2. Copia el código que se te brinda para la plantilla que escogiste.
3. Ir al blog. Tienes que ir a Plantilla (Template), después a Edición de HTML (no necesitas Expandir plantillas de artilugios) y automáticamente te muestra el código de la plantilla que usas actualmente.
4. Selecciona todo el código y bórralo. Ahora pega el código que ya tenías copiado (la nueva plantilla).

5. Guarda los cambios. Reconstruye tu blog y listo.

Nota: Para hacer este cambio, te recomiendo que guardes primero el código de la plantilla que estas utilizando. Guárdalo en bloc de notas.

¿Qué es un Pop-up? -29-

2007-02-03T13:28:00.000-05:00

Un pop-up o ventana pop-up o ventana emergente, es una ventana nueva que aparece de repente en la pantalla de tu computadora.
Verás pop-ups, por ejemplo, cuando abras un programa nuevo, cuando cambies de un programa a otro o cuando utilices un menú desplegable. Además, un navegador puede lanzar una segunda ventana que aparece en la forma de una mini-ventana en la pantalla de tu computador.
Los pop-ups se utilizan mucho para hacer publicidad en la web, aunque la publicidad no es el único uso de estas ventanas pop-up.
El código a utilizar para lanzar una mini-ventana emergente, es el siguiente:

<a href="http://URL-de-la-imagen.jpg" target="_blank" onClick="window.open(this.href, this.target, 'width=300,height=400'); return false;">Abrir ventana</a>

Simplemente cambiar en href="http://URL-de-la-imagen.jpg" el nombre del archivo (imagen, pagina web o reproductor) que se abrirá en la ventana nueva y cambiar los valores de width y height, según el ancho y alto deseado (en pixeles).

Ejemplo 1:
Clic en: Ver encuesta anterior

Ejemplo 2:
Clic en: Escuchar música

Cambiar la descripción del blog por una imagen en la nueva versión de Blogger -28-

2007-02-02T00:19:00.000-05:00

1. Lo siguiente que debes hacer es ir a Plantilla (Template), luego a Edición de HTML y clic en Expandir plantillas de artilugios y buscas lo siguiente:

2. Una vez ubicado el código, tendrás que borrar <data:description/> para luego agregar el siguiente código: <img src="http://Aquí-la-dirección-de-tu-imagen" /> y a su vez reemplazar la URL de la imagen que has subido en algún hosting.
Así que lo único que tienes que hacer es sustituir el código (<data:description/>). Esta modificación hará que la imagen aparezca en la descripción.
Ejemplo:

Nota:
- Cuando borras el código (<data:description/>) prácticamente se borra la descripción del blog.

- En cuanto lo que es ancho y alto tendrías que calcular tu imagen al subirlo en un hosting, para que te quede perfecto. En todo caso si te es muy difícil, puedes hacer lo siguiente:
En <img src="http://Aquí-la-dirección-de-tu-imagen" /> agrégale width y height.
Ejemplo:
<img src="http://harrypotter.jpg' width="100" height="250" />.

**Por ejemplo he subido una imagen en Photobucket y he pegado lo siguiente:

Y he añadido al último esto: /

Últimos post en el Blog (1) -27-

2007-02-01T09:14:00.000-05:00

Post.- Se refiere a la publicación de un artículo o entrada nueva en un blog.

En la nueva versión de Blogger se puede añadir en la Sidebar (Barra lateral del blog) los títulos de los últimos post.

1. Ir a plantilla, luego a Elementos de la página y en Añadir un elemento de página, seleccionan Feed. Ahí tendrán que agregar la URL del feed, en este caso seria así:
http://el-nombre-de-tu-blog.blogspot.com/feeds/posts/full
Ejemplo:
http://ayudaparaelblog.blogspot.com/feeds/posts/full

2. Luego le pones un título, que puede ser: Últimos Post, etc.

3. Eliges el número de post que quieres que se vean. Además, estos post pueden estar con su respectiva fecha y autor.

Nota: Muy fácil de incorporarlo en tu blog.

Cambiar el título del blog por una imagen en la nueva versión de Blogger -26-

2007-01-29T12:10:00.000-05:00

Para alojar una imagen puedes usar Imageshack o Photobucket. En cambio, si quieres que sea en blogger debes crear una nueva entrada o post. Desde ahí, subes una imagen al editor y después te vas a Edición de HTML, para copiar la ruta de la imagen.

1. Lo siguiente que debes hacer es ir a Plantilla (Template), luego a Edición de HTML y clic en Expandir plantillas de artilugios y buscas lo siguiente:

2. Una vez ubicado el código, tendrás que borrar <data:title/> para luego agregar el siguiente código: <img src="http://Aquí-la-dirección-de-tu-imagen" /> y a su vez reemplazar la URL de la imagen que has subido en ImageShack, Photobucket o en Blogger.
Así que lo único que tienes que hacer es sustituir los dos códigos(<data:title/>). Esta modificación hará que la imagen aparezca en el título.
Ejemplo:

Nota:
- Cuando borras los dos códigos (<data:title/>) prácticamente se borra el título del blog.

- En cuanto lo que es ancho y alto tendrías que calcular tu imagen al subirlo en un hosting, para que te quede perfecto. En todo caso si te es muy difícil, puedes hacer lo siguiente:
En <img src="http://Aquí-la-dirección-de-tu-imagen" /> agrégale width y height.
Ejemplo:
<img src="http://spiderman3.jpg" width="100" height="250" />

- Probablemente algunas plantillas no tienen el mismo código que les he puesto, pero tienen algo parecido. Sin embargo, incluyen <data:title/>.

**Por ejemplo he subido una imagen en Photobucket y he pegado lo siguiente:

Y he añadido al último esto: /

Usuarios Online en el Blog -25-

2007-01-24T12:39:00.000-05:00

Si quieres ver cuantos usuarios están en línea en estos momentos en tu blog/sitio web, aquí te dejo algunas páginas para que puedas colocarlo en el blog. Es muy fácil de colocarlo.
Por ejemplo, algunas páginas solamente te pedirán la dirección de tu blog (URL) y un correo electrónico (e-mail), en cambio en otros tendrás que registrarte.

Ejemplo:

who's.amung.us (No necesitas registrarte, sólo debes insertar un pequeño código donde deseas que aparezca la imagen con el número de usuarios online y listo).
Macareno.net (Solamente ingresas la URL de tu blog).
TwoSpots UserOnline (Ingresas la URL de tu blog, un correo electrónico y después escoges un diseño).
UsersOnline.com (Nombre de usuario, password, e-mail y URL).
FastOnlineUsers.com (Clic en HTML Code y en el código que te proporcionan le cambias www.CHANGE_TO_YOUR_DOMAIN.com por la URL de tu blog).
JSTracker (URL de tu blog y escoges tu lenguaje).
AldeaMix.com (E-mail, fuente, tamaño y color de fuente, formato de texto, URL).
FreeOnlineUsers.com (Nombre, e-mail, password).
Miarroba.com (Registrarte y tiene una extensa galería. Además te ofrece otros servicios).
PromocionaNet (Registrarte y además te ofrece otros servicios).

Insertar elementos en la Sidebar (Blogger nuevo)
Insertar elementos en la Sidebar (Blogger antiguo)

Ranking de 5 estrellas en la nueva versión de Blogger -24-

2007-01-22T13:38:00.000-05:00

Ahora puedes incorporar en el blog un ranking de 5 estrellas en la nueva versión de Blogger para cada post.
Por ejemplo, en algunos directorios, tales como Blogalaxia o Perúblogs, encontramos en la parte derecha un ranking, el cual algunos blogs/sitios web han agregado una barrita de 5 estrellas a su blog, con el fin de que el usuario pueda valorar el post. Esto puede deberse tal vez por la calidad de sus publicación o por la utilidad de sus escritos
Si deseas poner esta barrita en tu blog hazlo de la siguiente manera:
1. El código del ranking de 5 estrellas es el siguiente:

<iframe 
expr:src='"http://rank.blogalaxia.com/pbrate.php?color=ffffff&amp;url=" + data:post.url' frameborder='0' height='15' marginheight='0' 
marginwidth='0' scrolling='no' style='margin:0; padding:0' width='70'></iframe>

2. El código proporcionado anteriormente, lo tendrías que pegar de la siguiente manera:
- Buscar:

Después de este código lo pegas o sino después de:

Después de todas estas líneas pegas el código.

3. Esta barrita prácticamente te saldrá en todos los posts, pero si quieres en algunos tendrás que pegarlo cuando vas a publicar algo.
Nota: Para que esto te sirva necesitas agregar tu blog en los directorios antes mencionados.

**En mi opinión me parece una idea interesante, porque creo que la popularidad de un blog no se puede medir solo por el número de visitas, sino por su calidad o utilidad, entre otras cosas.

Ranking de 5 estrellas en la versión antigua de Blogger

Insertar elementos en la nueva versión de Blogger -23-

2007-01-20T13:15:00.000-05:00

En la nueva versión de Blogger, es más sencillo colocar en la Sidebar (Barra lateral del blog) un chat, un reloj, entre otras cosas.

1. Ir a plantilla, luego a Elementos de la página y en Añadir un elemento de página seleccionan HTML/Javascript. Ahí tendrán que agregar un título y luego pegar en el contenido el código del accesorio, que puede ser un reloj, un tagboard, un calendario, un chat, un reproductor, imágenes, etc.

2. Cuando vas agregar un calendario, un reloj, entre otras cosas y le agregas un título, pues ese título te sale todo en minúscula. Ahora bien, podrías hacer lo siguiente para que te salga todo en mayúscula o mayúscula con minúscula.
Tendrás que hacer lo siguiente:
- Ir a plantilla, luego a Edición de HTML (no necesitas expandir plantilla de artilugios) y ubicas lo siguiente:

/* Sidebar
----------------------------------------------- */
.sidebar h2 {
margin:1em 0 .25em;
line-height: 1.4em;
font: $sidebarHeaderFont;
color: $sidebarHeaderColor;
text-transform:lowercase;
}

Donde dice: text-transform:lowercase; le puedes cambiar el lowercase por alguno de estos atributos:
a) capitalize: Convierte en mayúsculas el primer carácter de cada palabra.
Ejemplo:
text-transform: capitalize;
archivo del blog, se transforma en: Archivo Del Blog

b) uppercase: Convierte a mayúsculas todas las letras del texto.
Ejemplo:
text-transform: uppercase;
archive del blogtesting, se transforma en: ARCHIVO DEL BLOG

c) lowercase: Convierte a minúsculas todas las letras del texto.
Ejemplo:
text-transform: lowercase;
ArChivo DEL BLog se transforma en: archive del blog

d) none: No realiza cambios en el texto.
Ejemplo:
text-transform: none;
ArChivo DEL BLog se transforma en: ArChivo DEL Blog

En conclusión, la propiedad text-transform permite que el texto se transforme en mayúsculas o minúsculas.

**Esto también lo puedes aplicar para el titulo del blog (ubicas #header h1), para la descripción (Description), para los comentarios (Comments y ubicas comment-author) y para las publicaciones ubicas Posts, desde ahí puedes cambiar en date-header (Fecha) o en post-footer (Publicado por).

Insertar elementos en la Sidebar en la versión antigua de Blogger

Últimos comentarios en el Blog (1) -22-

2007-01-17T14:43:00.000-05:00

En la nueva versión de Blogger se puede añadir en la Sidebar (Barra lateral del blog) los últimos comentarios que dejan, los que realizan una visita a tu blog.

1. Ir a plantilla, luego a Elementos de la página y en Añadir un elemento de página, seleccionan Feed. Ahí tendrán que agregar la URL del feed, en este caso seria así:
http://el-nombre-de-tu-blog.blogspot.com/feeds/comments/default
Ejemplo:
http://ayudaparaelblog.blogspot.com/feeds/comments/default

2. Luego le pones un titulo, que puede ser: Aquí me escribieron, Últimos comentarios o Recientes comentarios, etc.

3. Eliges el número de comentarios que quieres que se vean. Además, estos comentarios pueden estar con su respectiva fecha y autor.

Nota: Muy fácil de incorporarlo en tu blog.

Crear resúmenes de entradas ampliables en la nueva versión de Blogger (Leer Mas) -21-

2007-01-16T11:56:00.000-05:00

1. Ir a Plantilla (Template). Luego a Edición de HTML y clic en Expandir plantillas de artilugios y buscas lo siguiente:
<div class='post-header-line-1'/>
<div class='post-body'>

<p><data:post.body/></p>

<div style='clear: both;'/> 
</div>

2. Luego agregas lo siguiente después de <div class='post-body'>

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

3. Seguimos en la Plantilla. Una vez que han pegado el código anterior, ahora pegas lo siguiente después de <p><data:post.body/></p>

   <a expr:href='data:post.url'>Leer Mas...</a>      
</b:if>

Ahora puedes guardar los cambios de la plantilla.

4. Para que funcione esto necesitas un código más, que lo vas a pegar en:
- Ir a Opciones. Luego a Formato y en Plantilla de entrada lo pegas.
- Cuando vas a publicar algo, prácticamente en todas las entradas te saldrá este código, sin necesidad de estar escribiéndolo en cada entrada. No olvidar guardar los cambios. El código es el siguiente:
Aquí escribes el contenido.
<span class="fullpost"> (código)
Aquí escribes el resto del contenido que no se vera.
</span> (código)

Veamos un ejemplo:

Click en las imagenes para agrandarla

**Ahora bien, puedes agregar otro complemento más y es una imagen en vez del texto, tendrías que hacer lo siguiente, por ejemplo:
-Crear una imagen pequeña que diga: Leer Mas y luego lo subes a Imageshack.
-Luego en donde dice:
<a href='data:post.url'>Leer Mas...</a>
Reemplazas el texto Leer Mas por lo siguiente:
<img src="la-ruta-de-la-imagen" />
- De esta forma se eliminó el texto que decía Leer Mas... por la imagen.

Nota: Esto resulta práctico si dispones de una página que incluye muchos artículos largos.

Entradas ampliables - Leer Mas (el post aparece en la misma página principal)

Crear resúmenes en entradas ampliables en la versión antigua del Blogger (Un simple botón, Leer Mas)

Crear resúmenes en entradas ampliables en la versión antigua del Blogger (Leer Mas)

Encuesta para el Blog: Dpolls -20-

2007-01-10T20:31:00.000-05:00

Dpolls es una web en la que puedes crear tu propia encuesta de manera sencilla, el cual los resultados se despliegan en el mismo cuadro y no manda a los visitantes afuera del blog. Pero esta encuesta no lo puedes pegar en la Sidebar (Barra lateral del blog) porque es muy grande. Tiene un buen diseño.

1. Entrar a Dpoll.
2. Te registras (Register) y escribes un mombre de usuario, nombre, e.-mail, etc. Fácil.
3. Luego recibirás un correo para poder activar tu cuenta y así poder crear la encuesta.
4. Prácticamente es fácil. Solamente son 5 pasos para crear tu propia encuesta.
- Si deseas colocarlo en el blog, le das clic en Place in your site.
- Ingresas tu pregunta.
- Agregas las alternativas de la pregunta (Clic en el signo + para agregar).
- Escoges una categoría y subcategoría, para que veas como son los diseños.
- Indicas un cierto periodo a tu encuesta (día, semanas, meses) y a su vez escoges un limite de votos, que puede ser 1000, 10000 o sin limite (de acuerdo a lo que tu quieras).

5. Al crear la encuesta, luego te proporcionará el código (HTML) para pegarlo en el blog o sitio web.

Ejemplo 1

Ejemplo 2

** Para que quede más claro como puedes usar este tipo de encuesta visita aquí.

Cambiar el título del blog por una imagen -19-

2007-01-02T14:43:00.000-05:00

Para alojar una imagen puedes usar Imageshack. En cambio, si quieres que sea en blogger debes crear una nueva entrada o post. Desde ahí, subes una imagen al editor y después te vas a Edición de HTML, para copiar la ruta de la imagen.

1. Lo siguiente que debes hacer es ir a Plantilla. Luego deberán buscar lo siguiente:

2. Una vez ubicado el código, tendrás que borrar <$BlogTitle$> para luego agregar el siguiente código: <img src="http://urldelaimagen.jpg" /> y a su vez reemplazar la URL de la imagen que has subido en ImageShack o en Blogger.

Nota: Probablemente algunas plantillas no tienen el mismo código que les he puesto, pero tienen algo parecido. Sin embargo, incluyen <$BlogTitle$>.

Existe otra manera de modificar, el cual tendrías que localizar lo siguiente en la plantilla:

/* Header
----------------------------------------------- */
#header {
background:#be4 url("http://www.blogblog.com/no565/topleft.gif") no-repeat left bottom;
padding:0 0 0 160px;
margin:0 0 10px;
color:#fff;
width:100%;
width/* */:/**/auto;
width:auto;
}
#blog-title {
background:url("http://www.blogblog.com/no565/bg_header.gif") no-repeat left top;
margin:0;
padding:40px 0 0;
font:bold 275%/97px Helvetica,Arial,Verdana,Sans-serif;
text-transform:lowercase;
}
#blog-title a {
color:#fff;
text-decoration:none;
}
.postpage #blog-title {
padding-top:0;
background-position:0 -40px;
}

Simplemente tendrías que sustituir las dos URL´s en background por la URL de tu imagen. Esta modificación hará que la imagen aparezca como fondo en la cabecera. Sin embargo el título y la descripción del blog seguirán manteniéndose, siempre y cuando no lo hayas borrado <$BlogTitle$>.

Insertar elementos en la SideBar del Blog -18-

2006-12-24T14:17:00.000-05:00

SideBar.- Barra lateral del blog en donde por lo general se coloca el BlogRoll, el LinkBlog y detalles sobre el blog en general.

Blogroll.- Es una colección de enlaces de weblogs (blog o bitácora) para encontrar más weblogs. Los autores de weblogs pueden definir diferentes criterios para incluir otros weblogs en sus blogroll. Habitualmente, el listado de otros weblogs se compone webs que los propios autores visitan con asiduidad.

LinkBlog.- Enlaces a artículos específicos, ubicados en la barra lateral del blog.

1. En la plantilla tendremos que buscar el siguiente texto: Begin #sidebar.
Ejemplo:

<div id="sidebar"><div id="sidebar2">



<$BlogMemberProfile$>



<mainorarchivepage>

Continúa más código

</div>

2. Entre  y  podemos pegar nuestro tagboard, reloj, calendario, chat, entre otras cosas.

Cambiar posted by y comments en el Blog -17-

2006-12-18T22:58:00.000-05:00

Post.- Se refiere a la publicación de un artículo o entrada nueva en un blog.

1. Para cambiar el posted by por algo más personalizado, deberán buscar en la plantilla o template el siguiente código:

<em>posted by <$BlogItemAuthorNickname$> at <a href="<$BlogItemPermalinkUrl$">" title="permanent link"><$BlogItemDateTime$></a></em>

Cambiamos el posted by por lo que deseamos que aparezca en nuestro blog.
Por ejemplo puede ser: Publicado por, Escrito por, entre otras palabras o frases que se les ocurra.
Además, en donde dice at reemplazamos por “a las”

2. Luego más abajo podemos cambiar el comments, buscando el siguiente código:

<mainorarchivepage><blogitemcommentsenabled>
<a class="comment-link" href="">"<$BlogItemCommentFormOnclick$>>
<$BlogItemCommentCount$> comments</a>

Cambiamos el comments. Por ejemplo: Deja tu huella, Deja tu comentario, Comenta, entre otras palabras o frases que se les ocurra.
Nota: Si deseas que salga mayúscula y minúscula borras lo siguiente:

*En el caso que se hayan cambiado a la nueva versión del Blogger, es más sencillo:
Ir a plantilla, luego a Elementos de la página y en Entradas del Blog podrán editarlo. Ahí tendrán que seleccionar los elementos que quieran que se muestren en su blog.

*Por otro lado, si estas en la nueva versión del Blogger y has optado por Recuperar la plantilla clásica, simplemente ubicas lo siguiente:
<em><$I18NPostedByAuthorNickname$> <$I18NAtTimeWithPermalink$></em>
Tendrás que borrar lo siguiente:
<$I18NPostedByAuthorNickname$> y reemplazar todo este texto por lo que quieras.

Encuesta para el Blog: NeomyzPolls -16-

2006-12-13T00:43:00.000-05:00

NeomyzPolls es una web en la que puedes crear tu propia encuesta de manera muy sencilla. Este servicio tiene muy buenos diseños y es muy fácil de utilizar su panel de control, el cual permite que veas una breve estadística. Puedes también corregir tu encuesta muy fácilmente. Pero uno de los detalles es que solamente tienes un máximo de 100 visitas diariamente, es decir que hay un limite por día (100 visitas).

*En caso de que no encuentren la encuesta que he publicado, es porque demasiada gente me ha visitado, pero como mi blog no es tan conocido entonces no va ha desaparecer.

1. Ingresar a NeomyzPoll
2. Te registras (e-mail, nombre, etc).
3. Luego podrás crear la encuesta.
4. Prácticamente, ahí te dice todos los pasos que tienes que seguir.

5. Si quieres pegar el código has clic en Get HTML Code, si quieres editarlo en Edit Poll, quizás verlo clic en View Poll o un enlace clic en Get Poll Link.

Muy fácil de colocarlo en el blog.

Por otro lado Neomyz también te ofrece juegos en línea y las últimas noticias para colocar en tu blog/sitio web.

Insertar elementos en la Sidebar (Blogger antiguo)
Insertar elementos en la Sidebar (Blogger nuevo)

Ranking de 5 estrellas en el Blog -15-

2006-12-12T17:12:00.000-05:00

Ahora puedes incorporar en el blog un ranking de 5 estrellas para cada post.
En directorios, tales como Blogalaxia o Perúblogs, encontramos en la parte derecha un ranking, el cual algunos blogs/sitios web han agregado una barrita de 5 estrellas a su blog, con el fin de que el usuario pueda valorar el post. Esto puede deberse tal vez por la calidad de sus publicación o por la utilidad de sus escritos.
Si deseas poner esta barrita en tu blog hazlo de la siguiente manera:
1. En la plantilla tendrás que ubicar esto:

<p class="post-footer">
<em>posted by <$BlogItemAuthorNickname$> at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>

2. Puedes poner el código justamente después después de </a> o al final de </em>. En todo caso en donde mejor te parezca.
3. Tendrás que pegar el siguiente código:

En donde dice: color=ffffff puedes cambiar por otro color.

4. Esta barrita prácticamente te saldrá en todos los post, pero si quieres en algunos tendrás que pegarlo cuando vas a publicar algo.
Nota: Para que esto te sirva necesitas agregar tu blog en los directorios antes mencionados.

Cortesía: Blogalaxia

Colores RGB

**En mi opinión me parece una idea interesante, porque creo que la popularidad de un blog no se puede medir solo por el número de visitas, sino por su calidad o utilidad, entre otras cosas.

Letrero luminoso para el Blog -14-

2006-12-08T15:27:00.000-05:00

Signbot es una pequeña utilidad que nos permite crear nuestros propios letreros luminosos al estilo de los centros comerciales, en base a LED (Light Emitting Diode, la traducción es: Diodo Emisor de Luz).

1. Ingresar a Signbot.
2. Solo debemos escribir la palabra o frase del anuncio, escoger el tamaño (pequeño, mediano o grande) y en unos segundos nos presenta el letrero listo para su descarga en formato GIF o alojarlo directamente en ImageShack.
3. Al crear el letrero, si deseas le das click en Host to ImageShack y luego escoges el que dice: Hotlink for Websites. De ahí, tienes que insertarlo en HTML/Javascript.
4. Es bastante útil para decorar el blog o sitio web.

Otra página:
Joombly

Insertar elementos en la Sidebar (Blogger nuevo)
Insertar elementos en la Sidebar (Blogger antiguo)

Reproductor en el Blog: Flash Mp3 Player -13-

2006-12-07T10:55:00.002-05:00

1. Hay que descargar este archivo zip aquí y descomprimirlo en nuestro ordenador.
Una vez descomprimido aparecerá la carpeta Flash MP3 Player, dentro hay los siguientes archivos:
a. config.xml .- En este archivo editaremos con el Bloc de notas o WordPad:
-El que empiece automáticamente o no del reproductor cuando se carga el blog.
- La repetición de los archivos, sea uno, todos o que suene toda la lista entera una vez.
- Volumen del reproductor (0 a 100).
- Mostrar o no nuestra lista de reproducción.
- Elegir si los enlaces de la lista de reproducción van a abrirse en nueva página o en la misma.
- Escoger los colores de fondo o una imagen para el reproductor (<jpgfile> </jpgfile>).
Nota: En cuanto a los colores los cambios serian en:
<backcolor> </backcolor>
<frontcolor> </frontcolor>
<lightcolor> </lightcolor>

b. playlist.xml .- En este archivo editaremos con el Bloc de notas o WordPad:
- track: Entre estas dos etiquetas colocamos toda la información que queremos incluir.<track> </track>
- annotation: En esta etiqueta colocaremos el título de la canción.

<annotation> </annotation>
- location: Ruta del archivo del audio mp3. <location> </location>
- info: Pagina web del grupo o artista. <info> </info>
- image: Ruta de la imagen que se mostrará durante la reproducción de la canción. (40x40 hasta 100x100). <imgage> </imgage>
Nota: Excepto las dos primeras etiquetas, las demás son opcionales.

c. mp3player.swf .- Este archivo simplemente tendremos que subirlo a nuestro servidor (hosting), no necesita modificarse.

2. Empecemos a subir los mp3 en Mediamax (Hosting de 25 Gbs de almacenamiento gratuito).
- Se registran (Sign Up), llenan un formulario (nombre, e-mail, etc). Cuando estén registrados les llegara un e-mail para que activen su cuenta y puedan subir sus archivos.
- Activada su cuenta. Clic en Upload para subir los mp3. Después le das clic en View your file manager.
- Para poder copiar la ruta del mp3 tendrán que mover o copiar sus canciones.
Veamos un ejemplo:

Click en la imagen para agrnadarla

- No olvides que la ruta de los mp3 tienes que pegar en el archivo playlist.xml.
Nota: Los mp3 también lo puedes subir en Openomy (ver Dewplayer).

3. Para subir imágenes lo pueden hacer en ImageShack. En este caso pegan la ruta en donde esta la imagen en playlist.xml. Esto es opcional.
4. Después de pegar los mp3 y las imágenes en el playlist.xml, tendran que subir los 3 archivos: config.xml, playlist.xml y mp3player.swf. Estos archivos lo pueden subir en Fileden (Hosting).
El procedimiento es el mismo cuando subes mp3 o imágenes.
5. El siguiente código lo pegas en donde tú quieras para que se visualice el Flash Mp3 Player:

Nota: En donde dice:
http://ruta_mp3player.swf
http://ruta_archivo_config.xml
http://ruta_archivo_playlist.xml
Estas 3 rutas tienes que reemplazarlo por los archivos que has subido en el Fileden.
*Puedes cambiar los valores de width y height, según el ancho y alto deseado.

*Correción: (http://ruta_archivo_config.xml&file=http://ruta_archivo_playlist.xml), el signo & es junto.

Color Codes

Insertar elementos en la Sidebar (Blogger nuevo)
Insertar elementos en la Sidebar (Blogger antiguo)

Menú desplegable (1) -12-

2006-12-03T23:50:00.000-05:00

Un menú desplegable viene a ser una lista de opciones para que el usuario escoja alguna que le interese. Así que, es muy útil ofrecerles un menú desplegable.
A continuación te explico cómo tendrás que hacerlo. Evidentemente, esto solamente es un ejemplo. Tú tendrías que incluir tus propias secciones y textos sustituyendo a los que aquí aparecen.
1. Tomemos como punto de partida un menú en el que aparezcan las siguientes secciones:
- Reproductores
- Encuestas
- Chat
- Tagboard
2. Para disponerlas dentro de un menú desplegable, debemos elegir, en primer lugar el lugar de nuestro blog donde deseamos incluirlo (te recomiendo, por su visibilidad, en la esquina superior derecha). Una vez hecho esto, pega allí el siguiente código:

Explicación

Click en la imagen para agrandarla

Nota: Tendrás que pegar en:
- Ir a Elementos de la página, clic en Añadir un elemento de página y seleccionar HTML/Javascript.

Chat para el Blog: Gabbly -11-

2006-12-01T23:50:00.000-05:00

Gabbly es un servicio de chat que te permite chatear sobre cualquier página web.

1. Entrar a Gabbly.
2. Luego seleccionar Embed, en donde tendrás que llenar un formulario con respecto al chat. Desde ahí, podrás indicar el tamaño (ancho y alto), luego colocar la dirección de tu blog, para que así, puedas obtener el código que se va a pegar en el blog.

Click en la imagen para agrandarla

3. Cuando pegas una dirección web en el chat y al hacerle clic en el link (enlace), serás llevado a dicha página con la ventana del chat Gabbly. Además, puedes silenciar a la gente haciendo clic en su nombre en la lista de la ventana derecha y también se puede encender o apagar el pequeño sonido que hace este chat.

Click en la imagen para agrandarla

Ahora, simplemente nos queda probarlo.

Insertar elementos en la Sidebar (Blogger nuevo)

Tagboard para el Blog: Cbox -10-

2006-11-29T11:46:00.000-05:00

Un tagboard es parecido a un chat que permite que la gente deje rápidamente mensajes en el blog o sitio web. Simplemente son listas de mensajes cortos.
1. Ingresar a Cbox.
2. Te inscribes (Sign Up) y el primer paso es llenar un formulario en donde te pide nombre de usuario, e-mail, la dirección del blog/sitio web, entre otras cosas. Muy fácil de llenar.

Click en la imagen para agrandarla

3. Cuando te has registrado en Cbox, ellos te envían un e-mail con todos tus datos y a la vez te dan un link (enlace) para poder empezar a crear tu tagboard.
Ejemplo: http://cbox.ws/admin.php (clic en esa dirección).
4. Al ingresar a Cbox te saldrá un código para pegarlo en el blog. Simplemente copiar y pegar.
5. En este tagboard puedes modificar muchas cosas, como por ejemplo: Como quieres que se muestre los mensajes desde nuevo a viejos (Oldest at top) o viceversa (Newest at top), el ancho y el alto, el número de mensajes que deseas que se muestre, cambiar el color del tagboard, la letra, el borde y hasta puedes bloquear a esos usuarios que dejan insultos (Bloqueas su dirección IP), entre otras cosas.

Click en la imagen para agrandarla

Insertar elementos en la Sidebar (Blogger nuevo)
Insertar elementos en la Sidebar (Blogger antiguo)

FeedBurner: Gestiona el Feed del Blog -9-

2006-11-27T12:00:00.000-05:00

FeedBurner es un servicio gratuito que intermedia entre los ficheros RSS/ATOM de un sitio web y sus lectores. De esta manera, este servicio administra los feeds y nos proporciona, a cambio, datos estadísticos.
Por ejemplo:
La cantidad de lectores, el lector RSS que se utilizan y los feeds más leídos.

1. Ingresar a www.feedburner.com
2. Te registras (Register) y el primer paso es llenar un formulario en donde te pide nombre, e-mail y una pregunta secreta con su respectiva respuesta. Muy fácil de llenar.
3. Luego ingresas la dirección de tu blog/sitio web y después seleccionas el tipo de feed que deseas (te recomiendo rss).

Click en la imagen para agrandarla

4. Luego clic en Active Feed. Una vez activado el feed tendrías opciones para mejorar en una versión profesional (Pago, clic en Next), pero si no deseas entonces le das clic en Skip directly to feed management (Saltearse directamente para la administración del feed).

Click en la imagen para agrandarla

5. En la siguiente sección tienes varias opciones. Por ejemplo vamos a la sección Publicize (para hacer público nuestro feed).
6. En la sección Publicize existen varias opciones. Vayamos a Headline Animador, el cual puedes crearte un banner animado en la que se visualizara los temas que has publicado. No olvides dar clic en Active para copiar y pegar el código que te saldrá para colocarlo en el blog.

Click en la imagen para agrandarla

7. Luego iremos a Feed Count, el cual es un grafico dinámico que siempre te mostrara la cantidad de lectores que leen tu blog. No olvides dar clic en Active para copiar y pegar el código que te saldrá para colocarlo en el blog.

Click en la imagen para agrandarla

8. Luego iremos a Chicklet Chooser, el cual es una pequeño imagen que identifica a varios lectores para que puedan agregarse o también se podrían suscribirse dichos lectores. Esta opción ayuda a los usuarios a suscribirse fácilmente. Hay un código para pegarlo en el blog.
9. Luego hay Creative Commons (Derechos de autor), Email Subscriptions, entre otras cosas.

Nota: Este servicio tiene demasiadas opciones y he tratado de explicar mas sobre como hacer público tu Feed. Ahora es cuestión de que ustedes descubran más de este servicio.
En todo caso, probablemente podria haber una segunda publicación con respecto a otra opción.

Imágenes Personalizadas: ImageChef -8-

2006-11-24T23:55:00.000-05:00

ImageChef es una página que nos permite crear imágenes personalizadas, el cual puedes colocarlo en el blog/sitio web. Existe una variedad de plantillas para agregarle un mensaje personalizado, también puedes enviar a manera de tarjeta de felicitación a los amigos e incluso puedes crearte un icono para el Messenger, entre otras cosas.
1. Ingresar a www.imagechef.com
2. Te registras (Register) y el primer paso es llenar un formulario en donde te pide nombre, e-mail, entre otras cosas. Muy fácil de llenar.
3. Hay una variedad de imágenes para personalizar, simplemente seleccionas la que mas te gusta.
4. Escribes algún texto o frase que quieras que se muestre, para colocarlo en el blog.
Veamos un ejemplo:

Click en la imagen para agrandarla

Insertar elementos en la Sidebar (Blogger antiguo)
Insertar elementos en la Sidebar (Blogger nuevo)

Encuesta para el Blog: FreePolls -7-

2006-11-21T23:35:00.000-05:00

FreePolls es una web en la que puedes crear tu propia encuesta de manera sencilla. Puedes modificar tu encuesta muy fácilmente, ver y borrar los comentarios, archivar tus resultados, duplicar encuestas, agregar una imagen a tu encuesta y el usuario podrá dejar un comentario sobre la encuesta, entre otras cosas.
1. Entrar a freepolls.com
2. Te inscribes (Sign Up) y el primer paso a escoger es un nombre de usuario para identificarte.

Click en la imagen para agrandarla

3. Luego te inscribes en Free (Sin pagar, gratuitamente) y luego llenas un formulario en donde te pide nombre, e-mail, entre otras cosas. Muy fácil de llenar. Finalmente te saldrá un mensaje: Thank you for you order.

Click en la imagen para agrandarla

4. Después clic en Create New Poll (Crear una nueva encuesta), el cual tendrás que llenar tu encuesta: formular tus pregunta con sus respectivas respuestas (opciones).

Click en la imagen para agrandarla

5. Luego tendrás que ponerle un nombre a la encuesta, su categoría, poner la dirección de tu página, además del nombre.

Click en la imagen para agrandarla

6. Después escoges el color de tu encuesta, guardas los cambios (Save chages) y luego escogerás el tipo de encuesta que quieras (Radio Buttons, Horizontal, Checkboxes, Menú Desplegable).
7. Finalmente clic en Get HTML y saldrá un código que tendrás que copiar y pegar en tu blog (Donde tu quieras).

Click en la imagen para agrandarla

Nota: También es posible poner una imagen en tu encuesta, el valor del tamaño seria 60 x 60 (ancho x alto).

Click en la imagen para agrandarla

Insertar elementos en la Sidebar (Blogger antiguo)
Insertar elementos en la Sidebar (Blogger nuevo)

Reproductor para el Blog: Dewplayer -6-

2006-11-20T23:46:00.000-05:00

Existen muchos reproductores para colocarlos en el blog, así que este tema lo trataremos poco a poco, el cual cada uno tiene sus ventajas y desventajas.
Dewplayer es un reproductor en flash, pero sólo te permite reproducir archivos mp3 individuales.
Hay 4 versiones:

Dewplayer Mini
Dewplayer Normal
DewplayerMúltiple
Dewplayer con control de volumen

Estos reproductores utilizan un código para poder colocarlos en el blog, así que luego te proporcionare este código. Empezemos:

1. Tienes que subir tus mp3 a un servidor, el cual existen muchos pero te proporcionare uno de los tantos que existen.
2. Ingresar a www.openomy.com. Ahí tienes que registrarte (nombre de usuario, contraseña, e-mail)
3. Luego clic en Examinar, jalas el tema musical que esta dentro de tu computador. En To tags (Para etiquetar) colocas el nombre de la canción (simplemente una parte para poder identificarla) y clic en Upload (Subir).
Veamos un ejemplo:

4. Luego en Your most used tags haces clic en tucanción tag, después clic en tucancion.mp3 y en File Permalink haces clic en Make Public (Hacer público), el cual te saldrá la URL de la canción.
Veamos un ejemplo:

**Ahora bien si subes por ejemplo, la canción Corazón Espinado (hay dos palabras), entonces la URL será:

http://www.openomy.com/download/andrewmusic2/Corazon%20Espinado.mp3.

5. Cualquiera de estos reproductores puedes colocarlo en el blog. Aquí te van los códigos de cada uno:

Dewplayer Mini

Nota: En donde dice: http://tucancion.mp3, reemplazas por la URL de la canción que has subido. En mi caso seria:

http://www.openomy.com/download/andrewmusic2/Smooth.mp3

Dewplayer Normal

Nota: En donde dice: http://tucancion.mp3, reemplazas por la URL de la canción que has subido. En mi caso seria:

http://www.openomy.com/download/andrewmusic2/Smooth.mp3

Dewplayer Múltiple

Nota: En donde dice: http://tucancion.mp3, reemplazas por la URL de la canción que has subido y en http://otracancion.mp3 por otra canción. Para este caso seria asi:

http://www.openomy.com/download/andrewmusic2/Smooth.mp3|
http://www.openomy.com/download/andrewmusic2/Corazon%20Espinado.mp3.

Dewplayer con control de volumen

Nota: En donde dice: http://tucancion.mp3, reemplazas por la URL de la canción que has subido. En mi caso seria:

http://www.openomy.com/download/andrewmusic2/Smooth.mp3

Hay un pequeño problema con este Dewplayer con control de volumen, ocurre que cuando escuchas la canción suena bien, pero cuando la vuelves a escuchar el volumen se sube por si solo (falta que lo mejoren).

Insertar elementos en la Sidebar (Blogger antiguo)
Insertar elementos en la Sidebar (Blogger nuevo)

Crear resúmenes de entradas ampliables (Un simple botón, Leer Mas) -5-

2006-11-17T22:06:00.000-05:00

Si quieres como un simple botón. Tendrás que hacer lo siguiente:
1. Ir a Opciones (Setting). Luego a Archivo (Archiving). De ahí, en donde dice: ¿Habilitar páginas de entrada? (Enable Post Pages), activas la opción Si (Yes). No te olvides que tienes que Guardar valores (Save Settings) y que tienes que volver a publicar el blog para ver los cambios.

Click en la imagen para agrandarla

2. Ir a Plantilla (Template). Luego agregas el siguiente código entre <style> y </style>. Preferible que pegues el código al comienzo de la etiqueta <style type="text/css"> porque puede ser que en algún momento, no quieras este truco y se te va hacer mas fácil poder ubicarlo para borrarlo.


	<MainArchiveOrArchivePage> span.fullpost {display:none; </MainArchiveOrArchivePage> <ItemPage> span.fullpost {display:inline;} </ItemPage>	Click en la imagen para agrandarla

3. Seguimos en la Plantilla. Una vez que han pegado el código anterior, ahora pegas el siguiente código entre </style> y </head>.


	<script type="text/javascript"> var memory = 0; var number = 0; </script>		Click en la imagen para agrandarla

4. Seguimos en la Plantilla. Una vez que han pegado el código anterior, ahora pegas el siguiente código en donde dice: <$BlogItemBody$>, esto esta entre <body> <div "class=post-body"> </div> </body>.


	<MainOrArchivePage> <script type="text/javascript"> spans = document.getElementsByTagName('span'); number = 0; for(i=0; i <spans.length; i++){ var c = " " + spans[i].className + " "; if (c.indexOf("fullpost") != -1) { number++; } } if(number != memory){ document.write('<a class="readmorebutton" href="<$BlogItemPermalinkUrl$>">Leer Mas</a><br>'); } memory = number; </script> </MainOrArchivePage>

Click en la imagen para agrandarla

5. Seguimos en la Plantilla. El siguiente código lo deje para el último, porque se refiere a un pequeño estilo de botón simple, el cual se podrá realizar cambios, utilizando tu criterio.
El código lo tendrás que pegar entre <style> y </style>. Preferible que lo pegues al final, porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.

a.readmorebutton:link, a.readmorebutton:visited {
float: left;
margin: 2px 2px 2px 2px;
padding: 2px;
width: 115px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #000000;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #000000;
background: #CCCCCC;
text-align: center;
text-decoration: none;
font: normal 10px trebuchet ms, verdana, sans-serif;
color: #194B77;
}

a.readmorebutton:hover, a.readmorebutton:active {
float: left;
margin: 2px 2px 2px 2px;
padding: 2px;
width: 115px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #000000;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #000000;
background: #EEEEEE;
text-align: center;
text-decoration: none;
font: normal 10px trebuchet ms, verdana, sans-serif;
color: #194B77;
}

Explicación:

Click en la imagen para agrandarla

6. Para que funcione esto necesitas un código más, que lo vas a pegar en:
- Ir a Opciones. Luego a Formato y en Plantilla de entrada lo pegas.
- Cuando vas a publicar algo, prácticamente en todas las entradas te saldrá este código, sin necesidad de estar escribiéndolo en cada entrada. Además, el usuario tendrá la facilidad de ir a la página principal. No olvidar guardar los cambios. El código es el siguiente:


	<span class="fullpost"> <a class=readmorebutton href="la URL">Ir a la página principal</span></a>

Veamos un ejemplo:

Click en las imagenes para agrandarla

Nota: Se tendrá que hacer una pequeña corrección. Probablemente el botón salga detrás de: Posted by (según lo que dice tu blog)
Corrección:

Click en la imagen para agrandarla

Lista de colores con sus respectivos códigos
1. Los colores y sus códigos RGB
2. Manual de Wiki Colores

Crear resúmenes en entradas ampliables en la nueva versión de Blogger (Leer Mas)

Contadores para el Blog -4-

2006-11-15T17:59:00.000-05:00

Existen muchas páginas que nos ofrecen contadores para colocarlos en nuestro blog y no es tan difícil de agregarlos. Aunque la mayoría te pide que te registres. Empecemos:
1. Visitar freelogs.com en donde encontrarán diferentes estilos de contadores.
2. Al ingresar a Freelogs.com debemos hacer clic en: Click Here to Create your Free Counter (Clic aquí para crearte un Contador).
3. Una vez ingresado, tendrás que registrarte (dirección del blog, e-mail, etc) y elegir cualquier estilo de contador que queramos.

Click en la imagen para agrandarla

4. Al darle clic en Create Counter, nos saldrá un código, el cual se tendra que pegar en el blog, en donde queramos.

Click en la imagen para agrandarla

Existen otras páginas como:
Contador Web
Contador Gratis
Histast.com
Cool Counters
Count My Page
Free Counter
Free Counter Plus
Free Hit Counters
Free Stats
Counter
Pliner Net Counter
Pro Counter
Rapidcounter
Rightstats
Stat Counter

Nota: Existen bastantes páginas de contadores, para colocarlos en el blog. Pero si en estas páginas no encuentras lo que quieres, entonces puedes ir a un buscador y escribir: Contadores Gratis.

Insertar elementos en la Sidebar (Blogger nuevo)
Insertar elementos en la Sidebar (Blogger antiguo)

Calendarios para el Blog -3-

2006-11-14T14:38:00.000-05:00

Existen páginas que nos ofrecen calendarios para colocarlos en el blog y no es tan difícil de agregarlos. Empecemos:
1. Visitar www.free-blog-content.com en donde encontraran diferentes tipos de calendarios, tales como: animados, de chicas, de autos, entre otros.
2. Al ingresar a Free Blog Content deberán escoger algún tipo de calendario, anteriormente mencionado.
3. Por ejemplo, escogí Cars Calendars y elegí el auto anaranjado. Debajo de la imagen dice: To get this Calendar y mas abajo hay un código que se tendrá que copiar y pegar en el blog.

Click en la imagen para agrandarla

Nota: Muy fácil de colocarlos en el blog.

Existen otras páginas como:
My Garden Collection
Creaciones Gifss.es (Calendario - Reloj)
Widgetbox (Tendrás que registrarte)
Mais Blog.com (Calendario y otros accesorios)
**El procedimiento es el mismo.

Insertar elementos en la Sidebar (Blogger nuevo)
Insertar elementos en la Sidebar (Blogger antiguo)

Crear resúmenes de entradas ampliables (Leer Mas) -2-

2006-11-10T18:14:00.000-05:00

Antes de seguir adornando el blog vamos con un truco:
1. Ir a Opciones (Setting). Luego a Archivo (Archiving). De ahí, en donde dice: ¿Habilitar páginas de entrada? (Enable Post Pages), activas la opción Si (Yes). No te olvides que tienes que Guardar valores (Save Settings) y que tienes que volver a publicar el blog para ver los cambios.

Click en la imagen para agrandarla


	<MainArchiveOrArchivePage> span.fullpost {display:none;} </MainArchiveOrArchivePage> <ItemPage> span.fullpost {display:inline;} </ItemPage>	Click en la imagen para agrandarla

3. Seguimos en la Plantilla. Una vez que han pegado el código anterior, ahora pegas el siguiente código en donde dice: <$BlogItemBody$>, esto esta entre <body> <div "class=post-body"> </div> </body>. Ahora puedes guardar los cambios de la plantilla y volver a publicar el blog.


	<MainArchiveOrArchivePage> <a href= "<$BlogItemPermalinkUrl$>"> Leer Mas</a> </MainArchiveOrArchivePage>		Click en la imagen para agrandarla

4. Para que funcione esto necesitas un código más, que lo vas a pegar en:
- Ir a Opciones. Luego a Formato y en Plantilla de entrada lo pegas.
- Cuando vas a publicar algo, prácticamente en todas las entradas te saldrá este código, sin necesidad de estar escribiéndolo en cada entrada. No olvidar guardar los cambios. El código es el siguiente:


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

Veamos un ejemplo:

Click en las imagenes para agrandarla

Nota: Esto resulta práctico si dispones de una página que incluye muchos artículos largos.

Crear resúmenes en entradas ampliables en la nueva versión de Blogger (Leer Mas)

Relojes para el Blog -1-

2006-11-03T20:10:00.000-05:00

Empecemos por lo más fácil.
Existen muchas páginas que nos ofrecen relojes para colocarlos en nuestro blog y no es tan difícil de agregarlos. Empecemos:
1. Visitar www.clocklink.com en donde encontraran diferentes formatos de relojes: tipo aguja, análogos, entre otros. Tiene una muy buena galería.
2. Al ingresar a ClockLink debemos ir a Want a Clock on Your Website? o sino, nos vamos a Gallery, en donde también encontraremos relojes.

Click en la imagen para agrandar

3. Una vez ingresado por Want a Clock on Your Website? o por Gallery, podremos elegir cualquier reloj que queramos, sea análogos digitales o si queremos de tipo de deportes, animales, entre otros.

Click en la imagen para agrandar

4. Elegí Logo & Custom en donde hay buenos diseños y escogí el reloj en donde sale un perrito. Debajo de la imagen dice View HTML Tag (Ver etiqueta HTML), le dan un clic y nos aparecerá un código.

Click en la imagen para agrandar

5. Al darle clic en View HTML Tag sale una ventana en donde dice que si aceptan los términos, etc; le dan Accept.
6. Al darle Accept, nos sale una imagen en donde encontraremos Color, TimeZome en donde escogerás tu zona horaria (se cambia el timezone), Size (Tamaño), el código HTML (ese código lo pegaremos en nuestro Blog en donde queramos), luego mas abajo dice: If the above does not work, please try the following code (Si lo de arriba no trabaja, por favor intenta con el siguiente código).

Click en la imagen para agrandar

¿Qué les pareció fácil o muy difícil?
Nota: En cuanto a la zona horaria tendrías que saber cual es tu zona horaria, pero no te preocupes aquí te mando una página en donde te dice cual es tu Zona Horaria visítala: http://www.donathan.com/dave/index.html
La pagina que te he dado, en la parte de abajo hay unos números que dicen: …-2 -1 GMT +1 +2… escoge un número y en la parte de arriba saldrá tu Zona Horaria.
Por ejemplo: Seleccione -5 y salio arriba GMT-0500 y mas abajo salen los países que utilizan este horario (timezone=GMT-0500), además de la hora. En todo caso también pueden visitar esta web: http://www.worldtimezone.com

Existen otras páginas como:
Relatime
Relojes web
Relojes Web.com
Relojes Flash
Worldtimeserver.com (Reloj análogo)
Escatti
The World Wide Clock (Reloj para PHP o ASP)
time and date.com
Harry Potter
Creaciones Gifss.es (Reloj-Calendario)
Kiss Design (Reloj-Calendario)
Relojes en Flash
Mais Blog.com (Relojes y otros accesorios)
**El procedimiento es el mismo, pero no se olviden de cambiar el código de la zona horaria, es este: timezone=GMT-0500 (Perú).

Insertar elementos en la Sidebar (Blogger nuevo)
Insertar elementos en la Sidebar (Blogger antiguo)

Bienvenidos a Ayuda para el Blog -0-

2006-11-03T20:06:00.000-05:00

Hola a todos.
A partir de hoy este blog o página tratara de ayudarlos en todo lo que ustedes necesitan. Aprenderemos algo de programación, ya sea HTML o JAVASCRIPT.
Como verán este blog o página esta completamente vacío (no tiene nada), poco a poco lo iremos adornando con ustedes, agregándole algún reloj, chat, encuesta, imágenes, entre otras cosas.
Les explicare para que sirve cada etiqueta, para que puedan entender el código que utilizaremos. En algunos casos tendremos que copiar y pegar, pero siempre explicando lo que estamos haciendo.
Por otro lado, exiten demasiadas páginas en donde puedes crearse un blog, por ejemplo en Blogalia, Blogger, ya.com entre otros. Asi que visiten esta página en donde encontraran bastante informacion:
http://vrruiz.freezope.org/blogosfera/Alojamientos

http://www.lights.com/weblogs/hosting.html
Finalmente, aprenderemos a colocar muchas cosas en nuestro blog.
El que les escribe les dice que sean bienvenidos a Ayuda para el Blog.

Andrés