Tecnologia y Utilidades

Efecto Nieve

noreply@blogger.com (José Pinto) — Sat, 13 Jun 2009 14:35:10 PDT

Aunque generalmente suele ser cuando se acerca el mes de Diciembre la moda de nieve en el blog, nunca está demas tener a mano la forma de implementar en nuestra página ese efecto característico de la época. A continuación el código para tal efecto, y que debe ser colocado antes de la etiqueta <body> .

< script>

// Numero de copos, recomendados entre 30 y 40, si introducimos más podemos ralentizar la carga del blog.

var nieve_cantidad=35

// Tipo de color de los copos se mostraran. Se muestran de forma aleatoria.

var nieve_colorr=new Array("#aaaacc","#ddddFF","#ccccDD")

// Tipo de letra de los copos

var nieve_tipo=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Valor o letra de los copos

var nieve_letra="*"

// velocidad de caida

var nieve_velocidad=0.6

// tamaño mas grande de los copos

var nieve_cantidadsize=30

// tamaño mas pequeño de los copos

var nieve_chico=8

// Zona donde cae la nieve: 1 toda la pagina - 2 parte izquierda - 3 centro de pagina - 4 en la parte derecha

var nieve_zona=1



var nieve=new Array()

var marginbottom

var marginright

var timer

var i_nieve=0

var x_mv=new Array();

var crds=new Array();

var lftrght=new Array();

var browserinfos=navigator.userAgent

var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)

var ns6=document.getElementById&&!document.all

var opera=browserinfos.match(/Opera/)

var browserok=ie5||ns6||opera

function aleatorio(range) {

rand=Math.floor(range*Math.random())

return rand

}

function initnieve() {

if (ie5 || opera) {

marginbottom = document.body.clientHeight

marginright = document.body.clientWidth

}

else if (ns6) {

marginbottom = window.innerHeight

marginright = window.innerWidth

}

var nievesizerange=nieve_cantidadsize-nieve_chico

for (i=0;i<=nieve_cantidad;i++) {

crds[i] = 0;

lftrght[i] = Math.random()*15;

x_mv[i] = 0.03 + Math.random()/10;

nieve[i]=document.getElementById("s"+i)

nieve[i].style.fontFamily=nieve_tipo[aleatorio(nieve_tipo.length)]

nieve[i].size=aleatorio(nievesizerange)+nieve_chico

nieve[i].style.fontSize=nieve[i].size

nieve[i].style.color=nieve_colorr[aleatorio(nieve_colorr.length)]

nieve[i].sink=nieve_velocidad*nieve[i].size/5

//controlamos donde cae la nieve

if (nieve_zona==1) {nieve[i].posx=aleatorio(marginright-nieve[i].size)}

if (nieve_zona==2) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)}

if (nieve_zona==3) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4}

if (nieve_zona==4) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2}

nieve[i].posy=aleatorio(2*marginbottom-marginbottom-2*nieve[i].size)

nieve[i].style.left=nieve[i].posx

nieve[i].style.top=nieve[i].posy

}

movenieve()

}

function movenieve() {

for (i=0;i<=nieve_cantidad;i++) {

crds[i] += x_mv[i];

nieve[i].posy+=nieve[i].sink

nieve[i].style.left=nieve[i].posx+lftrght[i]*Math.sin(crds[i]);

nieve[i].style.top=nieve[i].posy

if (nieve[i].posy>=marginbottom-2*nieve[i].size || parseInt(nieve[i].style.left)>(marginright-3*lftrght[i])){

if (nieve_zona==1) {nieve[i].posx=aleatorio(marginright-nieve[i].size)}

if (nieve_zona==2) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)}

if (nieve_zona==3) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4}

if (nieve_zona==4) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2}

nieve[i].posy=0

}

}

var timer=setTimeout("movenieve()",50)

}

for (i=0;i<=nieve_cantidad;i++) {

document.write(""+nieve_letra+"")

}

Espero que para la fecha recuerden donde está.

Mostrando el total de post y comentarios con un Widget

noreply@blogger.com (José Pinto) — Sat, 06 Jun 2009 21:13:26 PDT

No podía dejar pasar por alto una recomendación que nos hace Vida Blogger cuando en un post nos presenta una manera elegante y vistosa de mostrar el total de post y comentarios de nuestro blog a través de un widget con una imágen llamativa:

