Hacker of the Web
Tus ideas en código!...y mas

[+/-]
Numeración de los comentarios

La parte de los comentarios en un blog no es menos importante que las entradas, ya que según las estadísticas de blogger los blogs son enriquecidos e incluso mejorados gracias a los comentarios de los visitantes.

Por lo cual el block de comentarios debe tener algo de estilo no crees?. Que te parece que estén enumerados, como si fueran una lista. Los pasos a seguir son los siguientes.

[1] Entrar en Diseño>Edicion HTML>Expandir las plantillas de artilugios

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.



[2] Despues tienes que buscar el siguiente código:
<dl id='comments-block'>

Lo que verás será algo parecido a esto otro:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<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>
<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>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


[2] Despues tienes que colocar el siguiente texto como se indica:
<script type='text/javascript'>var num_comm = 1;</script>
<b:loop values='data:post.comments' var='comment'>
<a class='num_comments' expr:href='data:blog.url + &quot;#comment-&quot; + data:comment.anchorName' expr:id='&quot;comment-&quot; + data:comment.anchorName' expr:title='&quot;Comentario hecho por &quot; + data:comment.author'><script type='text/javascript'>document.write(num_comm); num_comm=num_comm+1 ;</script></a>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<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>
<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>
Solo tienes que colocar(sobrescribir lo que este en su lugar si ya lo has intentado) el texto en color rojo.
[3] Después si le quieres dar un poco de estilo, necesitarás colocar estas lineas antes de la etiqueta ]]></b:skin>:
/*        Numeracion de comentarios
================================== */
.num_comments {
color:red;
float:right;
text-decoration:none;
font-size:24px;
}

[+/-]
Mostrar u ocultar objetos Div, con Javascript y DOM

Existe un metodo para mostrar u ocultar elementos Div, es decir ocultar el elemento y todo lo que este dentro de él.

Inicialmente oculto

Estos botones niciarán en la página con el contenido no visible para el visitante, así el visitante podrá decidir si quiere mirar el contenido del botón o lo que oculta, xD.
CSS.- Botón con CSS:


Para que se entienda un poco mejor y mucho más práctico aqui esta un ejemplo visual:
Aqui estará la parte que se ocultará y puede contener lo que quieras, como Imágenes, Videos, incluso otro boton como este:
Todo lo que te puedas imaginar
Código:
<div><input value="Ver más" style="color:white;background:#CCCCFF;border:1px ridge white;margin-left: 50px; padding: 0px; width: 80px; font-size: 14px; font-family: trebuchet ms;" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button" /><div style="display: none;">Todo lo que te puedas imaginar</div></div>
Tradicional.- Botón sin CSS:


Si, bastante interesante el efecto, pero tambien puedes colocar en vez de que se vea con fondo color azul, puede ser un botón tradicional:
Que tal de la manera tradicional
<div><input value="Ver más" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button" /><div style="display: none;">Que tal de la manera tradicional</div></div>

Inicialmente visible

Los anteriores ofrecian la funcionalidad de mostrar solamente el botón y presionarlo para ver el contenido, pero si lo prefieres se podría conseguir el efecto contrario, es decir, mostrar el contenido y ocultarlo dependerá totalmente del visitante de tu página:

Tradicional.- Botón sin CSS:



Este es el contenido visible, tal vez una imagen, un video, una nota, que depende de el visitante de la página totalmente para ser visible u ocultarse, xD.

El código es el siguiente:
<div><input value="Ocultar" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button" /><div>Este es el contenido visible, tal vez una imagen, un video, una nota, que depende de el visitante de la página totalmente para ser visible u ocultarse, xD.</div></div>

Modificación del botón con CSS

El código se puede insertar en cualquier parte de nuestro web/blog, ya sea en entradas o en gadgets, así como en la propia plantilla. Tambien puedes personalizarlo en cuanto a los colores y bordes, así como el tipo de letra:
<div><input value="Ver más" style="color:white;background:#CCCCFF;border:1px ridge white;margin-left: 50px; padding: 0px; width: 80px; font-size: 14px; font-family: trebuchet ms;" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button" /><div style="display: none;">Todo lo que te puedas imaginar</div></div>
color:white; /* Aquí se cambia por el color en Hexadecimal o RGB, y este será el color de la letra */
background:#CCCCFF; /* Aqui se puede colocar una imágen de fondo y el color de fondo */
border:1px ridge #FFFFFF; /* Aquí se modifica respecto a los bordes en CSS*/
margin-left: 50px; /* Aquí se especifíca el espacio exterior a la izquierda */
padding: 0px; /* Aquí se especifica el espacio interior */
width: 80px; /* Aquí se especifica el ancho del botón*/
font-size: 14px; /* Aquí se especifica el tamaño de la letra */
font-family: trebuchet ms; /* Aquí se especifca el tipo de la letra */

