Botón "REFRESCAR ó ACTUALIZAR" página

Cuando navegamos por Internet, muchas veces nos ha sucedido que la página que visitamos se queda estática. Nuestro navegador tiene, dentro de las muchas funciones, la de ACTUALIZAR ó REFRESCAR la misma mediante un click sobre el ícono que representa dicha función.Esta función podemos agregarla a nuestro blog insertando el siguiente código:

<a href="javascript:history.go(0)"><center><img src="<center>
<img src="http://i391.photobucket.com/albums/oo355/carjavi/refresh_48.png"alt="Phoucket-Video and Image Hosting"><br><br></center></a>

Para complementar lo antes dicho les dejo un ejemplo a continuación:

Caja contenedora de texto con Scroll

Script para colocar, en nuestro blog, una caja contenedora de texto con Scroll. Con ella la presentación de Script en las entradas, tendrán una mejor presentación. El código debe ser colocado antes de ]]></b:skin>, para ello debemos acceder a nuestra plantilla de la manera habitual; luego con la combinación CTRL+F para la fácil ubicación del código en la plantilla.

Este es el ejemplo de la caja contenedora y en su interior, el código para su implementación:

/* Caja de código */

pre {

background:transparent url(aquí la url de una imagen) no-repeat 0 0; /* Imagen Superior, si deseas cambiarla modifica lo que se encuentra dentro de url(AQUI) */

padding-top:22px; /* Relleno - para ajustar Fondo */

}

pre code {

overflow:auto; /* Determina si es necesario agregar barras de Scroll */

background-color:#E9E9E9; /* Color de Fondo en Hex *//*Podemos cambiarlo*/

border:1px solid #999999; /* Color de Borde en Hex *//*Podemos cambiar el color y tipo de borde*/

color:#990000; /* Color de letra en Hex *//*Tambien podemos cambiarlo*/

display:block; /* No tocar */

padding:8px; /* Relleno del cuadro */

white-space:pre; /* No tocar */

text-align:left; /* Alineacion del Texto , left=izquierda, center= centrado, right=derecha */su

min-height:63px; /* Altura minima del Cuadro */

}

/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */

code:hover {

background-color:##ffffff; /* Color de Fondo en Hex */


border:1px solid ##666666;/* Color de Borde en Hex */le

}


/* FIN Caja de código */

Posterior a esto debemos insertar éste código <pre><code></code></pre> en la plantilla de entrada: Configuración/Formato/Plantilla de Entrada, donde colocaremos el código (donde está coloreado de rojo) y guardamos los cambios.

Cuando vamos a editar una entrada nos aparecerá éste código de manera automática, evitando así, el tener que estarlo copiando. Si no lo necesitamos, en esa entrada, entonces lo suprimimos.

Fecha actualizada automaticamente

Hace ya algún tiempo leí sobre recomendaciones de widget que no debían agregarse al blog, ya que ello recargaba nuestra página haciéndola más lenta, además, según el autor del artículo al cual no recuerdo, de hacerlas parecer un "bazar". Dentro de esos widget estaba uno que realmente le consigo gran utilidad dado que, algunas veces nos perdemos en el tiempo y hasta olvidamos la fecha del día: EL CALENDARIO. Quizás, lo de recargar nuestro blog, sea cierto, pero existen males necesarios. Dando vueltas por la web encontré algo bien interesante, y es que podemos, mediante un script, colocar en nuestro blog la fecha, que al igual que en un calendario, se actualiza diariamente de manera automática. Yo lo he colocado en la sidebar de mi blog, donde podrán observarla, y en las siguientes líneas conseguirán la forma de implementarla. Accedemos a nuestro blog de la manera habitual y nos dirigimos a DISEÑO, luego a ELEMENTOS DE PAGINA, donde vamos a colocar éste código:

<SCRIPT LANGUAGE="JavaScript">



var mes = new Array();

mes[0] = "enero";

mes[1] = "febrero";

mes[2] = "marzo";

mes[3] = "abril";

mes[4] = "mayo";

mes[5] = "junio";

mes[6] = "julio";

mes[7] = "agosto";

mes[8] = "septiembre";

mes[9] = "octubre";

mes[10]= "noviembre";

mes[11]= "diciembre";



var hoy = new Date();

var dia = hoy.getDate();

var month = mes[hoy.getMonth()];

var anno = 1900 + hoy.getYear();

var fecha = dia + " de " + month + " de " + anno;

