viernes, 17 de octubre de 2014

Cómo incorporar CSS en nuestras páginas

Para incorporar CSS a nuestras páginas HTML tenemos tres opciones, todas igualmente efectivas.

1. En la misma etiqueta HTML

En este caso se hace uso del atributo style que se puede agregar a cualquier etiqueta HTML. Permite colocar diferentes estilos a etiquetas iguales.

 <html>
   <head>
     <title>Ejemplos CSS</title>
   </head>
   <body>
     <p style="font-color: #ff0000">Texto rojo</p>
     <p style="font-color: gold">Texto dorado</p> 
   </body>
 </html>

2. Dentro de la página HTML

Se incorporan diversos estilos dentro de las etiquetas style, en forma general.

 <html>
   <head>
     <title>Ejemplos CSS</title>
     <style type="text/css">
       p {font-color: #00ff00;}
     </style>
   </head>
   <body>
     <p>Texto de color</p>
   </body>
 </html>

3. Uso de un archivo de estilos externo.

Los estilo son definidos en un archivo con extensión .css que es linqueado desde nuestra página.

 p {
    font-color: #00ff00;
 }
 <html>
   <head>
     <title>Esjemplos CSS</title>
     <link rel="stylesheet" type="text/css" href="estilos.css" />
   </head>
   <body>
     <p>Texto de color</p>
   </body>
 </html>


Cualquiera sea la opción que utilices, tendrás en tus manos la manera de definir los colores y diseñopar hacer única tu página.



jueves, 16 de octubre de 2014

Problemas al usar jQuery en nuestro blog

  Muchas veces agregamos gatgets a nuestro blog que utilizan jQuery, una biblioteca de JavaScript que ofrece una serie de funcionalidades que, de otra manera, requerirían de mucho más código, lográndose grandes resultados en menos tiempo y espacio.

  Pero si queremos que todo funcione correctaente en nuestro blog, deberemos tener en cuenta que, por cada nuevo gatget agregado, es probable que estemos incluyendo nuevas versiones de jQuery que entrarán en conflicto. Para evitar esto lo importante es tener siempre la última versión de jQuery.
 
  Igual se debe tener en cuenta que podrían haber gadgets que sólo funcionan con una versión específica de jQuery... por eso siempre se debe estar verificando que todo funcione correctamente en nuestro blog.

  Para saber cuál es la útima versión de jQuery basta con ingresar a la página Google Hosted Libraries:


  En la imagen vemos que la última versión (en el momento de la publicación de esta entrada) es la 2.1.1.

  Lo que debemos hacer es agregar la versión más actualizada de jQuery en nuestro código HTML, eliminando todas las versiones anteriores. Para ello seguimos los siguientes pasos:


1.  Ir a Plantilla > Editar HTML > clik en el editor > CTR-f ó CMD-f para abrir el cuadro de búsqueda.

2.  En el cuadro de búsqueda ingresar:

           jquery/

3.  De existir, se nos mostrá todo código de jQuery que hayamos ingresado previamente (en la imagen vemos la versión 1.7.1).



4.  Reemplazar la versión de jQuery por la acutal, cambiando el código por el siguiente (que es en este momento la versión más actualizada):

  <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/>


5.  Seleccionar Guardar plantilla y verificar que todo funciona correctamente en tu blog.

miércoles, 15 de octubre de 2014

Ocultar "Suscribirse a: Enviar comentarios (Atom)"

 Es seguro que te habrás fijado que en la parte inferior de las entradas de tu blog aparece la opción "Suscribirse a: Enviar comentarios (Atom)" o algo similar.

 
 La mayoría de las veces no la usamos pues puede que ni sepamos para qué sirve.

 Si te gustaría hacer desaparecer este enlace, lo mejor es ocultarlo pues inhabilitarlo no es muy aconsejable.

 Y para ocultarlo, los pasos son los siguientes:


1.  Ir a Plantilla > Editar HTML > clik en el editor > CTR-f ó CMD-f para abrir el cuadro de búsqueda.

2.  En el cuadro de búsqueda ingresar:

           ]]></b:skin>

3.  Antes de la línea anterior, pegar el siguiente código:

           .feed-links {
           visibility:hidden;
           display:none;
           }


4.  Seleccionar Guardar plantilla.




