Agregar una segunda Sidebar en el blog -36-

#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:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

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-

#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-

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:

<tracks>
<track trackmod="1089216396" title="Titulo-de-la-cancion1 - Interprete" path="http://ruta-del-mp3">
<track trackmod="1089216396" title="Titulo-de-la-cancion2 - Interprete" path="http://ruta-del-mp3">
<track trackmod="1089216396" title="Titulo-de-la-cancion3 - Interprete" path="http://ruta-del-mp3">
</tracks>

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:

<iframe src="http://ruta del index.html" name="radio" scrolling="no" frameborder="0" width="222" height="300"></iframe>

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-

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-

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.

<script src='http://rarunach.googlepages.com/hackosphere.js' type='text/javascript'/>

2. Luego buscas lo siguiente:

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

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

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

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

<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

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-

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):

<!-- feed links -->
.....

<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-

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-

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-

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:

<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>

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:

<div class='descriptionwrapper'>
<p class='description'><span><img src="http://harrypotter.jpg" /></span></p>
</div>

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:

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/Ayudaparaelblog.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket" />

Y he añadido al último esto: /

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

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-

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:

<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>

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:

<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'>
<img src="http://spiderman3.jpg" />
<b:else/>
<a expr:href='data:blog.homepageUrl'><img src="http://spiderman3.jpg" /></a>
</b:if>
</h1>
</div>

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:

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/Ayudaparaelblog.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket" />

Y he añadido al último esto: /

Usuarios Online en el Blog -25-

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-

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:

<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

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

<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:loop>
</b:if>

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-

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-

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-

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;'/> <!-- clear for photos floats -->
</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-

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-

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:

<div id="header"> <h1 id="blog-title"> <ItemPage><a href="<$BlogURL$>"></ItemPage> <$BlogTitle$> <ItemPage></a></ItemPage> </h1> </div>

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-

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:

<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">

<!-- Begin #profile-container -->

<$BlogMemberProfile$>

<!-- End #profile -->

<mainorarchivepage>

Continúa más código

</div>
<!-- End #sidebar -->

2. Entre <!-- Begin #sidebar --> y <!-- End #sidebar --> podemos pegar nuestro tagboard, reloj, calendario, chat, entre otras cosas.

Cambiar posted by y comments en el Blog -17-

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:

<p class="post-footer">

*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.