0

Menu de etiquetas en vertical

Hace tiempo os hablé de como colocar un menú en forma de pestañas en el blog, pues bien, de la misma manera podemos conseguir añadir un menú de botones en horizontal con nuestras etiquetas para colocar en la sidebar.

Antes de empezar es imprescindible tener etiquetadas nuestras entradas.
Aunque hay varios modelos de menús para aplicar a nuestras etiquetas, para el ejemplo voy a usar el "menu4", más tarde os diré como colocar los otros modelos disponibles.

[1] Nos situamos en la parte de diseño, pestaña "Edición HTML" y sin expandir artilugios localizamos la etiqueta ]]></b:skin> y justo sobre ella pegamos esta porción de código:


#menu4 li{
margin:0;
padding:0 0 .25em 0;
text-indent:0px;
line-height:1.5em;
}


Ahora justo sobre ese trozo de código que acabamos de pegar, colocamos el resto del CSS para el menú:

/*- Menu 4--------------------------- */
#menu4 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}
#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu4.gif);
padding: 8px 0 0 10px;
}
#menu4 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}

[2] Guardamos los cambios y en la parte de Diseño añadimos un nuevo elemento Etiquetas (si ya lo teníamos añadido antes, este paso no hará falta).

[3] Volvemos ahora a "Edición HTML" y expandimos los artilugios, tendremos que localizar el widget de "Etiquetas" que acabamos de añadir.
Si le hemos puesto título (que podremos retirar más tarde) nos será mucho más fácil, en cualquier caso, el código que hemos de localizar será algo como esto:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Tendremos que cambiar todo ese código por este otro:
<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='menu4'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

Ejemplo con Inicio
Modificaciones
Como veis en la imagen de ejemplo, el menú está encabezado por la etiqueta Inicio que nos llevará directamente a la página principal del blog, aunque yo considero que es muy útil, pudiera ser que algunos no quisieran mostrarla en el menú, así que para prescindir de ella borraremos en el último código añadido, esta línea:
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>

Ejemplo sin Inicio
Más modelos de menús
En la página de ejemplo de Hoctro's Place podéis ver el código y los ejemplos en imagen de los distintos menús (14 menús).
Para colocar uno de los que hay allí, solo tenéis que cambiar el código CSS por el del menú que escojáis, sin olvidaros de cambiar "menu4" por "menuX" en el primer trozo de código que se coloca, así como en el último (los he puesto en negrita).

Jorge
, si esto no se adecua exactamente a tus necesidades, en breve publicaré el menu de CSS Menu Maker


Si vas a utilizar las imágenes de esta entrada, subelas antes a tu propio alojamiento. No hagas Hotlinking

0

Esos extraños botones

Son diferentes pero no dejan de ser botones, se generan a partir de un código y las utilidades que se le pueden aplicar son variadas.

CarLost me preguntaba como añadirlo de manera que "apareciera" en el efecto de expandir y contraer las entradas del blog.
Partiendo de su idea le sugerí aplicar el efecto de "Leer más con efecto expandir y recoger" sustituyendo el texto de SIGUE LEYENDO por:


<form>
<input value="Mostrar" name="Back" type="button"/>
</form>


Y CIERRE TEXTO por:


<form>
<input value="Ocultar" name="Back" type="button"/>
</form>









<form>
<input type="button" value="volver atrás" name="volver atrás" onclick="history.back()" />
</form>

0

Imagen con fondo transparente usando GIMP

GIMP Icono

Llevo unos cuantos días "peleándome" con el GIMP.

Ayer por la tarde, gracias a un buen amigo que me iba guiando a través del msn, he conseguido aprender a transformar una imagen con fondo a una imagen sin fondo, o mejor dicho con fondo transparente.
Es la primera vez que hago algo "medio decente" con un programa de diseño, así que he decidido compartirlo con vosotros, ya que estoy segura que alguno sacará provecho de ello...
Según mi amigo me ha dicho, hay otras formas de hacerlo, pero el me lo ha enseñado así, porque dice que es más sencillo.

Antes de empezar doy por hecho que tenéis el GIMP (software libre Y gratuito para la edición de imágenes), si aún no lo tenéis y os apetece probarlo, podéis descargarlo en UPtoDown.

Esta es la imagen que usé para mis pruebas, como podéis ver antes tenía un fondo de color y después su fondo es transparente:

Imagen con fondoImagen sin fondo


Paso [1] Abrimos la imagen con GIMP.

Paso [2] Con la imagen abierta, pinchamos con el botón derecho sobre ella y en el menú que se abre, escogemos "Capa" -> "Transparencia" -> "Añadir canal Alfa" (Si la opción aparece deshabilitada, es seguro que la imagen ya tiene aplicado el canal alfa así que continuamos).

Paso [3] Ahora tenemos que seleccionar las partes de la imagen que queremos que sean transparentes.
Seleccionamos en el menú "Seleccionar" -> "Por color" y vamos haciendo click sobre las partes de la imagen a las que queramos aplicar transparencia, en mi imagen como solo tiene un color de fondo, si hacemos click sobre el se seleccionará todo el fondo. Después de hacer click, en el menú "Editar" seleccionamos "Cortar".
La zona que se va a eliminar, se verá entonces con unos cuadrados grises que la cubren por completo:
Ejemplo transparencia
Si la imagen tiene más de un color de fondo, hay que repetir los pasos anteriores para cada color.