Me vi "obligado" por las circunstancias y lo tengo implementado en la sidebar del blog, para lo cual sólo tenemos que colocar el siguiente código como elemento HTML/Javascript:

 <script type="text/javascript"> function

showpostcount(json) {

document.write(parseInt(json.feed.openSearch$totalResults.$t,10));

}</script><div style="width:108px; height:43px;

position:relative; font-size:13px; font:Verdana, Arial, Helvetica,

sans-serif;"><span style="position:absolute; top:5px;

right:7px;"><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></span><span style="position:absolute; bottom:5px; right:7px;"><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script></span><img src="http://4.bp.blogspot.com/_Go-jnwB2e7w/Sh1uvD847WI/AAAAAAAABzs/1pXFK4eP7F4/s1600/widget-comentarios.png"/></div><span style="font-size:10px"> Widget by <a

href="http://www.vidablogger.com.ar" target="_blank" title="Ayuda para Blogs">Ayuda para Blogs</a>

</span>

Guardamos los cambios y... listo.

NOTA: No debe hacersele ninguna modificación al CODIGO, ya que dejaría de funcionar de forma correcta

Ampliar imagen con un click

noreply@blogger.com (José Pinto) — Sat, 25 Jul 2009 20:57:49 PDT

Quizás a muchos nos ha sorprendido que, al entrar en alguna página web, nos hemos topado con un efecto en algunas imágenes que al hacer "click" sobre ellas, aumentan su tamaño de manera sustantiva en relación a su tamaño original. Este efecto es bastante sencillo, sólo basta con aplicar un par de códigos para tener en nuestro blog dicho efecto. Para ello debemos seguir los siguientes pasos:

1.- Accedemos a nuestra plantilla, edición HTML, y justo encima de la etiqueta </head> colocamos el siguiente código:

<link href="https://dl.getdropbox.com/u/833381/New%20folder/New%20Folder%20(1)/thumbnailviewer.css"/>





<script src='https://dl.getdropbox.com/u/833381/New%20folder/New%20Folder%20(1)/thumbnailviewer.js'type='text/javascript'></script>

Guardamos los cambios y vamos ahora a colocar el siguiente código en el lugar donde queremos colocar la imágen a ampliar.

<p><a href="Aquí URL de la imágen"rel="thumbnail"title="Lo que coloques aquí saldrá debajo de la foto">







<img src="Aquí URL de la imágen"style="width:550px;height:550px"/></a></p>

Podemos cambiar el tamaño de la imágen donde aparece width y height modificando el valor XXpx a (+) para que se vea más grande. En el aparte donde dice: "lo que coloques aquí saldrá debajo de la foto" colocas la frase correspondiente a la función (cerrar) .
Para finalizar, dejándoles un ejemplo de éste efecto, hay una nota que es la siguiente:
- en el código que va dentro de la plantilla, donde dice link debemos colocar una etiqueta antes de cerrar el código: "rel='stylesheet'.

Eliminando el subrayado de los link

noreply@blogger.com (José Pinto) — Sat, 06 Jun 2009 21:20:29 PDT

Para lograrlo sólo tenemos que agregar un código encima de la etiqueta </head> . Dicho código a continuación:

<style>

a {text-decoration: none;}

a:hover {text-decoration: underline;}

</style>

Resaltador para tu blog

noreply@blogger.com (José Pinto) — Thu, 28 May 2009 02:50:03 PDT

Herramienta que nos permite resaltar, en nuestro blog, secciones de textos en las entradas, que nos parezcan interesantes o relevantes para su uso posterior o como recordatorio. Solamente trabaja en Mozilla Firefox, Opera, Google Chrome y Apple Safari.

Para implementarlo en tu blog sólo tienes que acceder a MarkkitHighlight y comenzar a brindarle, a los lectores de tu blog, esta útil herramienta para resaltar.

Fondos a cuadros

noreply@blogger.com (José Pinto) — Wed, 27 May 2009 01:37:59 PDT

Había visto en algunos blogs, que las cajas contenedoras de códigos tenían el fondo cuadriculado. Muchas veces me pregunte como podría hacerse eso o en su defecto donde podría encontrar estos fondos, y no fue hasta ahora, que estando de visita en un blog de ayudas, donde el administrador había posteado una entrada, donde precisamente se pedía colocar la URL de una imágen para colocarla de fondo. Sin proponermelo o buscar mucho, conseguí una herramienta online que nos hace, después de un par de clicks, todo el trabajo. He querido compartir con Uds. esta herramienta, con la seguridad que lo van a apreciar se trata de TartanMaker.
Por ser tan instuitiva no se necesita dar mayores explicaciones sobre su funcionamiento, teniendo sólo, que comenzar a utilizarla si hay la necesidad. A continuación algunos ejemplos:

