ESTILO PULLQUOTE CITA EN ENTRADA

Los pulluotes son muy útiles en las entradas de un blog ya que de esta forma hacemos menos monótona la lectura de los artículos, son utilizados para realizar anotaciones o bien para resaltar una parte del artículo.

Insertarlo en el blog es muy simple y tan solo tendréis que seguir las siguientes indicaciones:

Yo aconsejaría en primer lugar escribir el artículo y después seleccionar la parte del texto que que deseamos que aparezca como pullquote.
Lo primero a tener en cuenta es que el artículo se dividirá en 2 partes principales una que será el texto normal y otra que será el texto del pullquote, teniendo eso en cuenta procederemos de la siguiente forma.

En creación de entradas seleccionar Edición de HTML, aquí insertaremos el siguiente código:

<div style="float:right;height:6em;width:150px;margin-top:10px;margin-bottom:10px;margin-left:10px;line-height:18px;text-align: right;">
<span >AQUI EL TEXTO DEL PULLQUOTE</span>
</div><p style="text-align: justify;">
AQUI EL TEXTO DE LA ENTRADA</p>
<div style="clear:both;"></div>



Sustituiremos AQUI EL TEXTO DEL PULLQUOTE y AQUI EL TEXTO DEL ARTICULO por nuestros textos.
También podéis hacerlo desde redactar una vez insertado el código y modificar allí los textos, quizás sea mas claro y allí ya si que podréis modificar colores o cualquier otra cosa.

El resultado será algo como lo siguiente.

Podemos observar así como quedaría el estilo PULLQUOTE.

Google va a subir todos los libros del mundo a internet.
Google lo está haciendo otra vez. Ahora quiere revolucionar el mundo editorial. Esta semana lanzó una innovadora campaña en el mundo (en la prensa de papel, revistas, semanarios). Y está dirigida a los miles de autores de libros que está digitalizando. En total, la compañía destinará 6,3 millones de euros a informar al universo de que va a proseguir escaneando libros.

CREAR POST- IT

Crear post-it puede ser muy útil en nuestro blog, los podemos utilizar bien para dejar notas o bien para avisar a los lectores de una forma original. Son muchos los blogs en los que los he visto por lo general incrustados en la sidebar y buscando como crearlos de una forma sencilla encontré la siguiente web.

Una vez en la web lo único que tendréis que hacer es seleccionar el tipo de papel y color del texto, luego presionar Create y listo, observaréis el resultado si os gusta podéis descargar la imagen en vuestro ordenador con Save to your computer o bien alojarla en un servidor de imagenes presionando Save to Image Shack, en el caso de haber elegido esta opción se os redijirá a la web de Image Shack donde podréis compiar el enlace para insertarlo en vuestro blog.

El resultado será algo como lo siguiente:

MENU VERTICAL

Os voy a mostrar una forma muy simple de crear un menú en forma vertical
El aspecto será el siguiente:

TITULO1
TITULO2

Pasos para crear vuestro menú:

Primer paso:(Ubicación del código)

Ir a Diseño->Edición de HTML y buscar en la parte del código ]]></b:skin>
justamente encima pegaremos el siguiente código:


#Greydrop a, #Greydrop a:visited {
text-align:center;
position:relative;
text-decoration:none;
display:block;
background:transparent url(http://i88.servimg.com/u/f88/12/78/97/76/grey_110.gif) repeat-x scroll 0 0;
color:#ffffff;
font-weight: bold;
width:10em;
font-family:'Trebuchet MS',Trebuchet,Helvetica,Arial,Verdana,Sans-Serif;
border:2px solid #fff;
border-color: #cccccc #7d7d7d #7d7d7d #cccccc;
padding:0.25em;
margin:0.5em auto;
}
#Greydrop a:hover {
top:1px;
border-color: #cccccc #7d7d7d #7d7d7d #cccccc;
font-family:'Trebuchet MS',Trebuchet,Helvetica,Arial,Verdana,Sans-Serif;
Font-weight: bold;
color:#ffffff;
background:transparent url(http://i88.servimg.com/u/f88/12/78/97/76/grey_210.png) repeat-x scroll 0 0;
}


Guardaremos los cambios y listo, ya tenemos lo necesario para crear nuestro menú.

Segundo Paso:(Crear el menú)