Paso [4] Por último, en "Archivo" -> "Guardar como" guardamos la imagen en un formato que soporte transparencias como GIF o PNG.

Nota:
Acabo de conseguir fusionar la imagen de cabecera que me regaló Fernandooo1 con otra tipo "dibujito infantil", y esta vez lo he conseguido sin ayuda (creo que le voy pillando el "truco" a esto).
La he puesto en la cabecera del blog... a mi me gusta. biggrin


Si vas a utilizar las imágenes de esta entrada, subelas antes a tu propio alojamiento. No hagas Hotlinking

0

Redireccionar una página

Si en algún momento deseamos cambiar de dirección nuestro blog, o sencillamente nos mudamos a otro sitio la solución para hacerlo saber a nuestras visitas es redireccionar nuestra página.Cuando nuestras visitas accedan al blog automáticamente serán guiadas al nuevo espacio.
No hay que confundir redireccionar con migrar, al migrar nos estamos llevando todo el contenido del blog. Mientras que al redireccionar nos lleva a una dirección nueva clicando en la antigua.
Tres ejemplos para redireccionar una página.

Antes de </head>


<script languaje=
'JavaScript'>
location.href='url-de-la-página';
</script>



Entre <Body> y </Body>


<BODY onLoad =
'parent.location = 'ur-de-la-página'>



Para redireccionar a X cantidad de segundos:


<META HTTP-EQUIV=
'Refresh' CONTENT='0;url-de-la-página'>




Fuente: Webexperto



0

Error en la página ¿solo a mi?

Un servicio online muy útil el que nos ofrece EstaCaido.com.

A menudo nos pasa al intentar acceder a una página determinada que nos es imposible, y nos asalta la duda de si la web tendrá algún problema que impida el acceso, o si es nuestro navegador el que está impidiendolo por algún motivo.

Yo suelo contactar con alguien por medio de Hotmail y pedirle que compruebe si el puede acceder o no...

Ahora podemos comprobar en segundos si es nuestro navegador el problema o lo mismo les está pasando a todos...

Solo hay que introducir la url de la web problemática y esperar la respuesta:

EstaCaido Imagen

0

Envejecer fotografías online


Todos o casi todos los editores de imagen tienen la opción para aplicar el efecto de envejecer imágenes. La siguiente página nos proporciona un efecto de envejecimiento propio del siglo XIX, es lo más logrado que he visto hasta ahora.
Es una página en japonés, no he podido traducir el título pero se llama

Es muy sencillo subir las imágenes, no varía de las que estamos acostumbrados a ver, está claro que en Examinar buscamos la fotografía en nuestro PC, luego clicamos en... 古写真風にする y listo. ¿Fácil verdad? si deseamos añadir la url de la imagen en vez de alojarla en la página es obvio que lo haremos en URLをんワ






! Gracias Jejo ¡


0

Anúncie su blog en Gem@ BLOG

Si está pensando en anunciarse aquí debe saber que los enlaces de publicidad contienen la etiqueta "nofollow". No se permite el intercambio ni venta de enlaces, usted está alquilando un espacio para anunciar sus productos y atraer con ello más visitas a su espacio.

NO se acepta publicidad de casinos, pornografía, partidos políticos, webs para captar afiliados etc.

Banner de 125x125
Existe un sistema de banner de 125x125 en la sidebar cuyo precio es de 7€ /mes en caso de contratar 6 meses la permanecía en el sitio será de 7 meses. Si contrata un año la permanecía será 15 meses.
NO se aceptan animaciones y otros efectos.
7 meses - 42€
15 meses - 84€

Iconos de 16x16
El sistema de iconos, más económico y no menos efectivo puede contratarlo por 1€ /mes.
Las imágenes deben ser en formato PNG, JPG o GIF. Tiempo mínimo contratado 6 meses.
6 meses - 6€


Si desea que su publicidad ocupe un lugar privilegiado puede optar por contratar el espacio encabezando los post. El tamaño de la publicidad no debe ser mayor de 580 x 60
NO se aceptan animaciones y otros efectos.
El precio de este espacio publicitario es de 300€ /mes si tiene alguna otra oferta podemos hablarlo.


Para anunciarse envíe su petición a forevergema(arroba)gmail.com y será contestada antes de 24 horas. En asunto añada "Contratar Publicidad"

- Algunos de estos espacios pueden estar ocupados por anunciantes, puede enviar un correo para solicitar información o disponibilidad del mismo.


0

Contenidos por categorias

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
En Hoctro's Place nos proporcionan una manera distinta de mostrar las categorías en nuestra sidebar. Se trata de ver el título de nuestras etiquetas y debajo de cada título una relación de los títulos de las entradas asociadas con esa etiqueta concreta, con la opción de mostrar solo aquellas categorías o etiquetas que nos interesen.

[1] Tendremos que ir a la parte del HTML de nuestra plantilla y expandir los artilugios.