Aquí una vista de lo que es la herramienta:

Espero que les sea de utilidad.

Como acelerar la navegacion en I.E.

noreply@blogger.com (José Pinto) — Mon, 06 Apr 2009 00:22:36 PDT

Antes de realizar cualquier cambio importante en tu plantilla, no olvides "GUARDAR" una copia de la misma

Anteriormente habíamos hecho alusión a éste título pero aplicado a Mozilla Firefox. Hoy, después de varias pruebas y ver los resultados positivos de las mismas, vamos a suministrarles la información, pero aplicada a Internet Explorer.

En el editor de registro nos vamos a INICIO, le damos a EJECUTAR y en el recuadro que nos aparece:

colocamos en abrir REGEDIT y le damos aceptar. Al abrir la rama hacemos click llevándonos por ésta secuencia:

HKEY_CURRENT_USER/Software/Microsoft/WindowsCurrentVersion/InternetSetting

Luego, haciendo click derecho, se nos abrirá una ventana, donde vamos a crear dos (2) nuevos valores DWORD, donde al primero lo llamaremos MaxConnectionPerServer, y donde vamos a hacer click derecho y seleccionamos MODIFICAR, cambiando, si existe, o colocando si no, el valor 6 en la casilla de decimal.
Al segundo valor lo llamaremos MaxConnectionPer1_0Server, donde hacemos la misma operación que en el anterior valor, y el valor del número será 8. Luego de esto cerramos ventana y .... listo. Verán la diferencia.

Como acelerar la navegacion en Mozilla Firefox.

noreply@blogger.com (José Pinto) — Sat, 04 Apr 2009 18:27:34 PDT

Antes de realizar cualquier cambio importante en tu plantilla, no olvides "GUARDAR" una copia de la misma.

Este es un truco ideal para los usuarios, como yo, de Firefox, con el cual lograremos acelerar, notablemente, nuestra navegación.

Para comenzar nos vamos a la barra de direcciones de Firefox y escribiremos esto about:config, que no es otra cosa que la página de configuración avanzada de Firefox. Esto nos llevará a otra página donde conseguiremos algunos valores, y donde tendremos que ubicar lo siguiente:

network.http.pipelining.
network.http.pipelining.maxrequest.
network.http.proxy.pipelining.

Luego, haciendo click sobre ellas , cambiar sus valores de falsos (false) a verdaderos (true) . Sólo el valor http.pipelining.maxrequest no nos presentará un valor falso para cambiar a verdadero. Nos presentará un valor cero "0", el cual debemos cambiar a "30" , que no es mas que el número de peticiones que se realizarán, de forma simultánea, en el navegador, acelerando. notablemente, la carga de la página.
Despues de esto, hacemos click con el botón derecho del mouse en cualquier lugar de la página, y en el recuadro que nos va a aparecer seleccionamos "NUEVO" y "ENTERO" , colocándole al nuevo campo el nombre nglayout.initialpaint.delay y un valor de "0". Esto le informa al navegador que no espere para mostrar en pantalla la información en pantalla que recibe.
Debemos tener presente algo:

" LAS MEJORAS SOLO SE MOSTRARAN SI SE TIENE UNA BUENA CONEXION "

Espero que esta información les sea de utilidad.

Eliminar el marco de las imagenes en Blogger.

noreply@blogger.com (José Pinto) — Sat, 06 Jun 2009 21:21:47 PDT

Antes de realizar cualquier cambio importante en tu plantilla, no olvides "GUARDAR" una copia de la misma.

Muchas veces, cuando bajamos imágenes de nuestro PC, o de algún alojamiento para utilizarlas en algun post, estas se nos presentan con un marco que realmente afean a la misma, o simplemente al autor no le gustan estos marcos o bordes. Para eliminar estos bordes vamos a hacer lo siguiente:

accedemos a nuestra plantilla de la manera acostumbrada, nos vamos a EDICION HTML, y con la ayuda de nuestro buscador de códigos (CTRL+F) ubicamos lo siguiente:

.post img {
padding:4px;
border:1px solid #cde;
}

Podemos observar un valor marcado en rojo, el cual vamos a modificar cambiándolo a cero "0", luego de esto guardamos los cambios, y si hemos colocado una imágen veremos como el borde o marco a desaparecido. La aparición de dicho borde o marco es porque al no tener un valor que le hallamos dado, por defecto se toma de manera automática el valor de 1 pixel.
Espero que ésta información les halla sido de utilidad.

PageRank: Widgets vistosos.

noreply@blogger.com (José Pinto) — Sat, 28 Mar 2009 17:09:27 PDT

Antes de realizar cualquier cambio importante en tu plantilla, no olvides "GUARDAR" una copia de la misma.

El page rank no es más que, a mi modo de ver, una calificación numérica que se le da a nuestro blog, y que dependiendo de nuestra vanidad, nos gustará o no la forma de presentarlo.

En uno de esos paseos que habitualmente, casi todos, damos por GOOGLE conseguí ésta página, donde colocando la URL de tu blog te devolverá varios códigos con su respectiva visualización del widget para insertarlos en tu blog:

y estos serían algunos de los ejemplos de widgets que encontraremos:

Espero que les sea de utilidad esta información.

Ocultar el cartel "VER TODAS LAS ENTRADAS"

noreply@blogger.com (José Pinto) — Sat, 06 Jun 2009 21:27:42 PDT

Antes de realizar cualquier cambio importante en tu plantilla, no olvides "GUARDAR" una copia de la misma.

Anteriormente habíamos estado hablando de como eliminar el famoso cartelito de "VER TODAS LAS ENTRADAS", pero para que eliminarlo si lo podemos ocultar. Nunca sabemos la utilidad de las cosas hasta que llegamos a necesitarlas. Para ello accedemos a nuestra plantilla de la forma acostumbrada, y ayudados por nuestro buscador de códigos (CTRL+F), y sin expandir artilugios ubicamos esto ]]></b:skin> , y justo encima colocamos el siguiente código:

.status-msg-wrap {
visibility:hidden;
display:none;
}

Luego previsualizamos, no sin antes pulsar en la sección de etiquetas que tenemos en la sidebar para que aparezca el famoso cartelito. Allí nos daremos cuenta que "ya no aparece" y es cuando vamos, realmente, a guardar nuestros cambios.
Otra manera de ocultar el cartelito es ubicando el código del mismo, para lo cual si vamos a expandir artilugios y ubicamos esto <b:include data='top' name='status-message'/> y lo vamos a preceder de etiquetas de comentarios (mejor les dejo el ejemplo) :



Lo que aparece en color rojo son las etiquetas de comentarios, y ellas se encargarán de mantener oculto el código que hace posible la aparición del cartelito. Espero que esta información les sirva de ayuda.

Colocando "ULTIMOS COMENTARIOS" en la sidebar

noreply@blogger.com (José Pinto) — Mon, 23 Mar 2009 22:32:54 PDT

Antes de realizar cualquier cambio importante en tu plantilla, no olvides "GUARDAR" una copia de la misma.

Sin mucho que hablar vamos al tema: accedemos a nuestra plantilla de la forma acostumbrada, nos vamos a ELEMENTOS DE PAGINA, y en AGREGAR GADGET hacemos click y buscamos donde dice FEED, allí vamos a colocar esto http://NOMBRE DE TU BLOG.blogspot.com/feeds/comments/full donde nos piden colocar URL , no debemos olvidar que donde dice NOMBRE DE TU BLOG, colocar el nombre de nuestro blog, ya que si no lo hacemos no obtendremos ningún resultado, puesto que es la dirección del feed de los comentarios de nuestro blog.
Luego de colocada la URL le damos en "seguir" lo que nos va a remitir a una página donde vamos a configurar la cantidad de comentarios a mostrar, fecha de los mismos o quien emite el comentario.Realizado todo esto le damos a GUARDAR, no sin antes cambiar el titulo que se nos va a mostrar y que es el de nuestro blog, por el de ULTIMOS COMENTARIOS.
Espero les sea de utilidad la información.

Caja contenedora de codigos

noreply@blogger.com (José Pinto) — Sun, 22 Mar 2009 09:01:20 PDT

Antes de realizar cualquier cambio importante en tu plantilla, no olvides "GUARDAR" una copia de la misma.