Lo normal será insertarlo en la sidebar de nuestro blog, para ello crearemos un gadget de tipo HTML/Javascript y allí pegaremos el siguiente código.




<div id="Greydrop">
<a href="URL DEL ENLACE 1">TITULO1</a>
<a href="URL DEL ENLACE 2">TITULO2</a>
</div>


Sustituir URL DEL ENLACE por la dirección hacia donde queráis ir al hacer click y TITULO por el título que se mostrará en el menú, podréis añadir tantos títulos como queráis tan solo tendréis que añadir al código tantas lineas de código como enlaces queráis.

MARQUESINA ZIG ZAG

La marquesina que mostraré a continuación no es mas que una combinación de los atributos comentados en Marquesina, en este caso la marquesina simulará un zig zag, podréis crearlas con texto o imagenes.

El código a insertar es el siguiente:

Para imagenes:

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">
<img src="URL DE LA IMAGEN"/></marquee></marquee>


Para texto:

Sustituir la siguiente linea por el texto.

<img src="URL DE LA IMAGEN"/>

Ejemplo de texto

tarot

TEXTO QUE PARPADEA

Hacer parpadear un texto es muy sencillo, lo podremos utilizar para resaltar alguna frase o texto de alguna de nuestras entradas, el efecto es bastante llamativo y lo haremos de la siguiente forma:

En la parte de Edición de HTML de nuestra entrada agregaremos el siguiente fragmento de código que tan solo se corresponde con la etiqueta <blink> de la siguiente forma:

<blink>TEXTO QUE PARPADEA</blink>


Como podemos observar es muy sencillo y obtendremos el siguiente resultado:

TEXTO QUE PARPADEA

TEXTO QUE PARPADEA

Tarot

GENERADOR DE TEXTO ANIMADO

Podréis crear unos textos muy divertidos desde esta web muchografico, además de textos permite crear gifs animados, banners, rótulos, reflejos, y muchos otros efectos. La forma de crearlos es muy sencilla, tan solo tendréis que seleccionar el modelo que más os guste, introducir el texto y hacer click en Generar Texto animado, copiaremos el código generado y lo pegaremos en nuestro blog en el lugar que deseemos, obtendremos resultados como los siguientes.

<script type="text/javascript"><!--
google_ad_client = "pub-4676951680551121";
/* Largo */
google_ad_slot = "0554537531";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

ENTRADAS RELACIONADAS

Añadir una lista de entradas relacionadas a cierto post del blog es muy recomendable ya que permite a los usuarios apollarse en ciertas entradas relacionadas con el tema de la entrada principal. Es muy interesante también ya que es una forma de retener a los lectores ofreciendoles una lista de entradas del mismo tipo de la entrada que el seleccionó.

¿Cómo funciona?

El script que mostraré a continuación se apolla principalmente en el contenido de las etiquetas, por tanto para poder incorporarlo tendréis que tener previamente definidas etiquetas.
Para entenderlo mejor os pongo una imagen para que veáis de lo que hablo. Todo hay que decir que estaréis cansados de utilizarlo provablemente en otros blogs o webs.

Esto lo podeis observar al final de cada entrada de mi blog, si queréis insertarlo en vuestro blog tendréis que seguir los siguientes pasos. Aviso no os asustéis, el código a insertar es algo largo pero muy simple ya que tan solo tendréis que modificar 2 cositas de nada.
Recomendable guardar la plantilla antes de realizar las modificaciones.

Nota:Recordar que podéis buscar coincidencias con ctr+F

Primer paso:(Ubicación del script)

En el caso de blogger nos dirigiremos a Diseño->Edicion de HTML una vez aquí marcaremos la casilla Expandir plantillas de artilugios. A continuación buscaremos ]]></b:skin>
Justamente debajo tendremos que copiar el siguiente código:


<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 3) {
break;
}}
document.write('</ul>');
}
//]]>
</script>


Segundo paso:(Unas lineas mas)

Llegado este punto ya lo tenemos casi todo, lo único que tendremos que hacer es buscar el siguiente fragmento de código en nuestra plantilla:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>,</b:if>


Justamente debajo tendremos que insertar el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +"?alt=json-in-script&callback=related_results_labels&max-results=10"'
type='text/javascript'/>
</b:if>