[2] Buscaremos el cierre de cualquier widget o elemento que es este: </widget>, (dará igual donde aparezca luego el nuevo elemento, ya que más tarde podremos arrastrarlo a donde nos interese) y justo a continuación, pegaremos este código:
<b:widget id='HTML50' locked='false' title='Contenidos por categorias' type='HTML'>
<b:includable id='main'>
<!-- <b:if cond='data:blog.pageType == "item"'> -->
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='data2006'/>
<script type='text/javascript'>

var homeUrl2 = "tublog.blogspot.com";
var labels = ["categoria","categoria2","categoria3","categoria4"];

// Given a json label search, this function return the decoded label.
function getLabelFromURL(json) {
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
// The next two lines are borrowed from Ramani's Neo Template
// code. Thanks Ramani!
var label = raw.substr(raw.lastIndexOf('/')+1);
return decodeURIComponent(label);
}
}
}

function listEntries2(json) {
var ul = document.createElement('ul');

for (var i = 0; i &lt; json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}

for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl2.length+21);

var label = getLabelFromURL(json);
var txt = document.createTextNode(label);
var h = document.createElement('h4');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2006').appendChild(div1);
}
}
}

function search2(query, label) {

var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + encodeURIComponent(label) +
'?alt=json-in-script&amp;callback=listEntries2');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

for (var i=0; i &lt; labels.length; i++)
if (labels[i])search2(homeUrl2, labels[i]);
</script>
</div>

<b:include name='quickedit'/>
<!-- </b:if> -->
</b:includable>
</b:widget>

[3] Cambiamos ahora un par de cosas en el código:
var homeUrl2 = "tublog.blogspot.com";
var labels = ["categoria","categoria2","categoria3","categoria4"];

En var homeUrl2 colocamos la dirección (url) de nuestro blog sin el http:// y en var labels añadiremos el nombre de las categorías que vamos a mostrar, entre comillas y separadas por comas.
Tendremos en cuenta en este punto, que el widget no trabajará con etiquetas formadas por más de tres palabras y también presenta problemas con los acentos y las "eñes".

Ejemplo de contenidos por categorias

0

Ranking en Technorati

Hace algún tiempo había explicado como poner un enlace en las entradas donde se mostraban las reacciones a cada post vía Technorati.
Yo misma lo use durante bastante tiempo, hasta que comprobé que algunas veces producía problemas de carga en el blog y decidí retirarlo.

Ahora he decidido incluir en la sidebar un pequeño widget de PurpleMoggi que muestra mi ranking en Technorati.

Antes de nada, hay que estar registrado en Technorati para poder usar el widget.

