El Escaparate: mayo 2007

Estás en: Inicio » Archivos de mayo 2007

Foto del autor en el post-footer

Modificar mensaje de etiquetas

Eliminar/ocultar mensaje de etiquetas

Ya os expliqué en una entrada anterior, como podemos usar un traductor para el blog, con la opción de que el icono de traducción aparezca debajo de cada post.
En esta ocasión vamos a colocar un traductor para todo el blog en la sidebar.
Supongo que habrá distintas maneras de hacerlo, como en casi todo, pero yo paso a explicaros la forma de hacerlo que tenía aplicada antes en mi blog.
Consiste en usar el traductor de Google y aplicarlo a una imagen, algo así como una especie de "trampa" que le llamo yo :-) pero el resultado es más o menos "decente" que es lo que importa.

1- Conseguimos una imagen que consideremos apropiada, normalmente suele ser la bandera del país en el que se habla el idioma al que queremos traducir el blog. En este caso, usaremos como ejemplo el inglés, así que la bandera sería, más o menos, como esta:

2- Subimos nuestra imagen a cualquier web de alojamiento de imágenes, copiamos su url y la guardamos para usarla más adelante. Si os gusta mi bandera y queréis ponerla, pincháis sobre ella con el botón derecho del mouse y en propiedades copiáis la url de la imagen.

3- Ahora vamos a la página de Google, a la derecha de la caja de búsqueda veremos la opción "herramientas del idioma", pinchamos e introducimos la url o dirección de nuestro blog en "traducir página web", cambiamos la opción "inglés a español" por "español a inglés", pinchamos en "traduzca" y nuestro blog aparece traducido al inglés.
Tenemos que copiar la url que vemos arriba en nuestro navegador y la guardamos, en el "blog de notas", por ejemplo.

4- Vamos a la plantilla y añadimos un nuevo elemento, le ponemos un título a nuestro traductor, como "traducir blog" "léelo en inglés"...o lo que sea.
Dentro del elemento pegamos este código:

<a href="LA DIRECCIÓN (URL) QUE COPIAMOS EN GOOGLE"><img src="LA DIRECCION (URL) DE NUESTRA IMAGEN"></a>

Guardamos cambios y arrastramos el elemento a la parte de la sidebar donde queramos que nuestras visitas lo vean. Cuando pinchemos sobre la bandera, se abrirá nuestro blog directamente en la página de Google y aparecerá traducido, con la posibilidad de volver al blog "normal" (en español) desde esa misma página.

Espero que esto te sirva J.Massanet

[+/-]

Marcadores sociales en Blogger

Los he visto esta mañana en el blog de pepino y me ha gustado mucho como quedan, porque en otros blogs que los he visto los iconitos siempre me parecían un poco grandes.
Pepino tiene la gentileza de proporcionarnos el código completo tal como el lo está usando en su blog, con imágenes incluidas, de tal manera que simplemente hemos de buscar en nuestra plantilla - html, esta parte:

<p class='post-footer-line post-footer-line-3'/>

Y justamente antes de dicha línea, añadir el código:

Compártelo: <a title="Menéame" expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src='http://img181.imageshack.us/img181/3083/meneamehm7.gif'/></a>
<a title="Technorati" expr:href='"http://www.technorati.com/search/"
+ data:post.url' target='_blank'><img src='http://img45.imageshack.us/img45/5606/technoratiiy1.gif'/></a>
<a title="Del.icio.us" expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src='http://img50.imageshack.us/img50/9913/deliciogl4.gif'/></a>
<a title="DiggIt!" expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src='http://img50.imageshack.us/img50/300/diggjf4.gif'/></a>
<a title="Yahoo!" expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?url" + data:post.url + "&title=" + data:post.title' target='_blank'><img src='http://img50.imageshack.us/img50/163/yahooab9.gif'/></a>
<a title="Fresqui" expr:href='"http://tec.fresqui.com/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src='http://img45.imageshack.us/img45/5397/fresquisr8.gif'/></a>
<a title="PromotingBlogs" expr:href='"http://promotingblogs.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src='http://img261.imageshack.us/img261/5318/pb16x16it8.png'/></a>

Ya tenemos las principales Redes Sociales en nuestro blog:
Menéame, Technorati, Del.icio.us, Digg, Yahoo! , Fresqui y PromotingBlogs.
Por supuesto podemos eliminar en el código las que no queramos mostrar y cambiar "compartelo" por lo que más nos apetezca.

[+/-]

Capturar pantalla del PC

