Simple Black Metal: Plantilla para Blogger

descargas

Nombre:	Simple Black Metal
Diseñador:	El Potro
Compatibilidad:	Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer
Características:	Plantilla para Blogger, Estilo magazine, 2 columnas, Mini posts de 2 columnas, 980px de ancho, 1 menú superior, 1 buscador, 1 contenedor de banners, Colores oscuros, Transparencias en los contenedores
Incluye:	Plantilla XML, Instrucciones de instalación, Licencia

Después de varias semanas me pude dar un espacio para terminar esta plantilla, su nombre es Simple Black Metal. Es una plantilla estilo revista (magazine) con los posts separados en dos columnas. El fondo de las entradas como de la barra lateral es transparente.
Cuenta con un menú en la parte superior con efecto rollover e incluye también un buscador que no necesita el botón de buscar, sólo hay que presionar ENTER para realizar la búsqueda.
La cabecera es bastante amplia para poder incluir logotipos más extendidos. Los colores obscuros así como las transparencias de fondo hacen que esta plantilla luzca limpia, formal y moderna.

Personalización:

Menú
Para modificar el menú busca el siguiente código y cambia las URL y títulos que correspondan:

<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Inicio</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Entradas RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comentarios</a></li>
<li><a href='http://twitter.com/usuario'>Twitter</a></li>
<li><a href='mailto:tucorreo@gmail.com'>Contacto</a></li>
</ul>

Banners:

Para agregar los banners busca el siguiente código y remplaza la URL de la imagen por la de tu banner así como la URL del enlace:

<div id='ads'>
<a href='URL del enlace'><img src='http://3.bp.blogspot.com/_qgZA1ny_dAs/Szum500eqMI/AAAAAAAADeI/b-Td_R1SHjc/s1600/banner-125.png'/></a>
<a href='URL del enlace'><img src='http://3.bp.blogspot.com/_qgZA1ny_dAs/Szum500eqMI/AAAAAAAADeI/b-Td_R1SHjc/s1600/banner-125.png'/></a>
<a href='URL del enlace'><img src='http://3.bp.blogspot.com/_qgZA1ny_dAs/Szum500eqMI/AAAAAAAADeI/b-Td_R1SHjc/s1600/banner-125.png'/></a>
<a href='URL del enlace'><img src='http://3.bp.blogspot.com/_qgZA1ny_dAs/Szum500eqMI/AAAAAAAADeI/b-Td_R1SHjc/s1600/banner-125.png'/></a>
</div>

Página principal:

En la página principal se muestran las entradas en columnas de dos en dos. Entra en Configuración > Formato y arriba donde dice Mostrar ingresa un número que sea par (4, 6, 8, etc.)

La plantilla ha sido probada en todos los navegadores arriba mencionados y en todos presenta una alta compatibilidad.

¡Que la disfruten!

Poner icono en los enlaces visitados

Hace algunas semanas vimos cómo poner una imagen animada debajo de los enlaces, ahora haremos algo parecido en los enlaces que ya han sido visitados.

Esta vez vamos a poner un pequeño ícono que aparecerá junto al enlace una vez que el usuario haga click sobre él. Esto es para que el lector pueda identificar más fácil qué vínculos ya ha visitado.

Para ver un ejemplo haz clik en el siguiente enlace y vuelve a esta entrada para ver el cambio:

Enlace

Para darle esta decoración a los enlaces visitados de tu blog entra en Diseño > Edición de HTML y busca esta línea:

a:visited {

Debajo de ella agrega lo siguiente:

text-decoration:none;
background:url(http://i45.tinypic.com/2ezsb5d.gif) no-repeat 100% 50%;
padding-right:18px;

Puedes cambiar de ícono si lo deseas, sólo sustituye la URL de la imagen. También puedes controlar la distancia del ícono respecto al texto, eso se controla en padding-right:18px;

Es una modificación muy sencilla que hará que tus links visitados se vean más atractivos y más fáciles de distinguir por tus lectores.

Efecto pushbutton en las imágenes

El efecto pushbutton es el efecto que se le da a un elemento que simula un botón presionándose, en otras palabras, el elemento da la ilusión de tener un hundimiento cuando se hace click sobre él o cuando pasamos el cursor encima.

El código para este efecto es de lo más sencillo, sólo hay que entrar en Diseño > Edición de HTML y antes de ]]></b:skin> pegar lo siguiente:

.post img:hover {
position: relative;
top: 1px;
left: 1px;
}

Y listo, así se simple las imágenes de las entradas tendrán este efecto al pasar el cursor sobre ellas.
Si deseas que el efecto pushbutton se aplique a todas las imágenes del blog, entonces pégamos este código en lugar del anterior:

img:hover {
position: relative;
top: 1px;
left: 1px;
}

Si quisieras que el efecto sólo se aplique a las imágenes que tú elijas, entonces omitimos esos códigos y pegamos este:

.pushbutton:hover {
position: relative;
top: 1px;
left: 1px;
}

Y luego cuando quieras que una imagen tenga el efecto pushbutton usas este código:

<img class="pushbutton" src="URL de la imagen" />

Sólo cambia la URL de la imagen y listo. Esa imagen tendrá el efecto pero las demás no.

Menú estilo Dock para Blogger (2)

En la entrada anterior vimos cómo poner en el blog un menú estilo Dock en el cual los íconos se agrandan al pasar el cursor sobre ellos.

Los fanáticos de Mac querrán tener la opción de colocar este menú en la parte inferior del blog, tal como se vería en un equipo Mac. Así que ajustando los estilos del CSS se puede poner el menú en la parte inferior en forma estática, es decir, que aunque se baje el scroll de la página el menú no se moverá de lugar.

Puedes ver un ejemplo en este blog de pruebas.

Para colocar este menú estilo Dock en tu blog repetimos los mismos pasos, entra en Diseño > Edición de HTML y después de <head> pega esto:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/interface.js' type='text/javascript'/>

Ahora pega antes de ]]></b:skin> lo siguiente:

/* Menu Dock
----------------------------------------------- */
.dock {
position: fixed;
width: 100%;
bottom: 40px;
}
a.dockItem {
text-align: center;
color: #000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.dockItem img {
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.dockItem span {
display: none;
positon: absolute;
}
.dockContainter {
height: 50px;
width: 200px;
position: absolute;
}

Por último busca la etiqueta </body> y antes de ella pega esto:

<div id="dock" class="dock">
<div class="dockContainter">

<a class="dockItem" href="URL del enlace"><img src="http://3.bp.blogspot.com/_qgZA1ny_dAs/S8yeGOygORI/AAAAAAAAECk/MabUFPSv1CA/s1600/Icon_Home.PNG"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="http://1.bp.blogspot.com/_qgZA1ny_dAs/S8yeGum8szI/AAAAAAAAEC0/ogrG1G_NSaQ/s1600/Icon_Rss.PNG"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeUfY2TpI/AAAAAAAAEC8/WLyxFS0Tv9U/s1600/Icon_Twitter.PNG"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="http://1.bp.blogspot.com/_qgZA1ny_dAs/S8yeFsjwO4I/AAAAAAAAECc/URJd0EO38d0/s1600/Icon_Facebook.PNG"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="http://4.bp.blogspot.com/_qgZA1ny_dAs/S8yeGYiAfpI/AAAAAAAAECs/ej5Vj7cAj68/s1600/Icon_Picasa.PNG"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeUnjJ75I/AAAAAAAAEDE/RkHWNQmOmeE/s1600/Icon_Mail.png"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeFT8iuqI/AAAAAAAAECU/ZAZaxpJ7j84/s1600/Icon_Help.png"/><span>Título del enlace</span></a>

</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Dock(
{
maxWidth: 90,
items: 'a',
itemsText: 'span',
container: '.dockContainter',
itemWidth: 60,
proximity: 70,
halign : 'center'
}
)

}
);

</script>

Cambia las URL y los títulos de los enlaces donde se indica y estarás listo para disfrutar de este menú estilo Dock en la parte de abajo de tu blog.
Nota que el efecto no se pierde, es decir, en el menú anterior los íconos se agrandan y deslizan hacia abajo al pasar el cursor sobre ellos, en éste, los íconos se agrandan y deslizan hacia arriba, de esta forma los íconos no se cortan.

Para saber cómo agregar más íconos o modificar el tamaño de ellos visita la entrada anterior.

IMPORTANTE: Este menú no funciona en blogs con dominio propio.

Ver también | Parte 1

Menú estilo Dock para Blogger (1)

Los menús estilo dock son característicos de las computadoras Mac y que son altamente llamativos para el usuario por la forma en que aumentan de tamaño los íconos al pasar el mouse sobre ellos.