[1] Para incluirlo en vuestro blog, solo es necesario copiar y pegar este script en un nuevo elemento HTML, cambiando donde dice NOMBRE_DE_TU_BLOG por el vuestro (solo el nombre, sin http://):

<script src="http://purplemoggy.clawsorpaws.com/technorati/rank.php?u=NOMBRE_DE_TU_BLOG.blogspot.com" type="text/javascript"/></script>

[2] Si queréis darle un aspecto más "tipo Technorati" como el mío, es decir, color del texto en verde y el icono de Technorati delante, tendréis que añadir estas líneas de código CSS antes de ]]></b:skin>:
div.tec_name {
display:none;
}
div.tec_rank {
background: url(http://static.technorati.com/static/css/img/icn/talkbubble.png) 0 2px no-repeat;
padding-left:16px;
}
div.tec_rank a:link, div.tec_rank a:visited {
color: #390;
text-decoration:none;
}
div.tec_rank a:hover {
border-bottom:1px dashed #390;}

Ejemplo link

0

Redireccionar dentro de un post (Anclajes)

Escribir varios textos independientes en una entrada puede hacerse monótono y con ello estamos brindando a los visitantes la posibilidad de abandonar el blog sin encontrar lo que buscan.
Pablo de Todo Macross VOXP me contaba que tiene un post demasiado largo, y la necesidad de acortarlo pero sin omitir contenido.

Enseguida pensé en el efecto mostrar-ocultar, pero Pablo tenía otra idea.

Llevada a la práctica es la siguiente:
Vamos a crear al principio del post unos enlaces tipo texto, cada enlace (sin salir de ese post) nos lleva al texto completo relacionado con el enlace, de forma que los visitantes podrán elegir el texto que desean leer clicando en el enlace sin necesidad de buscar en la totalidad del post.

Para el ejemplo añadí unas frases extraídas de mi blog.


Filosofando
Una de cambios
Primer año
En breves líneas
Nuevo rincón de amigos
Un paseo de mi mano






Filosofando...


Diciembre, mes de los buenos deseos, nuevos proyectos y programación de un nuevo futuro. Un mes capaz de reunir a familias, de recordar amistades, de pensar más de la cuenta en los errores pasados. Y si ya son pasados ¿para qué pensar?
Un mes acelerado, preparativos y compras, cenas de empresa y regalos…¿por qué regalos? ¡Ah! si... por aquello de la tradición.
Quizás estoy divagando, nunca me ha gustado la navidad en mi infancia era una fecha especial, muy especial... la más especial del año. Era especial porque ellos hacían especial cualquier fecha. Y la hacían especial para mí, sin saber que yo era feliz con ellos pasando de celebraciones...





Una de cambios


Reinventándose ese el título que debería tener esta entrada, he decidido cambiar un poco el aspecto del blog sin modificar la plantilla (darle un lavado de cara) un poco de color aquí y allá. Aún no he terminado, no he tenido tiempo, si veis cosas raras no las tengáis en cuenta ...





Primer año...


Hoy hace un año que escribí el primer post y he sentido necesidad de decirlo.
Mantener un blog requiere constancia y tiempo, pienso que para quien es su medio de vida no debe resultarle tan gratificante como para los que hacemos del blog un medio de diversión o pasatiempo ¿He dicho algo extraño?
Cada caso es un mundo y cada persona también, me gusta lo que hago, disfruto con ello, habrá quien no lo entienda pero no es algo que me preocupe.





En breves líneas...


El desconcierto que todos teníamos cuando Blogger beta se impuso va dejando paso a una especie de satisfacción colectiva, ya nos vamos familiarizando con beta que ya no es beta, y etiquetar nuestras entradas o aplicar un código es algo cotidiano.
Es increíble la cantidad de personas que aportan su granito de arena intentando dar un poco de luz a los que reclaman ayuda.
También es cierto que podemos encontrar diferentes explicaciones para un mismo problema.





Nuevo rincón de amigos


Cuando comencé con este blog lo hice con una mínima idea de código HTML, con unos pocos conocimientos sobre la materia adquiridos en el foro de daleclik sigo allí intentando ayudar, la creación de este blog era para dar una explicación mas detallada, un paso a paso con imágenes para aquellos que en el foro requerían ayuda.
Poco a poco la idea fue como decimos en mi tierra cuajando, adquiriendo forma, posteaba sobre temas que a mi me gustan, sobre trucos o maneras de aplicar un código, hoy Blogger lo facilita todo, antes había que moverse más por la plantilla, sinceramente a mi me gustaba más danzar entre códigos que ahora.





Un paseo de mi mano


He descubierto HTML, he descubierto que los códigos me fascinan y crean en mí una forma de evasión como leer o nadar para muchos de vosotros.
Escoger la plantilla Minima de Douglas Bowman no es otra cosa que la amplitud de espacio para los post, así que repito diseño, repito códigos, y añado otros que voy aprendiendo.






Hasta ahí todo bien, ahora sólo falta llevarlo a la práctica, este es el código para hacerlo:


<CENTER><P>
<A HREF = "#FAQ1">Título1</A>
<A HREF = "#FAQ2">Título2</A>
<A HREF = "#FAQ3">Título3</A>
<A HREF = "#FAQ4">Título4</A>
</CENTER>
<p>
<HR>
<p>
<A NAME = "FAQ1"><U>Título1</U></A>
<p>
Texto a mostrar clicando en Título1
<p>
<HR>
<p>
<A NAME = "FAQ2"><U>Título2</U></A>
<p>
Texto a mostrar clicando en Título2
<p>
<HR>
<p>
<A NAME = "FAQ3"><U>Título3</U></A>
<p>
Texto a mostrar clicando en Título3
<p>
<HR>
<p>
<A NAME = "FAQ4"><U>Título4</U></A>
<p>
Texto a mostrar clicando en Título4
<p>
<HR>
<p>


Cada vez que añadimos <p> estamos añadiendo un salto de línea, quiere decir esto que si no deseamos separación podemos suprimirlo.

Con <HR> estamos añadiendo una línea, también podemos prescindir de ella suprimiéndolo.



0

Mensaje de despedida

Hace tiempo vimos como añadir un texto de bienvenida en el blog. El script que viene a continuación muestra un mensaje de despedida, lo podemos añadir como un elemento de página en HTML/Javascript.


<script type="text/javascript">
window.onunload=function(){window.alert('Texto de despedida')}
</script>



Suerte Daniel ;)

0

Tres opciones muy utiles de configuracion de comentarios

Es algo bastante básico, pero no por eso deja de ser desconocido para los que están empezando a utilizar Blogger.

[1] Incluir un mensaje en el formulario de comentarios.

Es tan sencillo como ingresar a nuestro panel de Blogger, ir a "Configuración" y pinchar en la pestaña de "Comentarios", allí veremos una casilla con un texto delante que dice "Mensaje del formulario de comentarios".
En esta casilla es donde añadiremos el texto que queremos mostrar en nuestro formulario y que será visible para todo aquel que vaya a dejar un comentario en nuestro blog.

Formulario con mensaje
[2] Recibir notificación de comentarios por email.

Sin salir de esa misma página de nuestro panel, un poco más abajo de la casilla de la que acabo de hablaros, hay una opción también muy útil: Correo electrónico de notificación de comentarios.
Si colocamos ahí nuestra dirección de correo, cada vez que alguien deje un comentario en el blog, nos llegará un email a la dirección de correo que hemos indicado, lo que nos ahorrará mucho tiempo a la hora de localizar cualquier comentario, es más, se puede acceder a la entrada y por tanto al comentario, a través de un enlace desde el mismo email.

Correo de comentarios
[3] Usar verificación de palabra en los comentarios.

Esta opción se activa al igual que las anteriores, en "Configuración", pestaña de "Comentarios".
Esto llega a ser bastante molesto para algunos usuarios, pero no deja de ser una medida muy útil para prevenir el spam.
El autor del blog no verá la palabra y por tanto, podrá comentar sin tener que validar su comentario, solo será visible para los demás usuarios.
Ultimamente he visto en varios blogs e incluso me lo han comentado algunas personas, que están proliferando en Blogger los comentarios spam, incluso con enlaces que llevan a páginas con spyware, en estos casos si que sería recomendable activar la opción de verificación de palabra, al menos durante un tiempo prudencial, ya que ese tipo de mensajes suele ser dejado por robots de forma automática y cuando comprueben que no van a poder comentar en el blog, lo normal es que eliminen la url afectada de su base de datos.

Palabra ant-spam

Si vas a utilizar las imágenes de esta entrada, subelas antes a tu propio alojamiento. No hagas Hotlinking.

0

Pie de foto o leyenda

El editor de Blogger nos provee de unas casillas para justificar texto o imágenes, sin embargo no siempre resulta bien, es entonces cuando hacemos uso del html.
me preguntaba la forma de añadir un pie de foto o leyenda utilizando html, esta es la respuesta:

Mi imagen

<div align="center"><img src="Url-de-tu-imagen" /></div><div align="center">Tu imagen</div>


Mi imagen

<div align="left"><img src="Url-de-tu-imagen" /></div><div align="left">Tu imagen</div>


Mi imagen

<div align="right"><img src="Url-de-tu-imagen" /></div><div align="right">Tu- imagen</div>




Podemos agregar todo el texto que deseamos, irá ocupando la parte derecha de la imagen hasta completar.

"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac elit. Cras tellus leo, sollicitudin a, sagittis eu, vulputate quis"



<p>
<img src="url-de-tu-imagen" align="left">Aquí el texto...
</p>




Podemos agregar todo el texto que deseamos, irá ocupando la parte izquierda de la imagen hasta completar.

"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac elit. Cras tellus leo, sollicitudin a, sagittis eu, vulputate quis"


<p>
<img src="Url-de-tu-imagen" align="right">Aquí el texto...
</p>

0

Efecto rollover en enlacesde texto.

Me preguntaba Kozmica la forma de añadir el efecto rollover a un Link, me proporcionaba una página de referencia y mirando y probando creo que el efecto está conseguido, así que veamos lo que hice:

Añadimos un elemento de página y en HTML/Javascript añadimos lo siguiente:


<a class="sidebarlink" href="url-de-la-pagina">texto-link</a><span class="hide"></span>
<a class="sidebarlink" href="url-de-la-pagina">texto-link</a><span class="hide"></span>
<a class="sidebarlink" href="url-de-la-pagina">texto-link</a><span class="hide"></span>


Luego vamos a añadir unas líneas de código en la CSS, buscaremos donde
/* Sidebar Content, en algunas plantillas puede venir como /* ---( sidebar )--- */

Añadimos lo siguiente:

.sidebarlink{
text-align:left;
display:block;
background:#ffffff;
border-bottom:1px solid #000000;
padding:0px 5px 0px 5px;
margin:1px 0px 0px 0;
}

.sidebarlink:hover{
border-bottom:1px solid #000000;
background:#ccc;
}

En .sidebarlink{ es el link tal y como lo vemos.
En .sidebarlink:hover{ conseguimos el efecto rollover al pasar el cursor por encima.

Si añadimos a esas dos partes por ejemplo border-bottom:1px solid #000000; conseguimos una línea de separación entre las líneas de enlaces.

También podemos sustituir en background:#ccc; para el color de fondo del efecto rollover. Y en background:#ffffff; que será el color de fondo sin efecto.

El texto también podemos centrar el texto si sustituimos text-align:left; por text-align:center; o justificar a la derecha con text-align:right;

Podéis ver el efecto en "Enlaces" en esta prueba que hice.

!Suerte¡


0

Ecoologer

Ecoologer¿Que es Ecoogler?
Ecoogler es un buscador que utiliza la tecnología de Yahoo y que ayuda a reforestar el amazonas y a preservar los recursos naturales de agua dulce.

Usando Ecoogler se obtienen los mismos resultados, y se ayuda a la asociación benéfica Aquaverde (ONG) fundada en Ginebra, Suiza, en el año 2002.

Esto es posible gracias a un acuerdo con Yahoo y Aquaverde.

¿Como funciona?
Cada búsqueda realizada en Ecoogler, contribuye simbólicamente a reforestar una hoja. Por cada 10.000 búsquedas/hojas, Ecoogler dona el dinero necesario para que se plante un árbol en el Amazonas.

Colabora Ecoologer
¿Como colaborar?
Para apoyar esta iniciativa, podemos colocar un botón o una cinta en nuestro blog en su página web:

Apoya Ecoogler.com el buscador ecológico

Si vas a utilizar las imágenes de esta entrada, subelas antes a tu propio alojamiento. No hagas Hotlinking.

0

Twitter en el blog

Estoy segura que muchos de vosotros ya sabéis que es y como funciona Twitter.
Para los que aún no sepan muy bien de que va esto, estoy segura de que este completo artículo de Antonio Cambronero para Libro de Notas, les sacará de dudas.

Uno de los servicios que Twitter proporciona es un widget para colocar en nuestro blog y así mantener al tanto a nuestros lectores, en forma de anotaciones, de aquello que nos interese.

[1] En primer lugar tendremos que registrarnos en Twitter, lo que nos llevará solo un momento y enseguida podremos empezar a publicar nuestro mensaje.

[2] Una vez publicado ya podemos obtener el widget para colocarlo en nuestro blog, a la derecha veremos nuestro perfil y nuestro mensaje debajo, justo ahí hay un enlace que dice "Put your updates on your site!", pinchamos en el enlace y después en el botón de "Blogger"

Twitter perfil
[3] Se abrirá una nueva ventana desde la que podremos escoger un par de opciones (Número de mensajes y título), instalar el widget directamente al blog u obtener el código para copiar y pegar.

Twitter-Blogger
[4] Una vez colocado en el blog, podemos hacerle algunos cambios usando CSS e incluso dentro del mismo código HTML del widget.

Por ejemplo, para ocultar el enlace que se muestra al pie del widget y que dice "follow me on Twitter", en el mismo código del widget cambiamos display:block; por display:none;:

<a id="twitter-link" style="display:none;text-align:right;" href="http://twitter.com/RosaTorre">follow me on Twitter</a>


Añadiendo unas líneas de CSS en la plantilla, siempre antes de ]]></b:skin> podremos conseguir añadir una imagen al widget o incluso ponerle borde e imagen o color de fondo.
Podéis ver como ha quedado el mío en la sidebar.

Os dejo el código CSS que he empleado para que lo uséis de referencia:
#twitter_div{
border:1px solid #a6c4e1;
background:#ffc url('URL_DE_LA_IMAGEN_DE_FONDO');
padding:2px;
}
#twitter_div ul {
background: url(URL_DE_LA_IMAGEN_DE_COMIENZO_DE_MENSAJE) top left no-repeat;
padding-left: 16px;
}