Algunas veces habréis visto en algún blog imágenes "capturadas" de la pantalla del ordenador, sin ir más lejos, en este mismo blog suelo "colgar" imágenes de mis blog de pruebas, por ejemplo.
Conseguir capturar una pantalla, no es nada complicado.

En un PC puedes hacer lo siguiente:

1) Cuando quieras capturar la pantalla pulsas la tecla "Print Screen", en algunos casos, como el mio, la tecla es "Impr pag", que se encuentra arriba a la derecha en el teclado. Con esto se guarda la imagen de lo que se ve en tu pantalla en el portapapeles.
2) Abres un programa de imágenes, como Photoshop, el Paint, o el que sea, y puedes pegar el contenido del portapapeles en cualquier sitio. Puedes crear un archivo nuevo y pegar (Edición - Pegar) el contenido en dicho archivo, o puedes pegar el contenido en un archivo con el que estés trabajando en ese momento.
3) Modificas la imagen según tus necesidades y la tendrás lista para usar.

Yo os recomiendo el uso de un programa de capturas, hay bastantes donde elegir y de uso gratuito la mayoría de ellos.

Voy a contaros un poco, las características esenciales del que suelo usar yo, se llama MWSnap3 y entre sus muchas virtudes, la más destacado es que está en español y es gratuito. ;-)
Ocupa muy poco, 0,98 MB.
No solo puedes capturar la pantalla completa, sino un area de la pantalla de tamaño fijo, donde tu escoges el tamaño.
Una selección de la pantalla que elijas con tu ratón.
El escritorio completo.
La captura puede guardarse en formato BMP, JPG, GIF, PNG o TIFF y contiene varias herramientas gráficas: zoom, regla, selector de colores y espía (que proporciona información sobre el objeto a capturar).
Amen de un montón de botoncitos que aún no he "explorado" porque siempre suelo usar la selección de pantalla.
Ni siquiera se si hay una versión mas nueva, porque con esta me va genial.
Si os interesa, podéis descargarlo en este link:

MWSnap3

[+/-]

Entre comillas

Una bonita forma de resaltar un texto en una entrada.
Es muy sencillo de implementar en nuestro blog, solamente hemos de añadir unas líneas en el CSS de la plantilla:

blockquote {
text-indent: 25px;
background: url(URL DE IMAGEN DE NUESTRAS COMILLAS);
background-position: 0 2px;
background-repeat: no-repeat;
}

Guardamos cambios.

Cada vez que deseemos hacer uso de las comillas hemos de añadir esto al editar nuestra entrada:

<blockquote> AQUÍ EL TEXTO QUE VA ENTRE COMILLAS</blockquote>

Aunque lo más fácil es selecionar el texto que queremos incluir entre comillas y pinchar en el botoncito con las comillas del editor de entradas, el resultado es el mismo que haciéndolo a mano.

Como os digo siempre, podemos "moldear" el CSS a nuestro gusto, el color, el tipo de fuente, la distancia al texto de las comillas...
Encontraréis muchas imágenes de comillas en Google, simplemente escogemos buscar imágenes y poniendo "comillas gif" os saldrán algunas como estas de mi blog de pruebas, eso si, no escojáis unas comillas demasiado grandes, si no queréis andar retocando el CSS :

Si queremos conseguir el efecto de las comillas delante y detrás de nuestro texto, es decir, comillas de apertura y cierre, añadimos esto en el CSS de la plantilla:

blockquote {
text-indent: 25px;
background: url(URL DE IMAGEN DE COMILLAS DE APERTURA);
background-position: 0 2px;
background-repeat: no-repeat;
}
blockquote p {
display: inline;
margin: 0;
padding-right: 24px;
background: url(URL DE IMAGEN DE COMILLAS DE CIERRE);
background-position: bottom right;
background-repeat: no-repeat;
}

Cada vez que deseemos hacer uso de las comillas hemos de añadir esto al editar nuestra entrada:

<blockquote><p> AQUÍ EL TEXTO QUE VA ENTRE COMILLAS</p></blockquote> o pegarlo en plantilla-opciones-formato-ventana de plantilla.

Y así se verá, más o menos:

[+/-]

Artículo relacionado

[+/-]

Links a tu blog

[+/-]

Pon el botón de FeedBurner en español

[+/-]

Iconos de navegación

[+/-]

Navbar personalizada

[+/-]

Guardar borrador de entradas (función Blogger)

[+/-]

Barras verticales de separación

[+/-]

Ponerle cabecera a la plantilla Dots

[+/-]

Cambiar la imagen de email

[+/-]

Emoticonos en tu blog

[+/-]

Tachando