Tercer paso:(Ultimas lineas)

Buscamos ahora la línea de nuestro código que dice:

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


Justamente debajo de esta linea copiaremos el siguiente código:

<div class='post-footer-line post-footer-line-4'>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>


Cuarto paso:(Modificaciones)

• Resultados mostrados: El numero de resultados mostrados lo podremos configurar desde la linea que insertamos que dice así:
  

  if (cuantosPosts == 3)
  

  Este valor 3 se corresponde con el número máximo de entradas relacionadas coincidentes, por tanto este valor lo podremos cambiar por cualquier otro valor que nosotros queramos.
  

• Tamaño del titulo de la entrada: Poniendo un ejemplo lo veréis mejor, por ejemplo una entrada que se llame así: Código de colores, diremos que tiene una longitud de 17 caracteres, (los espacios en blanco también cuentan como caracteres). Sabiendo esto nos dirigiremos a la siguiente línea del código.
  

  relatedTitles.length && i < 20


  El 20 se corresponde con el tamaño máximo de caracteres de una entrada, en el ejemplo que os puse eran 17, podemos modificar este valor dependiendo del tmaño de nuestras entradas, el resultado de la búsqueda dará la lista de entradas con título menor que ese valor.

Guardamos la plantilla y listo, (en vista previa no podemos apreciar los cambios). Os dije que no era complicado, pero lo que no os dije era que es un poquito largo :) espero que os funcione a todos.

AMPLIAR IMAGEN CON CURSOR ENCIMA

Este recurso consiste en ampliar una imagen simplemente poniendo el cursor encima, se ampliará sin necesidad de hacer click en la imagen como normalmente estamos acostumbrados. Este recurso que nos permite hacer CSS viene especialmente bien para imagenes pequeñas o simplemente para llamar la atención de los visitantes, para insertarlo en vustro blog tan solo tendréis que seguir los siquientes pasos.

Primer paso:(Copia del estilo)

Nos tendremos que ir al apartado HTML de nuestro blog y copiar el siguiente código justamente encima de </head>


<style type='text/css'>
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -100px;
border: 1px dashed gray;
visibility: hidden;
color: #FFFF00;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}
</style>


Segundo paso:(Crear imagen)

Llegado este punto ya tendremos el estilo necesario para crear nuestra ampliación, tan tolo tendremos que alojar nuestra imagen en un servidor de imagenes, yo por ejemplo utilizo tinypic, una vez obtenida la dirección de la imagen tendréis que copiar el siguiente código en el lugar que queráis crear el efecto.

<a class="thumbnail" href="#thumb"><img src="URL IMAGEN" width="100px" height="100px" border="0" /><span><img src="URL IMAGEN" /><br />TEXTO (OPCIONAL)</span></a>


Cambiar URL IMAGEN por la dirección de vuestra imagen, fijaros que lo tendréis que incluir dos veces. Como opcional podréis añadir texto donde puse TEXTO (OPCIONAL).

El resultado será lo siquiente:(Poner cursor encima de la imagen)

Texto si se desea poner

TOTAL ENTRADAS Y COMENTARIOS

Mostrar el número de entradas y comentarios en el blog es algo imprescindible desde mi punto de vista ya que los visitantes podrán hacerse una idea de la cantidad de contenido del blog. Nos puede ayudar también a nosotros ya que de una forma rápida podremos saber si existen nuevos comentarios simplemente accediendo al blog directamente. La forma de incorporarlo al blog es muy sencilla y es la siguiente.

Lo normal es que este dato lo tengamos en nuestra sidebar, por tanto los que utilizamos blogger lo haremos creando un nuevo gadget de tipo HTML/Javascript, allí es donde tendremos que pegar el script que muestro a continuación.

<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src=http://VUESTRO BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount></script> Entradas y <script src="http://VUESTRO BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> Comentarios


Cambiar donde puse VUESTRO BLOG por el nombre del blog.

Nota: Podéis cambiar si lo deseáis el texto de 'Entradas' y 'Comentarios', por ejemplo poniendo post y comments o cualquier otra cosa que se os ocurra tan solo buscar esas palabras en el código y sustituirlas por las vuestras.

MINIBOTONES DE ENLACE