¿No sabes de qué hablo? Mira el menú que está abajo de la cabecera de este blog de pruebas.

Está hecho con JQuery por lo que la Lista de seguidores no se verá afectada, sólo ten en cuenta que si tienes varios scripts para formar marquesinas el menú no funcionará.

Después de haber aclarado lo anterior, vamos a Diseño > Edición de HTML y después de <head> pega esto:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/interface.js' type='text/javascript'/>

Ahora antes de ]]></b:skin> pega lo siguiente:

/* Menu Dock
----------------------------------------------- */
.dock {
text-align: center;
height: 60px;
position: relative;
}
a.dockItem {
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
.dockItem img {
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.dockItem span {
display: none;
positon: absolute;
}
.dockContainter {
height: 50px;
width: 200px;
left: 500px;
position: absolute;
}

Por último, en un elemento HTML/Javascript pega el código del menú:

<div id="dock" class="dock">
<div class="dockContainter">

<a class="dockItem" href="URL del enlace"><img src="http://3.bp.blogspot.com/_qgZA1ny_dAs/S8yeGOygORI/AAAAAAAAECk/MabUFPSv1CA/s1600/Icon_Home.PNG"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="http://1.bp.blogspot.com/_qgZA1ny_dAs/S8yeGum8szI/AAAAAAAAEC0/ogrG1G_NSaQ/s1600/Icon_Rss.PNG"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeUfY2TpI/AAAAAAAAEC8/WLyxFS0Tv9U/s1600/Icon_Twitter.PNG"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="http://1.bp.blogspot.com/_qgZA1ny_dAs/S8yeFsjwO4I/AAAAAAAAECc/URJd0EO38d0/s1600/Icon_Facebook.PNG"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="http://4.bp.blogspot.com/_qgZA1ny_dAs/S8yeGYiAfpI/AAAAAAAAECs/ej5Vj7cAj68/s1600/Icon_Picasa.PNG"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeUnjJ75I/AAAAAAAAEDE/RkHWNQmOmeE/s1600/Icon_Mail.png"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeFT8iuqI/AAAAAAAAECU/ZAZaxpJ7j84/s1600/Icon_Help.png"/><span>Título del enlace</span></a>

</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Dock(
{
maxWidth: 90,
items: 'a',
itemsText: 'span',
container: '.dockContainter',
itemWidth: 60,
proximity: 70,
halign : 'center'
}
)

}
);

</script>

Cambia las URL del enlace donde se indica, así como los títulos de cada enlace.
El menú lo hice para 6 íconos pero puedes agregar más si lo deseas, sólo agrega una línea como esta:

<a class="dockItem" href="URL del enlace"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeFT8iuqI/AAAAAAAAECU/ZAZaxpJ7j84/s1600/Icon_Help.png"/><span>Título del enlace</span></a>

maxWidth: 90, es el tamaño del ícono cuando el cursor pasa sobre él.
itemWidth: 60, es el tamaño del ícono en estado normal.

Ambos los puedes cambiar por el valor que quieras. Si quieres cambiar los íconos sólo remplaza las URL de las imágenes por las tuyas.
Una vez que hayas colocado el menú en el elemento HTML/Javascript puedes colocarlo debajo de la cabecera para que luzca mejor.


IMPORTANTE: Este menú no funciona en blogs con dominio propio.

Ver también | Parte 2

Añadir gadgets debajo de la cabecera del blog

Generalmente cuando hacemos un menú queremos ponerlo abajo de la cabecera pero en muchas plantillas no hay un apartado debajo de la cabecera para añadir elementos. Aun así hay formas de colocar elementos debajo del header (o sea, de la cabecera) y sin tener que batallar tanto.

Hay tres maneras para colocar elementos debajo de la cabecera y las tres son efectivas:

1. Entra en Diseño > Elementos de la página y arrastra el elemento que quieres hasta debajo de la cabecera.



2. Otra opción es cambiarlo directamente desde la plantilla, entra en Diseño > Edición de HTML y SIN marcar la casilla de expandir artilugios localiza el gadget que quieres mover de lugar; por ejemplo, un elemento HTML/Javascript sería algo como esto:

   <b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'/>

   
   Selecciónalo y con CTRL + X cortalo, busca un poco arriba el área de la cabecera y pégalo con CTRL + V justo debajo de esta parte:
   

   <b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>

   
   


3. 3.- La última opción es activando el crosscol. Si usas una plantilla clásica de Blogger verás que debajo de los códigos de la cabecera se encuentra esto:

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