Como pueden observan en este blog, todos los códigos están contenidos dentro de una caja con fondo gris: CAJA CONTENEDORA DE CODIGOS. La misma podemos transformarla a nuestro gusto o contrastando con el fondo de nuestro blog, y para ello, en el mismo código, se nos indicará donde hacer las modificaciones. Para su implementación accedemos a nuestra plantilla de la forma acostumbrada y con la ayuda de nuestro buscador de códigos buscamos esto ]]></b:skin> , y justo encima colocamos el siguiente código:

/* Caja de código */
pre {
background:transparent url(http://i391.photobucket.com/albums/oo355/carjavi/button.gif) 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:#EBE7EB; /* 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:#6C7078; /* 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 */

Luego de haber hecho esto guardamos plantilla y nos vamos a CONFIGURACION y en la sección de FORMATO nos vamos a plantilla de entrada donde colocaremos esto <pre><code> AQUI EL CODIGO </code></pre> , que no es mas que el código que utilizaremos para exponer los códigos en nuestras entradas. Espero que les sea de utilidad esta información.

Resaltando parte del titulo de la entrada con OTRO COLOR

noreply@blogger.com (José Pinto) — Sun, 22 Mar 2009 09:05:07 PDT

Antes de realizar cualquier cambio importante en tu plantilla, no olvides "GUARDAR" una copia de la misma.

Para conseguír éste efecto, sólo tenemos que escoger la parte del título de la entrada que queremos resaltar, y utilizando el siguiente código, conseguiremos el efecto que presenta el título de ésta entrada.


<font color="NOMBRE DEL COLOR EN INGLÉS"><AQUI EL TEXTO QUE SE VA A COLOREAR</font>

Espero que ésta entrada les sea de utilidad.

Quitar el cartel de "VER TODAS LAS ENTRADAS"

noreply@blogger.com (José Pinto) — Wed, 25 Mar 2009 20:04:22 PDT

Antes de realizar cualquier cambio importante en tu plantilla, no olvides "GUARDAR" una copia de la misma.

Ese famoso cartelito que aparece en nuestro blog y que dice: " VER TODAS LAS ENTRADAS ", y que a algunos molesta y a otros no, vamos a decirles como eliminarlo:
Accedemos a nuestra plantilla de la forma acostumbrada, nos vamos a EDICION HTML, y expandiendo artilugios buscamos el siguiente código:

<b:include data='top' name='status-message'/>

y sin contemplación alguna lo eliminamos, guardamos los cambios, desmarcamos artilugios y listo. Espero les sea de utilidad ésta información.

Drop Cap

noreply@blogger.com (José Pinto) — Wed, 27 May 2009 01:07:22 PDT

Antes de realizar cualquier cambio importante en tu plantilla, no olvides "GUARDAR" una copia de la misma.

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> , y justo antes colocamos el código base que nos dará el efecto. Luego guardamos plantilla.

Para finalmente y poder visualizar el efecto debemos colocar, el siguiente código, antes de comenzar a escribir la primera letra de nuestro post:

<span class="dropcaps">AQUÍ LA LETRA INICIAL</span>

Espero que les sea de utilidad.

Resaltar textos con el color deseado.

noreply@blogger.com (José Pinto) — Sun, 22 Mar 2009 09:08:57 PDT

Antes de realizar cualquier cambio importante en tu plantilla, no olvides "GUARDAR" una copia de la misma.

Al igual que la amiga de Gem@blog, tambien me impresionó, gratamente, lo que ella llama curiosidad. Es un código con el cual conseguiremos, cambiando por el color de nuestra preferencia, establecer un color definido cuando subrayemos una frase o un texto, es decir: "Personalizar nuestros subrayados". Para ello accedemos a nuestra plantilla de la manera acostumbrada, y sin expandir artilugios ubicamos, con la ayuda de nuestro buscador de códigos (CTRL+F) lo siguiente: ]]></b:skin>, y justo encima colocamos éste código que es el del efecto:

::-moz-selection{background:#(AQUÍ EL COLOR QUE QUEREMOS QUE APAREZCA AL RESALTAR;color:white;
/*FIREFOX*/}

Luego de ésto, GUARDAMOS PLANTILLA y listo. En I.E. no puede verse el efecto, y en mi blog puedes apreciar el efecto al resaltar cualquier línea, te dará, en el resaltado, el color del header. Espero que ésta "curiosidad" les sea de utilidad.