Bueno como bien sabréis, una de las cosas principales a la hora de tener un blog es darse a conocer, para ello que mejor forma que crear enlaces desde otros sitios a vuestro blog. Google tiene un maravilloso sistema que reconoce los enlaces entrantes y salientes de una determinada URL, de esta forma cada cierto periodo de tiempo (cada 3 meses si todo funciona correctamente) actualiza lo que llama Pagerank, esta es una valoración podríamos decir de calidad de un determinado lugar. Podéis consultar vuestro Pagerank desde aquí. Si soys nuevos en esto es muy posible que el resultado sea pagerank 0 pero no os preocupéis ya que como dije anteriormente se actualiza cada 3 meses. Una forma muy inteligente de hacer subir ese valor es creando minibotones de enlace, que permitirá a otros usuarios incorporaros a sus sitios. La forma de crearlo es la siguiente:

Primer paso:(Diseño del minibotón)

Bueno esto podríamos decir que es lo que os llevará un poquito de tiempo ya que tendréis que adaptar vuestro estilo. Tendréis que acceder a la web de kalsey, desde aquí configuraréis el estilo de vuestro botón, es muy sencillo y intuitivo, desde la opción submit podréis comprobar como va quedando vuestro diseño.

Segundo paso:(Guardamos el botón)

Bueno para guardar el botón lo podemos hacer de la siguiente manera. Nos situamos encima de la imágen generada y con el botón de la izquierda del mause hacemos click, aquí seleccionaremos guardar como le pondremos un nombre por ejemplo boton.jpg os recomiendo la extensión jpg ya que es mas ligera a la hora de mover la imagen. Ahora tendremos que alojarla en un servidor de imágenes por ejemplo este, generáis el código y os guardáis en algún lugar la dirección que dice Enlace directo a presentaciones.

Tercer paso:(Montar el enlace)

Llegado este punto ya lo tenemos casi todo. Crearemos un Gadget de tipo HTML/Javascript y añadiremos lo siguiente:


<p align="center"><img vspace="5" hspace="2" src="URL DE LA IMAGEN"/><br/>
<textarea rows="3" cols="10" onfocus="this.select()" onmouseover="this.focus()" style="font-family:verdana; font-size:8pt; border:1px solid #000000; background-color:#ffffff;" name="textarea">
<a href="http://VUESTRO BLOG" target="_blank"><img border="0" src="URL DE LA IMAGEN"/></a>
</textarea>
</p>


Datos amodificar del código:

• URL DE LA IMAGEN: Dirección generada por el servidor que será del tipo http://
• VUESTRO BLOG: Dirección de vuestro blog en el caso de blogger será http://nombre.blogspot.com.

Nota: Fijaros que la URL de la imagen la tendréis que incluir en 2 lugares del código.

Guardamos los cambios y ya está, los usuarios tan solo tendrán que agregar el código que se encuentra en la parte inferior de vuestro botón.

Resultado:

<br /><a href="http://sitiooriginal.blogspot.com" target="_blank"><img border="0" src="http://i40.tinypic.com/66itg1.png" /></a><br />

Os invito a agregar el mio a vuestro sitio :)

REPRODUCTOR DE MUSICA DEEZER

Este es uno de los mejores reproductores de música que podréis encontrar en la web, se trata de un reproductor en el cual elegiréis las canciones que queráis que estén disponibles en vuestro blog. Para poder ponerlo en vuestro sitio es muy simple y os voy a mostar paso a paso como hacerlo, podéis encontrar un ejemplo justamente al final de la entrada y si os gusta adelante!.

Primer paso:(Registro muy sencillo)

Deberéis de daros de alta en Deezer, el registro es muy sencillo y rápido, seguidamente os llegará un email al correo que le hayáis indicado, tendréis que acceder al correo y darle al enlace para validar vuestro usuario y contraseña.

Segundo paso:(Crear lista de reproducción)

Accederéis a la web con vuestro usuario y contraseña, aquí tendréis que crear una lista de reproducción, esto lo haréis desde el menú situado a la izquierda de la web como se muestra en la imagen.Una vez creada la lista mediante el buscador podréis introducir el criterio de búsqueda que dará como resultado las canciones relacionadas al autor y disco. Os aparecerá algo similar a la siguiente imagen.