[+/-]

Feevy [Ultimos post de otros blog en tu sidebar]

[+/-]

Links con movimiento

[+/-]

Cuenta atrás para un evento

Me comenta Javi en el tagboard que le gustaría poner una cuenta regresiva o cuenta atrás para un suceso, para que lo entendías mejor, es ir contando los días que faltan, por ejemplo, para nuestro cumpleaños.
Me dice también que lo ha visto en Ayuda para tu blog pero que ha tenido problemas para seguir la explicación, para ser justa, he de decir que yo he usado el mismo código que ofrecen en Ayuda para tu blog, y no he tenido ningún problema para incluirlo en mi blog de pruebas.

1- Copiamos este código y lo pegamos en un nuevo elemento Html-javascript, le ponemos el título que nos parezca adecuado:
<form name="count">
<input name="count2" size="32" type="text"/>
</form>

<script>

/*
Count down until any date script-
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
*/

//change the text below to reflect your own,
var before="Mi Cumpleaños!"
var current="Hoy es Mi Cumpleaños!"
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
function countdown(yr,m,d){
theyear=yr;themonth=m;theday=d
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[m-1]+" "+d+", "+yr
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
if(dday==0&&dhour==0&&dmin==0&&dsec==1){
document.forms.count.count2.value=current
return
}
else
document.forms.count.count2.value=" "+dday+ " días, "+dhour+" hrs, "+dmin+" min, y "+dsec+" seg "
setTimeout("countdown(theyear,themonth,theday)",1000)
}
//enter the count down date using the format year/month/day
countdown(2007,06,20)
</script>

En esta parte del código: var before="Mi Cumpleaños!" cambiamos el texto por el suceso que queramos mostrar, "Navidad", "Vacaciones", "Fin de curso", etc.

En esta otra parte: var current="Hoy es Mi Cumpleaños!" cambiamos el texto por el suceso: "Ya estamos en Navidad", "Llegaron las vacaciones", "Por fin finalizaron las clases", etc.

Y, por último, en esta línea del código: //enter the count down date using the format year/month/day countdown(2007,06,20), cambiamos la fecha por la del suceso, es decir, la fecha de nuestro cumpleaños, del comienzo de Navidad, del día que empezamos las vacaciones...

Voy a tener una sobrina

[+/-]

Comentarios en el pie del post con imagen

[+/-]

Imagen antes del título de las entradas

[+/-]

Cambiar o eliminar el "publicar un comentario en la entrada"

[+/-]

Una fecha original en el blog

Haciendo mi ronda de visitas diarias a otros blogs interesantes, me encontré en el blog de Gem@ con un post donde explica como personalizar la fecha del blog.

En primer lugar tenemos que cambiar el formato de nuestra fecha en plantilla-opciones-formato, en el desplegable "formato de cabecera de fecha" escogemos la penúltima opción, es decir, la que se ve así: 8 mayo 2007.
Guardamos cambios.

Vamos a Plantilla-HTML y justo después de <body> copiamos este script:
<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>"; //Le otorgamos una clase al día
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>"; //Le otorgamos una clase al mes
anio = "<div class='fecha_anio'>"+da[2]+"</div>"; //Le otorgamos una clase al año
document.write(dia+mes+anio);
}
</script>
Guardamos cambios.

Vamos a Plantilla html, Expandimos la plantilla de artilugios, buscamos esta línea del código: <data:post.dateHeader/> y lo sustituimos por:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

Añadimos en el CSS dela plantilla, por ejemplo, antes de ]]></b:skin>
este código:

#fecha {
display: block;
margin:0 10px;
float:left;
padding: 5px;
color: #464646;
background: #e4e3ad;
border:#d7d675 3px solid;
text-transform:capitalize;
}

.fecha_dia {
display: block;
font-size: 16px;
font-weight:bold;
}

.fecha_mes {
display: block;
font-size: 10px;
}

.fecha_anio {
display: block;
font-size: 10px;
}

Guardamos los cambios y si todo ha ido según lo previsto, la fecha de nuestras entradas debería verse así:

Como bien dice Gem@ en su post, podemos modificar los colores y estilos en esta parte del css que hemos añadido, así que me puse a "trastear" en el css y pensé que porque no añadirle una imagen entre otras modificaciones.
No quería que la imagen, por grande, me "despatarrara" la fecha, así que se me ocurrió usar FavIcon from Pics para que fuera pequeñita (32x32), luego modifiqué algunas distancias y colores en el CSS para adaptarlo lo mas posible al estilo de mi blog, aunque de momento, he decidido no usarlo en El Escaparate. Y este fue el resultado:

Os dejo la parte del CSS para añadir, acordaros de cambiar en background:url, la url de mi imagen por la de la vuestra.

#fecha {
display: block;
margin:0 10px;
float:left;
padding: 1px;
color: #464646;
background: url(http://2.bp.blogspot.com/_8PJ-pgoBhWQ/Rj0Blj1UghI/AAAAAAAABR8/JTooNQr3wu8/s400/favicon.JPG)no-repeat;
border:#CC0000 3px solid;
text-transform:capitalize;
}

.fecha_dia {
display: block;
font-size: 10px;
font-weight:bold;
margin-top:20px;
}

.fecha_mes {
display: block;
font-size: 10px;
}

.fecha_anio {
display: block;
font-size: 10px;
}

¡Suerte! ;-)

[+/-]

Plantilla tic tac de Blogger

Me han pedido hace días a través de un email una modificación para la plantilla Tic Tac de Blogger. Es una de las plantillas más difícil de "ensanchar", ya que es de cuerpo fijo, es decir, hay que modificar sus imágenes de fondo con un programa de dibujo, porque si no, no "siguen" a la sidebar y el cuerpo de entradas, y queda todo descorregido.

Las modificaciones que he hecho son ensanchar el blog hasta 950px, las entradas 600px y la sidebar 300px, además de añadirle una imagen en la cabecera.

Digo todo esto porque si alguien está interesado en esas medidas, puede pedirme por email el CSS de la plantilla, os rogaría que no me pidierais distintas medidas, pues ando apuradilla de consultas y lo de modificar las imágenes me lleva bastante tiempo (lo de los programas de dibujo no es lo mio). ;-)

NOTA
He pensado que sería más fácil para todos incluir en este post las modificaciones, así que allá van:

Busca esto en el código html de tu plantilla, está en la parte del CSS, ya sabes donde hay tantas {

/* ---( layout structure )---*/ y elimina todo lo que va entre eso y /* ---( main column )--- */

Después lo sustituyes por esto:

#outer-wrapper {
width: 950px;
margin: 0px auto 0;
text-align: left;
font: $bodyfont;
background: url(http://img208.imageshack.us/img208/8859/tile1ln7.gif) ;
}
#content-wrapper {) ;
margin-left: 0px; /* to avoid the border image */
}
#main {
float: left;
width: 600px;
margin: 0px 0 0 0;
margin-top:30px;
padding: 0 0 0 1em;
line-height: 1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
float: right;
width: 300px;
padding: 0px 25px 0 0;
font-size: 85%;
line-height: 1.4em;
color: $sidebartextcolor;
background: url(http://img486.imageshack.us/img486/4925/sidebarbgki0.gif) no-repeat 0 0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

/* ---( header and site name )--- */
#header-wrapper {
margin: 0;
padding: 0;
font: $pagetitlefont;
background: #e0e0e0 url(http://img512.imageshack.us/img512/3415/nombretk6.jpg) no-repeat 0px 0px;
}
#header {
margin: 0;
padding: 25px 60px 35px 160px;
color: $pagetitlecolor;
background: url(http://img95.imageshack.us/img95/8970/bottomsillro8.jpg) no-repeat bottom left;
}
#header h1 {
font-size: 200%;
text-shadow: #81A75B 2px 2px 2px;
}
#header h1 a {
text-decoration: none;
color: $pagetitlecolor;
}
#header h1 a:hover {
color: #eee;
}

Ahora busca esto otro, lo verás siguiendo hacia abajo:

/* ---( footer )--- */

Un par de líneas debajo de eso está
#footer-wrapper { busca la línea de background: url y verás una url de imagen, sustituyela por esta:

http://img522.imageshack.us/img522/7039/bottomsashxp6.jpg

Dos líneas por debajo verás #footer { sustituye la url de la imagen por esta:

http://img524.imageshack.us/img524/7314/bottomsilljr6.jpg

COMPRUEBA CON LA VISTA PREVIA Y SI LO VES CORRECTO GUARDA CAMBIOS.

[+/-]

Lista de links original

Es una forma diferente de mostrar en tu sidebar una lista de links, o lo que sea. Lo vi en una web y lo tomé prestado :-$ de su código fuente, aunque le he hecho alguna pequeña modificación.
Podemos sustituir el icono que usamos para subir y bajar por el que más nos guste, solo hay que subirlo a una web de alojamiento de imágenes, copiar su url (dirección) y colocarla en el código.
Cuando pinchemos en el icono de arriba (Abrir), la lista de links se expandirá y para cerrar pinchamos en el icono de abajo (Cerrar).
Podéis verlo en mi sidebar en "Recomendados" y "Blogs de Ayuda" con un pequeño ojo para abrir y cerrar.