Sólo cambia donde dice no por yes, guarda los cambios y ve a Diseño > Elementos de la página y verás que ya tienes el apartado debajo de la cabecera para añadir más gadgets.



Si tu plantilla no es de Blogger es muy probable que no lo tenga, pero no es ningún problema, sólo busca la etiqueta <div id='main-wrapper'> y arriba de ella pega esto:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

Con cualquiera de estas tres formas podrás tener tu menú o cualquier otro gadget debajo de la cabecera.

Alinear elementos y gadgets

Una pregunta muy común es cómo alinear elementos o gadgets del blog, ya sea centrarlos o alinearlos hacia un lado específico.

En la mayoría de las plantillas tanto los textos como los elementos se alinean automáticamente hacia la izquierda, pero esto no significa que no podamos cambiar su posición.

Para alinear los elementos (imágenes, videos, contenedores, etc) vamos a encerrar el código de cada uno entre un contenedor div y ahí usaremos la propiedad align para alinearlos hacia el lugar deseado.

Centrar

<div align="center">
Aquí va lo que se quiere centrar
</div>

A la izquierda

<div align="left">
Aquí va lo que se quiere a la izquierda
</div>

A la derecha

<div align="right">
Aquí va lo que se quiere a la derecha
</div>

Sólo se agrega donde se indica, el código del elemento que queremos alinear, ya sea algo que esté dentro de una entrada o un gadget de la sidebar.

Hacer que las imágenes se arrastren (2)

Después de haber visto que podemos hacer que las imágenes se arrastren vamos a darle algo de utilidad, por ejemplo que la imagen tenga un enlace. Para ello vamos a usar la propiedad ondblCick de Javascript, es decir, un doble click, ya que el primer click servirá para mover y arrastrar la imagen, y con un doble click abrirá el enlace:

<img id="draglink1" style="cursor:move; border:0px;" ondblClick="javascript:window.open('URL del enlace')" src="URL de la imagen"/>
<script type="text/javascript">new Draggable('draglink1');</script>

Sólo se cambia la URL de la imagen y la URL del enlace que abrirá. Por supuesto también deberemos cambiar la ID cada vez que lo usemos (color verde).
Lo mismo podríamos hacer con un menú, una imagen flotante, o lo que se les ocurra, será cuestión de echar a volar la imaginación y hacer experimentos.

También podemos usar este mismo efecto para las palabras, por ejemplo, la palabra 'claveles' se puede mover:

No te amo como si fueras rosa de sal, topacio
o flecha de claveles que propagan el fuego:
te amo como se aman ciertas cosas oscuras,
secretamente, entre la sombra y el alma.

No te amo como si fueras rosa de sal, topacio
o flecha de <span id="palabra1" style=" font-weight:bold; cursor:move;"> claveles</span> que propagan el fuego:
te amo como se aman ciertas cosas oscuras,
secretamente, entre la sombra y el alma.
<script type="text/javascript">new Draggable('palabra1');</script>

Y de igual modo podemos hacer que la palabra "arrastrable" tenga un enlace haciendo doble click sobre ella:

Te amo como la planta que no florece y lleva
dentro de sí, escondida, la luz de aquellas flores,
y gracias a tu amor vive oscuro en mi cuerpo
el apretado aroma que ascendió de la tierra.

Te amo como la planta que no florece y lleva
dentro de sí, escondida, la luz de aquellas flores,
y gracias a tu <span id="palabra2" style="font-weight:bold; cursor:move;" ondblclick="javascript:window.open('URL del enlace')">amor</span> vive oscuro en mi cuerpo
el apretado aroma que ascendió de la tierra.
<script type="text/javascript">new Draggable('palabra2');</script>

Nuevamente en ambos casos se cambia la ID y en el caso del segundo ejemplo se agrega la URL de la imagen donde se indica.

Como puedes ver es muy sencillo de usar y sólo hemos utilizado Scriptaculous para generar este efecto drag & drop, y con un poco de creatividad podrás crear elementos interactivos en banners, imágenes, textos o cualquier otra cosa; sobretodo los más pequeños lo agradecerán:


Coloca las imágenes en su lugar

Hacer que las imágenes se arrastren (1)

Esta es una forma de hacer su página más interactiva, de modo que el lector pueda "jugar" con ciertos elementos de la página pudiéndolos arrastrar de un lado a otro dentro del contenedor en el que están.