Aquí tendréis la oportunidad de escuchar las canciones seleccionando el play, si la canción es la que queréis tan solo tendréis que darle al icono + y os aparecerá el titulo de vuestra lista de reproducción, lo seleccionáis y pincháis en agregar. Esto lo tendremos que repetir para todas las canciones que deseemos insertar.

Tercer Paso:(Seleccion del código)

Completados toos los pasos anteriores ya tendremos nuestra lista de reproducción lista para insertarla en nuestro blog, tan solo tendremos que seleccionar nuestra lista y hacer click en Compartir.

Os aparecerá algo similar a lo de la siguiente imagen:

Copiaremos el código generado y lo pegaremos en el lugar del blog donde queramos que nuestros usuarios disfruten de nuestra música. El resultado lo podéis observar aquí abajo con la música de U2.Os muestro una imagen del resultado en vuestro caso se podría seleccionar las canciones retroceder canciones ... Como observáis aparece incluso la carátula del disco a la que pertenece la canción. De esta forma cuando vuestro blog se cargue comenzará a sonar vuestra música preferida.

tarot

TEXTOS APARECEN Y DESAPARECEN

NO FUNCIONA ESTOY INTENTANDO ARREGLARLO

Este efecto lo conseguimos gracias a Javascript, consiste en hacer aparecer y desaparecer textos encuadrados en un rectánglo a modo de tablón, es un recurso muy útil por ejemplo para publicar noticias. Nos permite en un pequeño espacio reflejar todos los textos que queramos de forma individual y con cierto efecto de transición entre ellos.

Para crear el vuestro, tendréis que seguir los siguientes pasos:

Primer paso:(Ubicación del código)

Pegar el siguiente script en el lugar donde queráis crear el efecto.

<script language="JavaScript1.2">var delay=3000 //pausa (en milisegundos)<br />var fcontent=new Array()<br />begintag='<span style="font-family:Arial;font-size:85%;">' //tag que abre los mensajes<br />fcontent[0]="<b></b><br /><br />PRIMER TEXTO"<br />fcontent[1]="SEGUNDO TEXTO"<br />fcontent[2]="TERCER TEXTO"<br />closetag='</span>'<br />var fwidth=150 //ancho<br />var fheight=150 //alto<br /><br />///No editar/////////////////<br /><br />var ie4=document.all&&!document.getElementById<br />var ns4=document.layers<br />var DOM2=document.getElementById<br />var faderdelay=0<br />var index=0<br /><br />if (DOM2)<br />faderdelay=2000<br /><br />//function to change content<br />function changecontent(){<br />if (index>=fcontent.length)<br />index=0<br />if (DOM2){<br />document.getElementById("fscroller").style.color="rgb(255,255,255)"<br />document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag<br />colorfade()<br />}<br />else if (ie4)<br />document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag<br />else if (ns4){<br />document.fscrollerns.document.fscrollerns_sub.document.write(begintag+fcontent[index]+closetag)<br />document.fscrollerns.document.fscrollerns_sub.document.close()<br />}<br /><br />index++<br />setTimeout("changecontent()",delay+faderdelay)<br />}<br /><br />// colorfade() partially by Marcio Galli for Netscape Communications. ////////////<br /><br />frame=20;<br />hex=255 // Initial color value.<br /><br />function colorfade() { <br />// 20 frames fading process<br />if(frame>0) { <br />hex-=10; // increase color value<br />document.getElementById("fscroller").style.color="rgb("+hex+","+hex+","+hex+")";// Set color value.<br />frame--;<br />setTimeout("colorfade()",20); <br />}<br />else{<br />document.getElementById("fscroller").style.color="rgb(255,0,0)";<br />frame=20;<br />hex=255<br />} <br />}<br /><br />if (ie4||DOM2)<br />document.write('<div id="fscroller" style="border:1px solid ;width:'+fwidth+';height:'+fheight+';padding:2px"></div>')<br /><br />window.onload=changecontent</script><ilayer id="fscrollerns" width="&{fwidth};" height="&{fheight};"><layer id="fscrollerns_sub" width="&{fwidth};" height="&{fheight};" left="0" top="0"></layer></ilayer>

El código es bastante largo pero no os preocupéis ya que tan solo tendremos que cambiar unas poquitas cosas del mismo.

Segundo paso:(Personalización)