Os dejo el código:
<li>
<h2>TÍTULO QUE SE MOSTRARÁ <img alt="Desplegar" src="URL DE LA IMAGEN (ICONO)" onclick="getElementById('divContenedor_3').style.display='block';getElementById('boton_3').style.display='block';" title="Desplegar"/></h2>
<br/>
<div id="divContenedor_3" style="display: none;">
<ul><li><a href="URL DE LA PÁGINA">NOMBRE DE LA PÁGINA</a></li>
<li><a href="URL DE LA PÁGINA">NOMBRE DE LA PÁGINA</a></li>
<li><a href="URL DE LA PÁGINA">NOMBRE DE LA PÁGINA</a></li>
<li><a href="URL DE LA PÁGINA">NOMBRE DE LA PÁGINA</a></li>
</ul>
</div>
<br/>
<div id="boton_3" style="display: none;">
<img alt="Contraer" src="URL DE LA IMAGEN (ICONO)" onclick="getElementById('divContenedor_3').style.display='none';getElementById('boton_3').style.display='none';" title="Contraer"/>
</div>
</li>
NOTA
Si vais a emplear el código más de una vez, como he hecho yo, tenéis que sustituir donde dice "divContenedor" y "boton" por otro número, es decir si aplicáis el código por primera vez, ponéis 1, a la siguiente vez que lo uséis 2 y sucesivamente... ya que si no se hace así, los códigos se "lían" entre ellos y no funcionan.
Si os apetece usar mis ojitos :-) os dejo la url:
Abrir:
http://img129.imageshack.us/img129/5394/eye1ti5.png
Cerrar:
http://img209.imageshack.us/img209/5336/eyenq1.png

Y esta otra de unas flechitas muy guapas:
Abrir:
http://img75.imageshack.us/img75/7168/fle02ee5.gif
Cerrar:
http://img77.imageshack.us/img77/5382/fle03ys4.gif

[+/-]

Links especiales

[+/-]

Destacar texto en una entrada usando colores

Para cambiarle el color a cualquier letra o palabra, podemos hacerlo fácilmente en el editor de entradas, escribimos el post normalmente y en "redactar" marcamos el trozo de texto a resaltar y pinchamos en el icono de "paleta de colores"

Si lo que pretendemos es destacar un trozo de texto que nos interese poniendole color de fondo, es bastante sencillo.
Hemos de añadir <span style="background-color:orange"> delante de la palabra o frase que deseamos resaltar. En el ejemplo yo he puesto el color naranja (orange) pero podemos poner el que necesitemos en ese momento o nos guste más. Para cerrar la frase a resaltar la terminamos con </span>. Podemos hacerlo incluso en el título de la entrada.

La frase, frases o palabras a resaltar han de ir entre <span style="background-color=orange"> y </span>

Si preferimos resaltar un trozo de texto para que nos quede con efecto de "cajita" usaremos este otro código, ponéis el texto a resaltar entre <div style="margin:0px auto;width:250px;text-align:left;padding:10px;background-color:orange;border:1px solid black;"> y </div>, se vería así:

ANTES DE HACER NINGUNA PRUEBA CON LOS CÓDIGOS, RECUERDA GUARDAR SIEMPRE TU PLANTILLA, NUNCA SE SABE SI ALGO SALDRÁ MAL.

En el código cambiamos el grosor del borde, color del borde, distancia, color de fondo, del texto...a nuestro gusto.

Fácil ¿no os parece?
Otra ópcion sería emplear siempre el mismo color, para conseguirlo empleamos CSS:
Añadimos estas líneas de código en el CSS de nuestra plantilla:
span.highlight
{
background-color:#CC0000
}
Y cada vez que queramos resaltar un texto con un fondo de color, lo ponemos entre <span class="highlight">Texto a resaltar</span>
Si no queremos el fondo, sino solo cambiar el color del texto, en el añadido del CSS, eliminamos background-.
Por supuesto, en #CC0000, sustituimos por el código de color que nos guste más.
Para tenerlo a mano a la hora de editar nuestra entrada, podemos pegarlo en plantilla-opciones-formato-caja de plantilla de entrada.

Espero que te sirva Silvia ;-)

[+/-]

Últimas opiniones

Mas botones ▼

Archivo del blog▼

Etiquetas

Blogs de Ayuda

Destacados

Recomendados

Top comentaristas

Últimas entradas

Estadísticas