Nota:
Si el enlace para incluir el widget en el blog no apareciera en vuestro perfil, ingresáis a Twitter Badges.

0

Blogurbania precisa bloggers



Blogurbania es una empresa dedicada a la creación, gestión y diseño de blogs temáticos. La noticia que ilustra su portada es interesante y la propuesta que hacen también. Están buscando bloggers para trabajar en su equipo y aceptan cualquier sugerencia sobre la creación de nuevos blogs.
Como requisitos piden saber el criterio y manejo de los blogs (a nivel general) y tener un dominio adecuado (de preferencia elevado) de los temas que se tratan en los blogs donde se aplicará, (indispensable tener buena ortografía)

Si deseas más información sobre este tema Miguel L. Romero informa con todo detalle.

Fuente: SpamLoco

0

Ojo con las postales

Ya son dos los correos que he recibido cuyo remitente es loginlivemsn@lycos.es y se hace llamar "TuParada.com"
Como muchos sabréis TuParada.com es un portal para enviar postales y regalos. Por mediación de un email notifican que "alguien" nos envía una postal, como asunto suelen añadir cualquier cosa, casi siempre es una frase tipo reclamo "Te Han Enviado Una Postal De Amor!" y digo yo... que bien ¿no? no es que no me hagan ilusión las postales pero una ya desconfía de los remitentes y enamorados fantasma. Repaso de arriba abajo el email.