Cambiaremos en primer lugar en la parte de código donde puse PRIMER TEXTO,SEGUNDO TEXTO.. por vuestros mensajes.
A continuación podréis cambiar el color de los mismos, para ello buscar en el código donde pone lo siguiente: "rgb(255,255,255)", este es el color del texto, tan solo tendréis que seleccionar el que mas os guste cambiando esos números, podéis consultar tabla de colores.

DIVERTIDA CANCION :)

Vi este vídeo y no me pude resistir a ponerlo para que lo vierais, quien hubiera tenido estos vídeos de pequeño!!La cancioncita es super pegadiza. Podeis ver mas videos, estan todas las tablas de multiplicar arriba.

CAMBIAR OPACIDAD IMAGEN CON CURSOR ENCIMA

Este es un efecto que podemos obtener gracias a CSS, consiste en mostrar una imágen opaca y que al situar el cursor encima de la imágen esta se muestre de forma normal, podríamos decir que es como si la imágen original se mostrara con una tela encima. Es un efecto que queda bastante bien y que podréis emplear siempre que queráis en vuestras imagenes siguiendo estos simples pasos.

Dirijiros a Diseño->Edicion de HTML en el caso de blogger.
Buscar ]]></b:skin>, justamente encima tendremos que copiar el siguiente código:

a.opacidad img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.opacidad:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }


Llegado este punto ya tendremos insertada la clase que nos permitirá crear el efecto, ahora tan solo tendremos que insertar el siguiente código en el lugar que nosotros deseemos mostrar nuestro efecto.

<a class="opacity" href="URL DE LA IMAGEN"><img src="URL DE LA IMAGEN"></a>


Tendréis que sustituir donde puse URL DE LA IMAGEN por la dirección donde se encuentra la imagen que queréis mostrar.

Ejemplo:(Situar cursor encima de la imagen para ver el efecto).

CAMBIAR COLOR DEL FONDO DE LINK

Este efecto es muy común y consiste en cambiar el color del fondo del link cuando el cursor se encuentra encima del mismo, es un efecto que lo podemos conseguir facilmente gracias a nuestro querido Javascript, podemos insertarlo en nuestro blog de la siguiente forma:

Primer paso:(Copiar Script)

Nos dirijiremos a donde se encuentra nuestro código HTML de nuestra plantilla, en el caso concreto de blogger Diseño->Edición de HTML, una vez aquí copiaremos el siguiente script justamente encima de
</head>

<script>
function highlight(which,color){
if (document.all||document.getElementById)
which.style.backgroundColor=color}
</script>


Segundo paso:(Crear efecto)




Llegado a este punto, lo único que tendréis que hacer para crear el efecto será copiar el siguiente código en el lugar donde queráis que el efecto se aprecie.

<a href="URL DESTINO DEL LINK" onMouseover="highlight(this,'COLOR FONDO LINK')" onMouseout="highlight(this,document.bgColor)">PARTE VISIBLE LINK</a>


El resultado será algo como lo siguiente:(Poner cursor encima de EJEMPLO)

EJEMPLO 1

EJEMPLO 2

Nota: Si lo insertáis en un una entrada, deberéis insertar el código en la parte de Edición de HTML.

Ejemplos de colores: yelow,blue, red ...

Para consultar tabla de colores podéis hacer click aquí.

VENTANA EMERGENTE IMAGEN Y TEXTO

Este efecto consiste en sacar una ventana emergente al pasar el cursor por encima de una imagen o un texto, la forma de crearlo es muy simple y es de la siguiente forma:

Copiar el siguiente código donde queráis crear el efecto.

Para imagenes:


<a href="" onMouseOver="alert('MENSAJE DE EJEMPLO');return true;">
<IMG SRC="URL DE LA IMAGEN" border="0"></a>


Tedréis que obtener la url de la imagen que queráis insertar, para ello podéis hacer uso de un servidor de imagenes, yo utilizo este.

Para texto:

<a href="" onMouseOver="alert('MENSAJE DE EJEMPLO');return true;">TEXTO</a>


Ejemplos:(Poner cursor encima de la imagen y texto).

• Imagen:

• Texto:

Esto es un ejemplo de texto

TEXTAREA CAJA DE TEXTO SIN BORDES