Este es un ejemplo:



Para hacer que las imágenes se puedan mover y arrastrar entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

Nota: Es posible que el código anterior ya lo tengas en la plantilla, si es así no es necesario volverlo a pegar, así que omite ese paso.

Ahora cuando quieras hacer que la imagen de una entrada se pueda arrastrar usa el siguiente código dentro del post:

<img id="drag1" style="cursor:move; border:0px;" src="URL de la imagen"/>
<script type="text/javascript">new Draggable('drag1');</script>

Agrega la URL de la imagen donde se indica y listo. Ten en cuenta que cada vez que vayas a hacerlo deberás cambiar la ID de la imagen (lo que está en color verde), por ejemplo drag2, drag3, etc. de modo que ninguna imagen tenga el mismo ID.

Es así de simple que con Scriptaculous podemos darle más dinamismo al sitio web y más diversión para los más pequeños.


Ver la segunda parte de esta entrada

Personalizar las listas numeradas del blog

Anteriormente vimos cómo personalizar las viñetas del blog cambiando el aspecto del ícono mediante CSS.
En esta ocasión haremos lo mismo pero para las listas ordenadas, es decir, las listas numeradas.
Estas listas se forman así mediante HTML:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>

O también podemos usar el ícono del editor de entradas

Por defecto una lista numerada usa la propiedad decimal y se ve de este modo:

1. Item 1
2. Item 2
3. Item 3
4. Item 4

Pero hay otras propiedades que podemos aplicar para cambiar la forma que se muestran los números. Existen varios estilos para las listas ordenadas pero nos enfocaremos en 5 distintas: upper-roman, lower-roman, upper-latin, lower-latin, decimal-leading-zero.

upper-roman	lower-roman	upper-latin	lower-latin	decimal-leading-zero
Item 1 Item 2 Item 3 Item 4	Item 1 Item 2 Item 3 Item 4	Item 1 Item 2 Item 3 Item 4	Item 1 Item 2 Item 3 Item 4	Item 1 Item 2 Item 3 Item 4

Para cambiar tus listas numeradas del blog por uno de estos estilos entra en Diseño > Edición de HTML y agrega esto antes de ]]></b:skin>:

.post ol li {
list-style: decimal;
margin: 5px 0 0 20px;
padding: 0;
}

Cambia lo que está en color rojo por el estilo que quieras para tus listas.
Estos estilos se aplicarán a las listas numeradas dentro de las entradas. Si quieres aplicarlas sólo a la sidebar cambia la primera línea:

.post ol li {

Por:

.sidebar ol li {

Generalmente casi nadie usa las listas numeradas, así que vale la pena personalizarlas para que las pocas veces que se usen tengan un aspecto distinto.

Comentarios del autor con color diferente

Seguido preguntan cómo destacar los comentarios de modo que los del autor tengan un color de fondo diferente, un borde o algo que los haga resaltar de los demás.
Para conseguirlo sólo necesitamos agregar un código en la plantilla y valernos de CSS para darle los colores que queremos.

Primero entra en Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios, busca este código y agrega lo que está en color rojo.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<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='blog-author-comment'>
<p><data:comment.body/></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>
</b:loop>
</dl>

Ahora agrega antes de ]]></b:skin> lo siguiente:

.blog-author-comment {
margin: 5px 0 0;
}
.blog-author-comment p {
margin: 0 0 10px;
padding: 5px 10px;
border-left: 3px solid #000000;
background: #CCCCCC;
}

Puedes cambiar el color de fondo por el que quieras modificando esto:

background: #CCCCCC;

También puedes modificar el color del borde o cambiarle el color de la letra, eso ya dependerá de qué cambios quieras hacerle para que combine con tu plantilla.
Con estas modificaciones, los comentarios que hagas tú tendrán un aspecto diferente al resto de los demás.

OJO: Ten en cuenta que si has cambiado de nick, los comentarios que hayas hecho con el nick anterior no mostrarán este cambio, es decir, tendrán el mismo color que el de los demás comentaristas.

Cómo insertar un mapa en el blog

En ciertos casos habrá quienes necesiten poner un mapa en el blog de su negocio, su ciudad, su vecindario, etc.
Para poner un mapa en el blog sigue estos pasos:

1. Entra a Google Maps y localiza la ciudad o el lugar que quieres mostrar.
2. Haz click en Enlazar y luego en Personalizar y obtener vista previa del mapa que se va a insertar.