O puedes utilizar el mismo efecto, pero en un enlace:
Ver más
Todo lo que te puedas imaginar
<div><a href='#' style="margin-left: 50px;" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.innerHTML = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = 'Ver más';}return false" type="button">Ver más</a><div style="display: none;">Todo lo que te puedas imaginar</div></div>

[+/-]
Efectos con los links del blog

La mayoría de los links del blog se ven bastante iguales, y cuando están en una lista grande de links, ni se sabe cuales has visitado y cuales aún no.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.



[1] Los códigos a continuación se agregan en Diseño>Edicion HTML>Sin expandir plantillas de artilugios y antes de la etiqueta ]]</b:skin>

Para diferenciar los enlaces visitados, de los demás. Necesitas agregar el siguiente código:

a:visited {
background: url(URL) no-repeat center;
padding: {mitad del alto de la imagen} 6px {mitad del alto de la imagen} {ancho de imagen};
text-align:left;
}

Para diferenciar los enlaces activos, de los demás. Necesitas agregar el siguiente código:
a:active {
background: url(URL) no-repeat center;
padding: {mitad del alto de la imagen} 6px {mitad del alto de la imagen} {ancho de imagen};
text-align:left;
}

Para agregar un efecto que se active al pasar el mouse:
a:hover {
background: url(URL) no-repeat center;
padding: {mitad del alto de la imagen} 6px {mitad del alto de la imagen} {ancho de imagen};
text-align:left;
}

El texto en color:
Rojo, se sustituye por la url de la imágen/icono. Que aparecerá a lado de los enlaces visitados.
Azul, se sustituye por los atributos de la imágen/icono.


También existe la posibilidad o necesidad de colocar un icono, a un lado del enlace en una lista de algún tema en específico.

Para agregar un icono, a lado de las etiquetas del web/blog:
.label a {
background: url(URL) no-repeat center;
padding: {mitad del alto de la imagen} 6px {mitad del alto de la imagen} {ancho de imagen};
text-align:left;
}

Para agregar un icono, a lado de las listas de links en tu blog:
.linklist a {
background: url(URL) no-repeat center;
padding: {mitad del alto de la imagen} 6px {mitad del alto de la imagen} {ancho de imagen};
text-align:left;
}

El texto en color:
Rojo, se sustituye por la url de la imágen/icono. Que aparecerá a lado de los enlaces visitados.
Azul, se sustituye por los atributos de la imágen/icono.

[+/-]
Tener un traductor en el blog

Hace unos pocos dias algunos lectores del blog, me preguntaban como es que podían tener un traductor para tener su blog disponible en varios idiomas.

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.



[1] Para integrarlo necesitas agregar un gadget HTML/Javascript, con el siguiente código:

<div style="text-align:center;"><form action="http://www.google.com/translate" target="_blank">
<script language="JavaScript" type="text/javascript">
<!--
document.write ("<input name=\"u\" value="+location.href+" type=hidden>") ;
// --></script>
<p>Traducir el Blog a:</p><div>
<input value="es" name="hl" type="hidden"/>
<input value="UTF8" name="ie" type="hidden"/>
<input value="" name="langpair" type="hidden"/>
<input src="http://photos1.blogger.com/img/43/1633/320/13539949_e76af75976.jpg" value="es|fr" name="langpair" onclick="this.form.langpair.value=this.value" title="Frances" type="image"/>
<input src="http://photos1.blogger.com/img/43/1633/320/13539933_041ca1eda2.jpg" value="es|de" name="langpair" onclick="this.form.langpair.value=this.value" title="Aleman" type="image"/>
<input src="http://photos1.blogger.com/img/43/1633/320/13539953_0384ccecf9.jpg" value="es|it" name="langpair" onclick="this.form.langpair.value=this.value" title="Italiano" type="image"/>
<input src="http://photos1.blogger.com/img/43/1633/320/13539966_0d09b410b5.jpg" value="es|pt" name="langpair" onclick="this.form.langpair.value=this.value" title="Portugues" type="image"/>
<input src="http://www.connyriemers.com/english%20flag.gif" value="es|en" name="langpair" onclick="this.form.langpair.value=this.value" title="Ingles" type="image"/>
<input src="http://photos1.blogger.com/img/43/1633/320/13539955_925e6683c8.jpg" value="es|ja" name="langpair" onclick="this.form.langpair.value=this.value" title="Japones" type="image"/>
<input src="http://photos1.blogger.com/img/43/1633/320/13539958_3c3b482c95.jpg" value="es|ko" name="langpair" onclick="this.form.langpair.value=this.value" title="Koreano" type="image"/>
<input src="http://photos1.blogger.com/img/43/1633/320/14324441_5ca5ce3423.jpg" value="es|zh-CN" name="langpair" onclick="this.form.langpair.value=this.value" title="Chino Simplificado" type="image"/>
<input src="http://photos1.blogger.com/blogger/3709/485/1600/arabic-flag.gif" value="es|ar" name="langpair2" onclick="this.form.langpair.value=this.value" title="Arabe" type="image"/></div></form></div>
El texto en color rojo, puedes cambiarlo por el texto que mejor vaya con tu weblog.