Haciendo uso del textarea podremos de una forma muy fácil recoger textos y imágenes en un pequeño espacio de nuestro blog, es muy común para mostrar galerías de imágenes, a continuación os mostraré como inserta lo en vuestro blog.

En la pestaña de Edición de HTML pegar los siguientes códigos.

Solo texto:

<span id="fullpost"><div align="center"><pre style="overflow: auto; width: 410px; height: 160px;"><div align="left"><span >
AQUI ESCRIBIREMOS EL TEXTO
</span></div></pre></div>


Tendremos que eliminar la linea donde pongo AQUI ESCRIBIREMOS EL TEXTO y escribir el texto que queráis que contenga el textarea.

Con imagenes:

Tendremos que añadir después de <span> la siguiente línea de código:

<img src="URL DE LA IMAGEN"/>


Respetando las comillas sustituiremos donde pongo URL DE LA IMAGEN por la url de nuestra imagen.
Si queremos que se contengan texto y imagenes escribiremos el texto después de la línea introducida con la URL.

Ejemplo:

Ji ji ji esto es el fin del mundo!!!

Modificaciones:

Podéis modificar los valores de ancho y alto sabiendo que.

width:Indica el ancho de la caja.
height:Indica el alto de la caja.

Podéis hacer uso de un servidor de imagenes para alojar vuestras imagenes haciendo click aqui.

CAMBIAR COLOR TEXTO SELECCION

Es una de las propiedades que nos brindan algunos exploradores como Firefox o Safari, se trata de la propiedad selection, podremos cambiar el color del texto y fondo de selección incorporando unas pequeñas líneas de código.

En primer lugar buscar ]]></b:skin> y pegar el siguiente fragmento de código justamente encima, elegir el código correspondiente según el tipo de explorador empleado.

Para los que utilizan Firefox:

::-moz-selection {
background: #000000;
color: #ff9900;
}

Para los que utilizan Safari:

::selection {
background: #ff9900;
}

background: Color del fondo de la selección.
color: Color de la letra selecionada.

Nota: Respetar la almoadilla de antes del código del color, podéis consultar colores aquí o aquí.

REFLEJO IMAGENES

Crear reflejos en imágenes puede ser tan complicado como uno pueda pensar, se puede recurrir a programas como photoshop para conseguir estos y muchos otros efectos. Navegando encontré una web que la verdad que genera unos resultados bastante buenos, podréis aplicar este efecto tanto a fotografías como a textos, son muchos los que utilizan este tipo de sistemas para obtener lo que de otra manera nos llevaría tiempo y dedicación para obtener resultados similares, por ello os mostraré un ejemplo de lo fácil que es utilizarlo. Podéis crear vuestros propios efectos accediendo al enlace de debajo del ejemplo.

Aqui...

CAMBIAR IMAGEN AL PASAR EL CURSOR

Lograremos con esto mostrar dos imágenes en el espacio de una, consiste en mostrar una imagen por defecto y cuando el cursor se encuentra encima de la imagen cambiar la imagen, de esta forma podremos crear transiciones que le den un toque especial a nuestro blog. La forma de aplicar este recurso es muy simple y es como se indica a continuación.

Primer paso:(Previos)

Si queremos aplicar este recurso tendremos que tener claro cuales son las dos imágenes que queremos mostrar, deberemos por tanto modificar su tamaño en el caso de que ambas imágenes no sean iguales, llegado a este punto tendremos que alojarlas en un servidor de imágenes yo por ejemplo utilizo este copiamos la dirección que se genera y pasamos al siguiente paso.

Segundo paso:(Como insertarlo)

Tendremos que copiar en el lugar de la entrada que deseemos el siguiente código en la parte de Edición de HTML.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL PRIMERA IMAGEN"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="URL PRIMERA IMAGEN" onmouseover="this.src='URL SEGUNDA IMAGEN'" onmouseout="this.src='URL PRIMERA IMAGEN'" alt="" border="0" /></a>


Sustituiremos donde poner URL PRIMERA IMAGEN por la dirección de la imagen que se mostrará por defecto y URL SEGUNDA IMAGEN por la imagen que se mostrará al tener el cursor encima de la imagen.Obtendremos resultados como el siguiente.

Ejemplo:(Situar cursor encima de la imagen)