3. Se abrirá una ventana con opciones, ajusta el zoom del mapa, elige si quieres mostrar un mapa con calles, satélite o con relieve. Selecciona el tamaño del mapa y copia el código de abajo.
4. Por último pega el código en un elemento HTML/Javascript o en una entrada.

Y listo, con estos sencillos pasos puedes mostrar un mapa de Google Maps en tu blog.

TIP!

Si quieres saber la ubicación exacta de donde te conectas usa el ícono que está abajo del control de vistas panorámicas y automáticamente localizará tu ubicación en el mapa.

Les dejo un ejemplo del mapa de mi ciudad.

Ver mapa más grande


Enlace | Google Maps

Cursor con destellos

Esta es una forma muy peculiar de adornar el cursor, y en cierto modo la página. Se trata de hacer que salgan destellos del cursor cuando éste se mueve y se van esparciendo y cayendo con forme se sigue moviendo el cursor.

Puedes ver un ejemplo en esta página de Wallpapers para el móvil gratis. Cuando cargue la página mueve el cursor a donde quieras y verás cómo salen y caen los destellos del mouse; entre más muevas el cursor más destellos saldrán.

Para poner este efecto del cursor en tu blog, entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:

<script type='text/javascript'>
// <![CDATA[
var colour="#FFFFFF";
var sparkles=40;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

En var colour="#FFFFFF"; modifica el color de los destellos, en este caso son blancos pero puedes cambiarlos por el color que quieras, sólo te recomiendo que sea un color que contraste con el fondo del blog para que pueda apreciarse.

De esta forma puedes crear un ambiente "mágico" en el blog.

Sitemap o tabla de contenido por fecha

Anteriormente vimos cómo crear un sitemap o tabla de contenido para el blog. Ese sitemap es un índice que muestra el título de todas las entradas publicadas en el blog y ordenas por etiquetas.

Partiendo del mismo script podemos implementar un sitemap que muestre el índice de todas las entradas publicadas pero ordenadas por fecha, agrupándolas por mes y mostrando a un lado la fecha que fue publicada (ver ejemplo).

Para poner en tu blog una tabla de contenido como esta entra en Diseño > Edición de HTML y antes de </head> pega esto:

<script type='text/javascript'>
// <![CDATA[
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postYear=new Array();var postMonth=new Array();var postYearMonth=new Array();var postYearMonth2=new Array();var postTanggal=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;var month2=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2();document.write('')}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write("<p/>");document.write('<p><strong><a href="'+postYearMonth2[b]+'">'+temp1+"</a></strong></p><ul>");firsti=a;do{document.write("<li>");document.write("["+postTanggal[a]+'] <a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");document.write("</li>");a=a+1}while(postYearMonth[a]==temp1);b=a;document.write("</ul>");if(b>postTitle.length){break}}};
// ]]>
</script>

Ahora en una entrada nueva pega este código:

<script src="http://tublog.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Cambia lo que está en rojo por el nombre de tu blog y listo. Si lo deseas puedes cambiar el órden de la entrada para que aparezca hasta el último.
Así de sencillo podrás tener una tabla de contenido ordenada por fechas.

Decora el fondo del blog con patterns navideños

Los patterns (patrones) son imágenes pequeñas que se repiten para crear un fondo. Estos se utilizan para cambiar el color de fondo del blog por una imagen.

Para continuar con la decoración del blog con motivos de la Navidad les traigo estos patterns con diseños navideños para que el fondo del blog tenga un tema de la temporada.

Este pack contiene 30 patterns en distintos tamaños alusivos a la Navidad en formato .PNG.

Para usarlos como fondo del blog súbelos a un servidor y luego entra en Diseño > Edición de HTML y busca esta parte:

body {
.......
.......
.......
.......
background: #FFFFFF;
}

Sustituye la línea del background por esto:

background: url(URL de la imagen);
background-attachment : fixed;

Cambia la URL de la imagen por la URL del pattern que anteriormente subiste a la red. Si tu plantilla ya tuviera una imagen sólo sustituye la URL actual por la del pattern.

Iconos RSS de Navidad

Siguiendo con la decoración del blog para la Navidad les dejo estos íconos creación de Sudilkovsky Denis y que son íconos feed alusivos a la Navidad. El pack está compuesto de 12 íconos RSS en formato transparente .PNG y en distintas medidas.
La licencia es de libre distribución y son ideales para estas fechas navideñas.