Modificacion: algunas de las imagenes antes publicadas, pueden desaparecer en cualquier momento, por lo cual se recomienda descargar el siguiente paquete en formato ZIP, que las contiene.

[+/-]
Añadir Gadgets entre el header y las entradas (crosscol)

Existe una seccion de Blogger, que no es utilizada por el mismo blogger, y por ende por CASI nadie. La sección se llama crosscol, lo mejor es que esta, esta ubicada por debajo del header y de las entradas.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.



[1] Lo que hay que hacer para poder utilizarla es entrar en Diseño>Edicion HTML>Expandir las plantillas de artilugios. y despues buscamos este codigo:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>


[2] Cambias la palabra en rojo(no) por yes, despues guardas los cambios y listo.El crosscol

[3] Pero también puedes dividirla en tres columnas, pero para esto necesitas sustituir el código anterior:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

por este otro:
<div id='crosscol-wrapper'>
<div style='clear:both;'/>
<div id='crosscol-contenedor'>
<div id='crosscol-left'>
<b:section class='crosscol' id='crosscol1' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol-center'>
<b:section class='crosscol' id='crosscol2' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol-right'>
<b:section class='crosscol' id='crosscol3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
</div>

[4] Despues tienes que añadir antes de ]]></b:skin> el siguiente código CSS:
#crosscol-wrapper {
text-align:center
}
#crosscol-left {
width: 30%;
float: left;
margin:0;
text-align: center;
}
#crosscol-center {
width: 40%;
float: left;
margin:0;
text-align: center;
}
#crosscol-right {
width: 30%;
float: right;
margin:0;
text-align: center;
}
#crosscol-contenedor {
clear:both;
}
.crosscol {
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}
.crosscol-columna {
padding: 10px;
}
[5] Y guardas los cambios:De tres columnas

[+/-]
Las propiedades de los bordes en CSS

Los bordes en CSS son bastantes interesantes, ya que con éstos podemos crear desde un simple borde por debajo de algun texto, hasta crear un bonito menú sin imágenes.

La sintaxis para definir un borde en CSS es la siguiente:

border: {anchura} {estilo} {color};
border-bottom: {anchura} {estilo} {color};
border-top: {anchura} {estilo} {color};
border-left: {anchura} {estilo} {color};
border-right: {anchura} {estilo} {color};

un ejemplo sería:
border: 1px solid #000000;

En la anchura de los bordes podemos poner algun tamaño en pixéles(px), en ems(em), porcentaje(%) o en puntos(pt), son muchas unidades pero aqui una equivalencias:
.5em = 6pt  = 8px  = 50%
1em = 12pt = 16px = 100%
2em = 24pt = 32px = 200%
3em = 36pt = 48px = 300%


En el estilo del borde se indica el estilo del borde, es decir si es:

Solid Dotted Dashed Double Groove Ridge Inset Outset

En la parte del color puedes insertar un color en RGB o en Hexadecimal, pero puedes conseguirlos de Colores en RGB o Hexadecimal.

Hay que tomar en cuenta que los bordes no son interpretados de la misma manera por Mozilla Firefox que por Internet Explorer(6 y anteriores).

Ya que si creamos una capa de 70x200 y con un borde de 10px:




Mozilla Firefox coloca el borde por fuera de la capa, es decir el borde esta alrededor de la capa, es decir que la capa aumenta a 90x220.