Ha simple vista no es nada extraño, nos proporciona un enlace para ver la postal y más abajo nos indica que si no podemos verla (no lo intenté) copiemos un código que nos proporciona e ingresemos a otro enlace que también proporciona para pegar ese código."Luego haz click en el botón de "Enviar" continúa diciendo.

Termina con unas frases muy acertadas y cordiales de despedida invitando a asociarse al Club Premium de TuParada.com

Quería averiguar de que trataba, no por recoger ninguna postal que estaba segura no existía, ¿cómo veo de qué trata sin correr riesgo?
Así que pensé que si era necesario pegar el código y aceptar ahí debía estar por decirlo de alguna forma el "gancho" tenía muy claro que no aceptaría así que cliqué en el enlace que indicaban y me encontré lo siguiente:



La url que aparece en el navegador es la que sigue:

http://usuarios.lycos.es/loginlivemsn/HoTMaiL/fti-yes/curmbox_/
F000001a50dab5e1f76b88afd3a4d6_lang/hotmail/4/iniciosecion.php?
mail=forevergema@gmail.com&sender=osos_invernando@hotmail.com

(Todo seguido claro)

Está a la vista que se trata de un email falso, un intento de conseguir la contraseña de mi correo. Si alguien es capaz de eso tiene muy poca imaginación o carece de ella ¿no se da cuenta que mi correo es de Gmail y la imagen es de Hotmail? sin querer quizás le estoy dando una idea de hacerlo más real y creíble. Mi intención no es otra que alertaros, avisaros que no os dejéis llevar por estos engaños, quien desee enviaros una postal ya lo hará identificándose.

Quiero aclarar que no creo que el portal de TuParada.com tenga nada que ver con esto, si acaso están utilizando su nombre cosa que también me parece inaceptable.

!Cuidado con los enlaces desconocidos y no me cansaré de decirlo ... la contraseña ni en sueños.



0

CSSplay (Menu numero 4)

A petición de Pizca paso a explicaros como colocar el menú "Professional #4" de CSSplay.