document.write(fecha);





</SCRIPT>

Luego guardamos los cambios y a disfrutar del resultado.

Favicon II

Luego del caos desatado como consecuencia de la desaparición de las figuras representativas (FAVICON), de nuestros blog, y hasta ahora en el más absoluto "misterio", estuve hurgando en la web y pude solucionar el problema que también me afectó, y por mas que intenté, colocando el código que aparece en una entrada anterior alusiva al tema, no pude lograr que apareciese en la barra del navegador mi favicón. Como decía antes, logré resolver el problema de la siguiente manera:

Accedemos a nuestra plantilla de la forma habitual, y desde la sección DISEÑO, vamos a EDICION HTML y buscamos:

<b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title>

Entre estas dos líneas colocamos lo siguiente:

<link href="URL del favicon"type="image/x-icon" rel="shortcut icon">



<link href="URL del favicon"type="image/x-icon" rel="icon"/>

La parte coloreada de rojo, la sustituímos por la dirección de nuestro favicón. La idea de colocar estas dos líneas, es porque de ésta manera el favicón se verá en la barra de direcciones, en las pestañas del navegador y en la lista de favoritos. Esta fué la manera de solucionar el tan sonado suceso.

Ocultar o eliminar la Navbar

Muchas veces nos resulta molesto algunas cosas en nuestro blog. Dentro de esas cosas se podría incluír la navbar. A continuación voy a dejarles unos script que les permitirá eliminar totalmente o en su defecto ocultar la misma. Si lo que queremos es eliminar la navbar debemos utilizar el siguiente código:

<style type="text/css">
#navbar- iframe{
height:0px;
visibility:hidden;
display:none
}
</style>

Con éste código logramos eliminar la navbar, y debemos colocarlo antes de la etiqueta <head> para ver los resultados. Si por el contrario, lo que buscamos es ocultar la navbar entonces debemos utilizar este otro código:

#navbar-iframe{

opacity:0.0;

filter:alpha(Opacity=0)

}

#navbar-iframe:hover{

opacity:1.0;

filter:alpha(Opacity=100,FinishedOpacity=100)

}

Para la colocación de éste código, debemos ubicar, en nuestra plantilla, el siguiente código:

body {

El código, para ocultar la navbar, es para ser utilizados en el Nuevo Blogger. Para ocultar la navbar, en Blogger Clasico, utilizamos éste otro código:

#b-navbar{

opacity:0.0;

filter:alpha(Opacity=0)

}

#b-navbar:hover{

opacity:1.0;

filter:alpha(Opacity=100,FinishedOpacity=100)

}

Si hicimos todos los pasos siguiendo estas instrucciones, al pie de la letra, podemos entonces guardar los cambios efectuados y ver los resultados.

Si te pareció de utilidad esta entrada demuéstralo con la puntuación, que consideres, al final de este post.