Internet Explorer lo que hace es colocar el borde por dentro de la capa, es decir que el ancho de la capa con borde es el mismo es decir 70x200.

[+/-]
Cambiar el aspecto del cursor

En algunas ocasiones y áreas de la página se verían un poco mejor con algún otro cursor. Digamos que estas en el FAQ de una página web, y en vez de un aburrido cursor por default te sale otro pero con signo de interrogación, que tal te gusta la idea.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.



Pero lo mejor es que es tan fácil que lo tendrás instalado en tan solo unos segundos. Solo necesitas entrar en el Editor HTML y NO expandir las plantillas de artilugios.

[1] Despues debes copiar y pegar el siguiente código antes del ]]></b:skin>:

cursor: default
default

cursor: crosshair
crosshair

cursor: pointer
pointer

cursor: move
move

cursor: nw-resize
nw-resize

cursor: ne-resize
ne-resize

cursor: n-resize
n-resize

cursor: e-resize
e-resize

cursor: help
help

cursor: text
text

cursor: wait
wait

cursor: url('URL del CURSOR'),default
Personalizado


Pero no se inserta así como lo ven arriba, deben anteponer una clase antes del estilo:

Para añadir al sidebar:

.sidebar {cursor: url('URL del CURSOR'),default}


Para añadir solo a los posts:

.post {cursor: help}


Para añadir a toda la página:

body {cursor: e-resize}


Para añadir a los gadgets:

.widget {cursor: url('URL del CURSOR'),default}


[Modificaciones] El texto en Rojo tienes que cambiarlo por el cursor de tu agrado.

[+/-]
Como añadir un Favicon, a nuestro web/blog

Favicon de BloggerEn ocaciones el favicon de Blogger no es muy agradable para nuestro blog o no va con nuestro estilo y lamentablemente muchísimos bloggers no conocen el método para cambiarlo, por lo que he decidido explicar dicho método.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.



[1] Primero debes ingresar a Edicion de HTML, Sin editar las plantillas de artilugios.

[2] Despues necesitas colocar el siguiente código despues de <head> y/o antes de </head>:
<link href='url del favicon' rel='shortcut icon' type='image/x-icon'/>
<link href='url del favicon' rel='icon' type='image/png'/>


El texto en color rojo es la url del Favicon, el cual debes reemplazar por la url de tu favicon. Puede ser una imagen PNG de cualquier tamaño(16x16 es muy recomendado)

Pero la entrada aún no termina, aqui estan otras opciones para una mejor configuracion de tu blog, además de un mejor poscicionamiento en buscadores.

<meta content='Aqui,estarán,las,palabras,clave,de,tu,blog' name='keywords'/>

Con esto conseguirás un mejor poscicionamiento, en cuanto las busquedas relacionadas con las palabras claves de tu blog.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> :: <data:blog.title/></title>
</b:if>


Esto dará por resultado un titulo de tu blog del tipo:
Titulo de entrada :: Titulo del blog( - Mozilla Firefox o Internet Explorer)
y si esta en la página principal:
Titulo del blog( - Mozilla Firefox o Internet Explorer)

<meta content='INDEX, FOLLOW' name='robots'/>

Los Buscadores buscan en todas las páginas del blog

<meta content='titulo del blog' name='Title'/>

Con esto se especifica el titulo del blog

<meta content='Autor del blog' name='Author'/>

Autor del blog

<meta content='AQUI EL LEMA' name='Subject'/>

Algun lema de tu blog

<meta content='Spanish' name='Language'/>

Se especifíca el lenguaje, en inglés

<meta content='Global' name='Distribution'/>

La distribucion del blog, en este caso es Global

<meta content='All' name='Robots'/>

Todas las páginas podrán salir en buscadores.

<meta name="expires" content="never">

Aqui devería ir la fecha de expiración del blog pero en su lugar ponemos never(nunca).

Aqui otros mas metatags:

<meta content='Document' name='ObjectType'/>
<meta content='index follow' name='googlebot'/>
<meta content='All' name='audience'/>
<meta content='General' name='Rating'/>
<meta content='Identificador' name='Identifier' scheme='URI'/>
<meta content='Publicador' name='Publisher'/>
<meta content='Creador' name='Creator'/>
<meta content='(Covertura ej. Chile)' name='Coverage.jurisdiction'/>


Entradas más recientes Entradas antiguas Página Principal
Arriba