Ejemplo menu4
[1] Colocamos el CSS necesario antes de la etiqueta ]]></b:skin> de nuestra plantilla:

/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_four */
.preload4 {background: url(http://img361.imageshack.us/img361/9697/profour1bu6.gif);}
.menu4 {padding:0 0 0 1em; margin:0; list-style:none; height:35px; background:url(http://img132.imageshack.us/img132/53/profour0tc2.gif);}
.menu4 li {float:left;}
.menu4 li a {display:block; float:left; height:35px; line-height:33px; color:#aaa; text-decoration:none; font-family:arial, verdana, sans-serif; text-align:center; padding:0 0 0 14px; cursor:pointer; font-size:11px;}
.menu4 li a b {float:left; display:block; padding:0 28px 0 14px; color:#aaa;}
.menu4 li.current a {color:#fff; background:url(http://img132.imageshack.us/img132/7898/profour2rq7.gif);}
.menu4 li.current a b {background:url(http://img132.imageshack.us/img132/7898/profour2rq7.gif) no-repeat right top; color:#fff;}
.menu4 li a:hover {color:#fff; background: url(http://img361.imageshack.us/img361/9697/profour1bu6.gif);}
.menu4 li a:hover b {background:url(http://img361.imageshack.us/img361/9697/profour1bu6.gif) no-repeat right top; color:#fff;}
.menu4 li.current a:hover {color:#fff; background: url(
http://img132.imageshack.us/img132/7898/profour2rq7.gif); cursor:default;}
.menu4 li.current a:hover b {background:url(
http://img132.imageshack.us/img132/7898/profour2rq7.gif) no-repeat right top; color:#fff;}


El código ya está armado con las imágenes necesarias incluidas, las he subido a ImageShak.

[2] El siguiente paso será colocar el código del menú en un nuevo elemento HTML y arrastrar el elemento a debajo del header, una vez añadidos nuestros enlaces:
<ul class="menu4">
<li><a href="URL_DEL_BLOG"><b>Inicio</b></a></li>
<li><a href="URL_PAG_DEL_PERFIL"><b>Sobre mi</b></a></li>
<li><a href="URL_DEL_FEED"><b>Suscribe</b></a></li>
<li><a href="http://blogger.com"><b>Blogger</b></a></li>
<li class="current"><a href="mailto:AQUI_DIRECCION_DE_CORREO"><b>Contacto</b></a></li>
<li><a href="URL_DEL_BLOG"><b>Mi otro blog</b></a></li>
</ul>

He armado los enlaces de ejemplo lo más claramente que he podido, no será demasiado difícil entender como sustituirlos por los vuestros

Nota:
A menudo al intentar arrastrar el elemento debajo de la cabecera, vemos que ahí no hay espacio para más elementos. Para solucionarlo tenemos que localizar esta línea en nuestra plantilla sin expandir artilugios:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Y modificar algunos valores para que se vea como esta:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

¡Suerte Pizca!

0

eBlog Templates





Quién pensaría hace un año la cantidad de plantillas que tenemos para escoger, imaginaba que irían apareciendo pero la realidad supera la imaginación.
En eBlog Templates tienen un surtido de 142 plantillas para Blogger todas listas para descargar, algunas conocidas y otras no tanto.
Si no deseas cambiar de plantilla quizás encuentres alguna idea para añadir a la que ya tienes.

Gracias por la información Jose secas


0

Genera tu imagen de enlace en minutos.

Linkeame
Hace tiempo mencionaba la forma de conseguir un botón o imagen de enlace para nuestro blog, aunque no era difícil de entender la forma de lograrlo, la web estaba en portugués y eso complicaba algo las cosas...

En El Mimi Taller podéis crear vuestro propio botón para que otros os enlacen y lo mejor del sistema, además de sencillo y efectivo, es que está en español.

Ahora ya solo necesitáis una imagen adecuada y ¡a por el botón de enlace!


Crea tu imagen de enlace.


Si vas a utilizar las imágenes de esta entrada, subelas antes a tu propio alojamiento. No hagas Hotlinking.

0

Entradas mas populares en español

He conseguido modificar el widget de "entradas mas populares" del que os hablaba hace un par de días, de manera que muestre al lado de cada título de entrada, el número de comentarios con esta palabra en español, es decir, ya no dirá "comments" sino "comentarios".

Mas comentados en españolLo he hecho modificando la Yahoo Pipe que Amanda usa para que el widget funcione.
No he podido lograr que el tipo de texto que muestra el widget, acepte más cambios que uppercase (la primera letra de cada palabra en mayúscula) y capitalice (los títulos en mayúsculas), es decir que en el script una vez instalado, donde dice text-transform: capitalize; podemos poner text-transform:uppercase para ver los títulos en mayúsculas.

Para cambiar el número de entradas a mostrar, cambiaremos dentro del código una vez colocado en el elemento, donde dice &num=5 por el número de entradas que queremos ver en el widget.


Para instalar el widget, simplemente tenéis que copiar y pegar en un nuevo elemento HTML el código del script y cambiar después donde dice elescaparatederosa por el nombre de vuestro blog (el que aparece en la url del navegador).
Hay que tener cuidado al hacerlo de no borrar o cambiar nada más.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback& _id=e1f5a9b2248904d8b81f794c09353010&url=http%3A%2F%2Felescaparatederosa.blogspot.com&num=5" type="text/javascript"></script>
<span style="font-size: 80%">Widget by <a href="http://www.bloggerbuster.com">Blogger Buster </a></span>

Nota:
En el código del widget he incluido los créditos a Blogger Buster, para retirarlos si así lo queréis, solo tenéis que borrar las últimas líneas del código:
<span style="font-size: 80%">Widget by <a href="http://www.bloggerbuster.com">Blogger Buster </a></span>

Y otra cosa, si al colocarlo tarda un poco en cargar tened paciencia, he comprobado que la primera vez se demora un poco, aunque pudiera ser debido a que esta tarde Yahoo Pipes tenía algunos problemillas en su web...

Si vas a utilizar las imágenes de esta entrada, subelas antes a tu propio alojamiento. No hagas Hotlinking.

0

Como tener un Fotolog en Blogger (Plantilla)

Alejandro de SpamLoco ha modificado una plantilla existente para Blogger que simula el diseño clásico de los Fotologs:

Los fotologs o flogs son un tipo de red social donde los usuarios pueden subir imágenes, describirlas y recibir comentarios o firmas. La mayoría son creados por jóvenes aunque es un fenómeno que abarca todas las edades e incluso muchas personas los utilizan para promocionar sus productos y servicios. Además de ser muy sencillos de utilizar, ofrecen una buena interacción entre los usuarios favoreciendo la comunicación, generalmente en el centro de la página se muestran fotografías y en las columnas laterales accesos directos a los fotologs de amigos y personas que viven en la misma ciudad o país.

Templates2
Además de hacer un magnifico trabajo, pone a libre disposición las plantillas para su descarga en dos colores, negro (mi favorita) y rojo.

Están genial para crear un nuevo blog y usarlo como álbum de fotos colocando un enlace o incluyéndolo en el menú de nuestro blog principal.

Para descargar las plantillas y recibir información adicional sobre ellas, visitad SpamLoco.


Si vas a utilizar las imágenes de esta entrada, subelas antes a tu propio alojamiento. No hagas Hotlinking.

0

Imagen flotante aleatoria



En Prosopopeya Divagante vi el otro día una imagen flotante con efecto aleatorio, cambia la imagen cada vez que actualizamos la página. Podéis verlo accediendo al blog de NeNe_WeNo y pulsando f5 para actualizar la página.

Las imágenes las ha creado el autor del blog, pero también podemos hacerlo con otras imágenes añadiéndoles un bocadillo o simplemente con un texto de bienvenida. Esta otra idea tampoco está nada mal, todo es cuestión de probar.

El código para añadir las imágenes flotantes lo podemos añadir en edición HTML justo antes de </body> y es el siguiente:


<script language='JavaScript'>
imagenes = new Array(9)

imagenes[0] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[1] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[2] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[3] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[4] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[5] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[6] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[7] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[8] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"

aleatorio = Math.random() * (imagenes.length)
aleatorio = Math.floor(aleatorio)
document.write(imagenes[aleatorio])

</script>



En negrita es la url de las imágenes que podemos sustituir por las nuestras.
Si deseamos añadir menos imágenes bastará con suprimir alguna línea de código ejemplo :

imagenes[8] = "<img border='0' src='http://i41.servimg.com/u/f41/12/11/79/42/dudo10.png' style='position:fixed; bottom:0; right:0;'/>"

En el caso de aumentar bastará con aumentar otra línea como imagenes[9] y donde imagenes = new Array(9) cambiaremos 9 por 10, (o por el número de líneas añadidas)


0

Entradas mas populares

Amanda de Blogger Buster llevaba unos días anunciando que estaba probando un nuevo widget para Blogger que mostraría las 10 entradas más populares.
El widget recogerá las entradas con un mayor número de comentarios y mostrará el título de estas seguido del número de comentarios que tenga cada entrada, por orden descendente (de más comentadas a menos).
Amanda ha creado el widget usando Yahoo Pipes, tomando como referencia los últimos 5000 comentarios que se han hecho en el blog, incluidos los del administrador del blog.
El widget es muy sencillo de instalar, solo tenemos que acceder a Blogger Buster para hacerlo automáticamente desde allí, añadiendo únicamente el título del widget y la url de nuestro blog sin el http:// y pinchando después en "Customize" -> "Add to Blog":

Widget
El widget mostrará un pequeño enlace a Blogger Buster, que puede ser retirado con facilidad, pero que no estaría mal dejar a la vista para reconocer así el trabajo que Amanda se ha tomado...

Posts popularesNota:
Como ya he dicho el widget una vez instalado mostrará las 10 entradas más populares, para mostrar menos, por ejemplo 5, editamos el nuevo elemento y dentro del código donde vemos com&num=10 cambiamos 10 por 5.
El widget original de Amanda mostrará el texto en letra mayúscula, para evitar eso dentro del código del widget veremos esto: text-transform: uppercase cambiamos uppercase por capitalize, esto hace que la primera letra de cada palabra se vea en mayúscula, de momento es el único cambio en cuanto a texto, que permite el script.