NOTA: Estos códigos debemos colocarlos justo sobre el código body{

Enlaces a través de una imágen haciendo Click (Efecto Onmouseover)

Esta entrada viene como resultado de haber ocultado la navbar de mi blog. No quise eliminarla pensando en las consecuencias que ésto pudiese generar posteriormente, pero luego de haber leído algunos comentarios publicados en ayudas Google me decidí por ocultarla solamente como podrán observar, y no eliminarla. Sin embargo, para acceder a mi plantilla, al igual que todos los que tenemos un blog en Blogger, y no tener que salir de la página para hacerlo, decidí colocar una imágen, donde haciendo click sobre ella, enlazo la página de Blogger para acceder. Luego vi en TRUCOGLER, una entrada que me pareció interesante hasta el punto de, haciendo el respectivo reconocimiento a la fuente, decidirme a publicarla hoy.

Creo que muchos saben como hacer un enlace con imágenes, aunque nunca está demás el recordarlo, pero voy a repetirlo nuevamente, incluyendo la manera de hacerlo a través del evento onMouseOver, teniendo sumo cuidado, ya que al pasar el cursor del mouse sobre la imágen, nos redirecciona a la página deseada de manera inmediata.

Comenzamos con el anlace haciendo click:

Debemos, como primer paso, buscar la imágen representativa de la página a la cual nos vamos a enlazar, yo tomé como ejemplo el anlace a Blogger:

Posterior a ésto utilizaremos el siguiente script para implementarlo en el sitio escogido (YO LO HICE EN LA SIDEBAR):

<a href="URL de la página a enlazar"><img src="URL de la imágen/></a>

Si hicimos todo de manera correcta visualizaremos, en el sitio que escogimos para colocar nuestro enlace una figura, para enlazar a Blogger, igual a la que aparece en la sidebar de éste blog. Seguidamente vamos con el otro ejemplo o forma de hacerlo:

Llevamos a cabo todos los primeros pasos que en el ejemplo anterior. Despues vamos a implementar el siguiente script:

<a href="http://www.blogger-com"onmouseover="window.location=this.href">http://i391.photobucket.com/albums/oo355/carjavi/blogger1.jpg</a>

A continuación debe aparecernos la imágen de Blogger, como la que aparece en la parte inferior de éste ejemplo, la cual al pasar el puntero del mouse sobre ella, debe redireccionarnos a la página solicitada (Blogger).

Si has encontrado ésta entrada interesante demuéstralo calificándola como se te lndica al final de la misma.

Calificar las entradas

En dias pasados, en El Escaparate, se nos informaba la disponibilidad en Blogger, de calificar nuestras entradas con un widget en forma de estrellas. También se nos informaba que en algunas plantillas, aunque está operativa la opción, no está incluído el código para su aplicación, por lo cual tendríamos que colocarlo, directamente, en la plantilla. En El Escaparate, podrán encontrar una explicación magistral de como hacerlo. Hoy, paseando por la Web, he encontrado una página desde donde podrán colocar, directamente y sin mayores problemas, el mismo widget. Lo único que no pude encontrar es la información de si se lleva un control estadístico de las votaciones que se hacen, pero asumo que, al igual que en Blogger, si existe. De todas formas, el efecto visual que esto produce, alimenta el ego de cualquiera.. Ahora bien, para la obtención de éste widget sólo tenemos que acceder a dicha página desde aquí, registrarnos, y nos enviarán un mail de confirmación; posteriormente escogemos la plataforma que sustenta nuestro blog y de inmediato nos aparecerá el widget de 5estrellas al pie de nuestras entradas para calificarlas. Dentro de las plataformas, para las cuales está disponible tenemos: Blogger, Wordpress, Typepad, Drupal y otros. También encontramos, en ésta página, un servicio FeedFlare, con el cual también podemos calificar nuestros feed RSS FeedBurner. Como detalle importante tenemos, dentro de ésta página, una selección de idiomas que nos permite colocar el widget en nuestro idioma: E S P A Ñ O L. Un ejemplo de lo expuesto, lo pueden observar al pie de ésta entrada, donde pueden dejar su opinion.

Drop Cap

Esta es una aplicación de Microsoft llamada Microsoft Word Drop Cap, y es considerada una herramienta con la cual podemos colocar la primera letra, de un parrafo, de mayor tamaño que el resto del texto que se escribe. Para mejores detalles ver aquí, dejándoles a continuación el código para su implementación:

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

Para la colocación de éste código accedemos a nuestra plantilla de la forma acostumbrada. Nos vamos a EDICION HTML, buscamos en la plantilla, accionando las tecla CTRL+F, el siguiente código ]]></b:skin&gt; , y justo antes colocamos el código base que nos dará el efecto. Luego guardamos plantilla. Para finalmente poder visualizar el efecto debemos colocar, el siguiente código, antes de comenzar a escribir la primera letra de nuestro post: <span class="dropcaps">D</span>

Espero que les sea de utilidad.

La primera letra del post.

Este es un truco que, realmente, le da presencia a nuestras entradas. A continuación voy a dejarles un script, para que con él logren que la primera letra, al comienzo de un post, sea de mayor tamaño que el resto del cuerpo del mismo.

Como primer paso accedemos a nuestra plantilla de la manera acostumbrada. Luego vamos a EDICION HTML, expandimos ARTILUGIOS y ubicamos el siguiente código: <style type='text/css'> Luego, justo debajo de éste código, colocamos lo siguiente: SPAN.firstcap{ font-size:200%; font-weight:bold; color:#000000; float:left; line-height:30px; width:0.75em; } El tamaño de la letra puedes modificarlo en font-size, cambiando el valor del ejemplo, por el valor que desees ver al escribir tu post. Luego de esto guardamos los cambios realizados. Todavía nos queda un código por aplicar y es el siguiente:

<span class="firstcap">Aquí la primera letra del post < /span>

Este código debe ir colocado antes de comenzar a escribir el post.