Y listo... verás que la opción "Suscribirse a: Enviar comentarios (Atom)" ya no aparece al final de las entradas.



martes, 14 de octubre de 2014

Letras con borde en Gimp

Para colocarle un borde de color a tus letras, en Gimp, sólo debes seguir estos pasos:

1. Escribir el texto con el font, tamaño y color deseado.


2. A continuación, en la Caja de herramientas seleccionar Crear una ruta a partir del texto.

3. Ir a Seleccionar > A partir de una ruta, tras lo cual se habrá seleccionado el texto.


4. Ir a SeleccionarAgrandar [Grow]


5. En la ventana que se abrirá, ingresar el ancho del borde en píxeles, que por defecto es 1.

 6. Agregar una capa con relleno tipo Transparencia, a la cual nombraremos Borde, para identificarla.


 7. Colocar la capa Borde detrás (abajo) del texto.


 8. En la Caja de herramientas seleccionar el color para el borde. Con el pincel rellenar la selección en la capa Borde.

 
9. El resultado es el siguiente:


 Así de sencillo... espero les sirva para darle un toque distinto a sus títulos y otros textos.



viernes, 10 de octubre de 2014

Botón "Ir Arriba" que aparece y desaparece

  Seguramente habrán visto ese botoncito en los blogs, generalmente en la esquina inferior derecha, que al presionarlo permite ir al comienzo de la página.
  En la mayoría de las veces, ese botón está siempre visible.
  Buscando y buscand logré encontrar la manera en que dicho botón sólo esté presente cuando se le necesita y con un efecto deslizante al ir ascendiendo. Como lo que ocurre en este mismo blog.

  Para ello vamos a necesitar meter mano en el código HTML de nuestro blog:
ir a  Plantilla > Editar HTML

El código a ingresar es el siguiente:

1. Antes de </head> agregar el siguiente código sólo si ya no lo tienes:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'>
</script>


2. Antes de ]]></b:skin> agregar:

/* ----------  Botón Ir Arriba --------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}

#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */
display: block;
background: url(http://lh5.googleusercontent.com/-luDGEoQ_WZE/T1Ak-gta5MI/AAAAAAAACPI/ojfEGiaNmGw/s60/flecha-arriba.png) no-repeat center center;
}


3. Antes de </body> agregar:

<div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
//]]>
</script>





jueves, 9 de octubre de 2014

Barra de progreso

En varios blogs he visto barras de progreso cuando se desea mostrar gráficamente el avance de algo, ya sea un reto o una meta a cumplir.

Por eso me puse a buscar en internet cómo crear una y me llevé una gran sorpresa al ver lo sencillo que era.

Código HTML

El siguiente es un ejemplo con el código correspondiente, para aquellos que tienen algún conocimiento de HTML. Destaqué en rojo lo mínimo que querrán modificar para personalizar su barra:



34 / 100 páginas. 34% cumplido!

<div style="background: #FFFFFF; border: 1px solid #000000; height: 15px; width: 200px;">
<div style="background: #006699; font-size: 8px; height: 15px; line-height: 8px; width: 34%;">
<br /></div>
</div>
34 / 100 páginas. 34% cumplido!


Generador del código

Para aquellos que no desean meterse con el código, existe una página que, ingresando unos pocos datos, generará el código final para que podamos copiarlo y pegarlo en nuestro blog. He acá los pasos a seguir:

1. Ingresar a esta página.

2. Buscar el ejemplo de la barra de progreso, un poco más abajo.

3. En Create Your Own! ingresar nuestros datos:

    a. En Current Word Count ingresar el valor que llevamos

    b. En Total Word Goal ingresar el valor total al que queremos llegar

    c. En Progress Bar Color ingresar el color de la barra de progreso. Si no sabemos de colores en hexadecimal, simplemente hacemos click en Pick Color for your Word Meter y seleccionamos el color en la ventanita que se abrirá.

4. Presionar Calculate

5. Más abajo se mostrará la barra de progreso que hemos creado y, en un recuadro, el código que deberemos copiar y pegar en nuestro blog.
Si estás en Blogspot,  nos vamos a Diseño, agregamos por un gadget de tipo HTML/javaScript y en él copiamos el código.

Y listo!!!