Redondear las esquinas del Header

noreply@blogger.com (José Pinto) — Tue, 26 May 2009 17:07:50 PDT

Antes de realizar cualquier cambio importante en tu plantilla, no olvides "GUARDAR" una copia de la misma.

Para obtener éste bonito y llamativo efecto en nuestro blog, vamos de una vez a las explicaciones para su implementación. Accedemos a nuestra plantilla de la forma acostumbrada, vamos a EDICION HTML, y sin expandir artilugios buscamos lo siguiente:

#header{
margin:5px;height:150px;
background-color:#(AQUÍ EL CODIGO HEXADECIMAL DEL COLOR DE FONDO DEL HEADER);
border:0px solid $bordercolor;
text-align:center;
color:$pagetitlecolor;
}

y justo debajo de la zona marcada en rojo, colocamos lo siguiente:

-moz-border-radius:12px;
 -webkit-border-radius:12px;

En ésta parte del código, es donde le vamos a dar la cantidad de arco a las esquinas del header, en función a la cantidad de pixeles (px) que coloquemos en el código.
Antes de GUARDAR PLANTILLA le damos a VISTA PREVIA, y si lo que apreciamos satisface nuestras expectativas, entonces le damos a GUARDAR. Un ejemplo de esta entrada lo pueden apreciar en el header de éste blog.

Espero que ésta información les sea de utilidad.

Como resaltar un texto.

noreply@blogger.com (José Pinto) — Sun, 22 Mar 2009 09:11:11 PDT

Antes de realizar cualquier cambio importante en tu plantilla, no olvides "GUARDAR" una copia de la misma.

Una de las formas que conocía, hasta ahora, era la que generalmente se utiliza cuando escribimos un post, y es la de con el click izquierdo del mouse, sombrear el texto seleccionado, luego pulsamos la T de los colores en el editor del blog, escogemos el color y luego hacemos, nuevamente, click al final de la frase o texto, teniendo así solucionado esa interrogante.

A continuación les voy a dejar una forma de obtener ese resultado y es con CSS. Accedemos a nuestra plantilla de la forma acostumbrada, nos vamos a EDICION HTML, y expandiendo artilugios buscamos, ayudados con nuestro buscador de códigos (CTRL+F) lo siguiente:

<style type="text/css">

y justo debajo colocamos esto:

span.highlight{
background-color:#(AQUI COLOR CON EL CUAL SE RESALTA);
}

Luego, el código que vamos a utilizar para resaltar el texto o frase que queremos, es el siguiente:

<span class="highlight">AQUI TEXTO O FRASE A RESALTAR</span>

Para tener siempre a mano éste código, en el momento de utilizarlo cuando escribimos un post, hacemos lo siguiente: nos vamos a CONFIGURACION, hacemos click en FORMATO, y en el recuadro PLANTILLA DE ENTRADA pegamos el código para, como dije antes, tenerlo a mano. Espero que les sea de utilidad.

Ocultar o eliminar la Navbar en Blogger.

noreply@blogger.com (José Pinto) — Sun, 22 Mar 2009 09:12:21 PDT

Antes de realizar cualquier cambio importante en tu plantilla, no olvides "GUARDAR" una copia de la misma.

Realmente considero innecesaria la Navbar de Blogger, podemos sustituír la sección de ACCEDER, por un link que podemos colocar en la sidebar anexandole, también, el acceso a Blogger in Draft .
En lo referente a accesos a otros blog con el buscador que puedes obtener, accediendo desde Blogger in Draft, puedes hacerlo, refiriéndote que, con el mismo buscador, puedes hacer búsquedas internas de tu blog. Vamos ahora con el tema en cuestión: Accedemos a nuestro blog de la manera acostumbrada, nos vamos a la sección DISEÑO, desde la cual seleccionamos EDICION HTML donde vamos a ubicar la etiqueta <head> , y a continuacion vamos a colocar el siguiente código:

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

De ésta manera estamos eliminando la Navbar del blog. Para solamente ocultar la misma realizamos los siguientes pasos: hacemos los dos primeros pasos del caso anterior, pero ésta vez vamos a ubicar el código body{ , y justo encima de él colocamos el siguiente código:

#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}

De ésta manera tenemos en un sólo post dos maneras de hacer lo mismo: OCULTAR O ELIMINAR LA NAVBAR EN BLOGGER.

Espero les sea de utilidad.