Instala botones para compartir en las redes a modo de ventana de inicio

Artículo muy recomenable tomado de http://laventanadewindows.blogspot.com


Hoy os presento algo de lo que estoy muy orgulloso, un script, que permite que a los diez segundos de entrar en una página la cubra una capa oscura semitransparente en cuyo centro hay un cuadro blanco, que contiene los botones de compartir tu blog en las redes sociales, Facebook, Twiter y Google+, y para no hacer muy pesada la navegación por la página, ya que se abriría cada vez que se recargara, incluí una cookie, que impide que se ejecute el script más de una vez al día.
Puedes ver un ejemplo aquí.

1ª PARTE.
El primer código debes añadirlo a la plantilla del blog, para ello ve a Diseño, luego a Edición de HTML y marca la casilla "Expandir plantilla de Artilugios", pégalo justo antes de la etiqueta </head>, si utilizas Google Chrome pulsa Ctrl + F para buscar más deprisa.

<script type='text/javascript'> //<![CDATA[ // Grabar function setCookie(name, value, expires, path, domain, secure) { document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : "; expires=" + expires.toGMTString()) + ((path == null) ? "" : "; path=" + path) + ((domain == null) ? "" : "; domain=" + domain) + ((secure == null) ? "" : "; secure"); } // Leer function getCookie(name){ var cname = name + "="; var dc = document.cookie; if (dc.length > 0) { begin = dc.indexOf(cname); if (begin != -1) { begin += cname.length; end = dc.indexOf(";", begin); if (end == -1) end = dc.length; return unescape(dc.substring(begin, end)); } } return null; } //Borrar function delCookie (name,path,domain) { if (getCookie(name)) { document.cookie = name + "=" + ((path == null) ? "" : "; path=" + path) + ((domain == null) ? "" : "; domain=" + domain) + "; expires=Thu, 01-Jan-70 00:00:01 GMT"; } } //]]> </script> <script type='text/javascript'> function redesociales() { document.getElementById('redessociales').style.display="block"; document.getElementById('fondoscuro').style.display="block"; } </script> <script type='text/javascript'> function redesocialescerrar() { document.getElementById('redessociales').style.display="none"; document.getElementById('fondoscuro').style.display="none"; } </script>

2ª PARTE.
Después busca <!-- clear for photos floats -->, es posible que salga dos veces, debajo de la primera pega lo siguiente:

<div id='redessociales' style='top:35%; left:40%; z-index:2000; display:none; position:fixed; background-color: white; width: 250px; height: 230px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px; border-top-right-radius: 15px; border-top-left-radius: 15px; text-align: center;'>
<span align='center' style='font-size: 11pt;'><br/><b>¡Sígueme en las redes sociales!</b></span>
<table align='center' border='0' cellpadding='6'><tbody>

<tr><td>&lt;iframe allowTransparency=&#39;true&#39; frameborder=&#39;0&#39; scrolling=&#39;no&#39; src=&#39;http://www.facebook.com/plugins/like.php?href=URL del blog&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=light&#39; style=&#39;border:none; overflow:hidden; width:73px; height:60px&#39;&gt;&lt;/iframe&gt;</td>

<td><a class='twitter-share-button' data-count='vertical' data-lang='es' data-text='Nombre de tu blog' data-url='URL del blog' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td></tr>

<tr><td align='center' colspan='2'><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone href='URL del blog' size='tall'/></td></tr>

</tbody></table>
<span align='center'>Pulsa <a href='javascript:void(0)' onclick='redesocialescerrar()'>aquí</a> para seguir en la página.</span></div>

La parte en color verde es el mensaje que se mostrará en la parte superior.

Lo que está en rojo, sustitúyelo por los datos que se piden de tu blog.

3ª PARTE.

Definitivamente el último paso consiste en añadir un tercer trozo de código, justo después de la etiqueta <body>, también es posible que te aparezca así:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

<div id='fondoscuro' style='z-index:99; position:fixed; top:0px; left:0px; overflow:visible; height:100%; width:100%; background:#000000; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; -khtml-opacity: 0.8; display:none; color:white;'/>

<script type='text/javascript'>
var comprobar = getCookie(&quot;redesociales&quot;);
if (comprobar != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() + 86400000);
setCookie(&quot;redesociales&quot;,&quot;2&quot;,expiration);
setTimeout(&quot;redesociales()&quot;, 10000);
}
</script>

El trozo de código en rojo, es el tiempo en milisegundos que "vivirá la cookie", tras ese tiempo, el usuario podrá volver a ver el cuadro de las redes sociales. Está fijado en 1 día.
El trozo de código en verde, es el tiempo en milisegundos que tardará en abrirse el cuadro de compartir el blog. Está fijado en 10 segundos.

Read More

Cómo conseguir más tráfico en Blogger: Optimizar los títulos

Artículo tomado de  http://laventanadewindows.blogspot.com muy recomendable seguir sus adecuaciones.

La próximas entradas se van a dedicar exclusivamente a ayudarte a conseguir más tráfico para tu blog, es decir, como conseguir más visitas.
Hoy básicamente aprenderás a optimizar los títulos del blog.
Seguramente habrás apreciado que en el navegador siempre aparece por defecto el titulo del blog, y a continuación el titulo de la entrada donde estás, parece que esto importa poco, pero en realidad importa muchísimo. ¿Por que? Pues porque así es como aparecerás en los resultados de búsquedas, de Google por ejemplo; y esto puede determinar que visiten tu sitio o no.

Puede ser que ya hayas optimizado los títulos de tus entradas, ya que muchos otros blogs ofrecen ayuda para este tema, pero solo aquí, en "La Ventana de Windows", podrás obtener el código para optimizar también los títulos de las páginas estáticas, las de las etiquetas y las de los archivos, muy importantes para el tráfico de tu blog.

Para ello necesitamos añadir unos códigos a la plantilla, entonces, vamos a Diseño y luego a Edición de HTML.
Tienes que buscar <title><data:blog.pagetitle/></title>, si utilizas Google Chrome puedes encontrarlo más rápido si pulsas Ctrl + F, y luego sustituirlo por lo siguiente:


<b:if cond='data:blog.url != data:blog.homepageUrl'> <title><data:blog.pageName/> | <data:blog.title/> </title> <b:else/> <title><data:blog.pageTitle/></title> </b:if>

Guardamos los cambios y listo.

Y ahora ya hemos optimizado los títulos de las entradas y páginas estáticas de nuestro blog.

Read More

Como instalar las últimas entradas o minigalerías en blogger

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Ultimas entradas con miniatura de imagen

Hace unos días publiqué un procedimiento que nos permite mostrar las últimas entradas publicadas en el blog con una pequeña imagen representativa siempre que el artículo la incluya en su interior, así como un breve resumen del mismo.

Para conseguirlo, hacemos uso del gadget "Lista de Blogs" que ofrece blogger. Aunque muchos lectores obtuvieron un resultado exquisito, he querido darte a conocer esta otra forma de conseguir lo mismo.

Utilizaremos un elemento html-javascript e incluiremos un script en su interior. Puedes ver el resultado en la siguiente imagen:

Diseño>añadir gadget (elemento de página)>Lista de Blogs

Pega lo siguiente:

<script language="JavaScript">
blimagen = new Array();

blimagen[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA-4BdfrqLKowQFpd9rFThDBnT8W3fHaQrMJRlwHV9pxYTaP1gBLYx49lXbzm01ALWMvkQhyphenhyphenjT772CmMpf564ifvMyYozfURLuta54yiTjMw7U6Z2q6R_FUMIeueGLaJLZ4k9qGw0D8Q/s320/blnoimg1.png";
blimagen[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA-4BdfrqLKowQFpd9rFThDBnT8W3fHaQrMJRlwHV9pxYTaP1gBLYx49lXbzm01ALWMvkQhyphenhyphenjT772CmMpf564ifvMyYozfURLuta54yiTjMw7U6Z2q6R_FUMIeueGLaJLZ4k9qGw0D8Q/s320/blnoimg1.png";
blimagen[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA-4BdfrqLKowQFpd9rFThDBnT8W3fHaQrMJRlwHV9pxYTaP1gBLYx49lXbzm01ALWMvkQhyphenhyphenjT772CmMpf564ifvMyYozfURLuta54yiTjMw7U6Z2q6R_FUMIeueGLaJLZ4k9qGw0D8Q/s320/blnoimg1.png";
blimagen[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA-4BdfrqLKowQFpd9rFThDBnT8W3fHaQrMJRlwHV9pxYTaP1gBLYx49lXbzm01ALWMvkQhyphenhyphenjT772CmMpf564ifvMyYozfURLuta54yiTjMw7U6Z2q6R_FUMIeueGLaJLZ4k9qGw0D8Q/s320/blnoimg1.png";
blimagen[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA-4BdfrqLKowQFpd9rFThDBnT8W3fHaQrMJRlwHV9pxYTaP1gBLYx49lXbzm01ALWMvkQhyphenhyphenjT772CmMpf564ifvMyYozfURLuta54yiTjMw7U6Z2q6R_FUMIeueGLaJLZ4k9qGw0D8Q/s320/blnoimg1.png";

blanchobloque = 210;
blcnaleat1 = true;
blmargen = 9;
blcolorbord = "#ffffff";
blcnfond = "#ffffff";
blimmanch = 50;
blimmalt = 50;

bltamanotexto = 12;
blcolorenlace = "#333333";
blstiil = true;
icon = " ";

blcomentt = "comentarios";
showblcne = false;
blcntamanoresumen2 = 90;
blcntamanoresumen = 11;
blcolorTextoResumn = "#666";
icon2 = " ";

blnumeroEntradasMostrar = 4;
blcnTuBlog = "http://elbalcondejaime.blogspot.com/";

</script>
<script src="https://sites.google.com/site/scriptsbalcon/b/blcnposts.js" type="text/javascript"></script>

Ahora tan solo debes reemplazar la dirección de mi blog por la de tu bitácora (se indica en color rojo).

Para cambiar el aspecto del widget, atiende a estas indicaciones:

blanchobloque = 210; Aumenta o disminuye la cifra (210) para editar el ancho del bloque general que muestra la lista de entradas recientes.

blcolorbord = "#ffffff"; Muestra un marco. Estará oculto si tu blog tiene el color blanco como fondo. Para cambiar el color del borde reemplaza #ffffff por cualquier otro código (usando la tabla de colores).

blnumeroEntradasMostrar = 4; La cifra 4 especifica el número total de entradas a mostrar en la lista.

blimmanch = 50; Aumenta o disminuye la cifra (50) para editar el ancho de la imagen en miniatura.

blimmalt = 50; Aumenta o disminuye la cifra (50) para editar el alto de la imagen en miniatura.

blcntamanoresumen2 = 90; Edita la cifra (90) para modificar la longitud de los resúmenes en cada entrada.

blcntamanoresumen = 11; Aumenta o disminuye la cifra (11) para editar el tamaño del texto del resumen.

blcolorTextoResumn = "#333333"; Reemplaza #333333 por el código de tu color favorito para editar el color del texto del resumen (utiliza la tabla de colores).

En breve ampliaré la entrada para darte a conocer el mismo gadget pero de apariencia distinta.

Read More

Como poner el fondo de las entradas transparentes

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Fondo de las entradas transparente, Opacidad en los posts de tu blog

Con unas pocas líneas de código podemos hacer que el fondo de nuestras entradas sea parcialmente translúcido de manera que pueda transparentarse la imagen de fondo que tenemos en el blog.

El grado de opacidad puede editarse por lo que cada valor ofrecerá una visión distinta del fondo en los posts.

Accede a este blog de pruebas para comprobar el resultado.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y justo encima añade este bloque de CSS:

.post {
color:#000000;
padding:4px 18px;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
-khtml-opacity: 0.8;
}

Edita el valor 8 resaltado en color verde por una cifra superior o inferior para añadir menos o más opacidad -respectivamente- a las entradas. Ten en cuenta que no debes incluir un valor que sobrepase el 9 o que sea inferior al 1.

Para añadir una imagen o un color de fondo al post, utiliza el atributo background bajo .post { tal y como se muestra a continuación:

.post {
background:url("URL DE LA IMAGEN") no-repeat scroll 0 0 transparent;

Reemplaza URL DE LA IMAGEN por la dirección de la imagen.

Utiliza esta otra línea en caso de querer el fondo en color:

background:#cccccc;

#cccccc es el código del color escogido. Edítalo a tu gusto accediendo a la tabla de colores.

Guarda la plantilla y comprueba el resultado en varios navegadores para asegurarte que la opacidad se aprecia bien.

Read More

Icono en los títulos de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Imagen o icono a la derecha de los títulos de las entradas

Los títulos de las entradas en blogger pueden modificarse de muchas formas, y una de ellas es agregándoles una imagen o icono a su derecha.

Aunque también puede hacerse por medio de unas líneas de CSS, explicaré el procedimiento para realizar el truco en HTML (lo que tiene ventajas... Podremos añadir una imagen de fondo y un icono distinto a la derecha).

Diseño>Edición de HTML>expandimos artilugios

Busca este bloque de código:

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Y añade la línea que aparece resaltada en verde a continuación:

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>
<b:if cond='data:post.url'>
<img style="margin-right:4px;" src= "URL DEL ICONO"/><a expr:href='data:post.url'><data:post.title/></a>

<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Reemplaza URL DEL ICONO por la dirección de tu imagen o icono ^[+].

Haz vista previa para ver el resultado y guarda la plantilla para terminar.

Read More

Sencillo menú despegable para el blog

Artículo publicado en EL Balcón de Jaime.

Un sencillo menú desplegable para el blog

A todos nos gusta incluir enlaces en el blog, ya sea para recomendar a otros sitios web con los que tenemos una buena relación, para compartir servicios de internet o simplemente para mostrar una lista de artículos interesantes en el blog.

Con este sencillo menú podrás ofrecer a tus lectores una gran lista de links por los que podrán navegar de forma rápida y sencilla...




Puedes ver el menú en funcionamiento aquí.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código:

<center><form style="padding: 8px;" name="blmenusimple" id="blmenusimple">
<select name="blmenusimple2" id="blmenusimple2" onchange="window.open(this.value)">
<option />TITULO DEL MENU
<option value="DIRECCION DEL ENLACE" />TITULO DEL ENLACE
<option value="DIRECCION DEL ENLACE" />TITULO DEL ENLACE
<option value="DIRECCION DEL ENLACE" />TITULO DEL ENLACE
<option value="DIRECCION DEL ENLACE" />TITULO DEL ENLACE
</select>
</form></center>

Ahora reemplaza TITULO DEL MENU por el texto que aparecerá antes de desplegar el menú, DIRECCION DEL ENLACE por la dirección de tu blog, web o artículo y TITULO DEL ENLACE por el texto que tendrá el link.

En caso de querer añadir más enlaces, inserta esta línea tantas veces como desees:

<option value="DIRECCION DEL ENLACE" />TITULO DEL ENLACE

Asegúrate de incluirla siempre antes del cierre </select>.

Guarda el gadget para terminar.

Encontrarás otro menú desplegable aquí, el cual consta de niveles y subniveles.

Read More

Como instalar artículos relacionados con fotos en tu blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Artículos relacionados con imagen en tu blog

Hace tiempo aprendimos a poner el truco de artículos relacionados en el blog y posteriormente vimos la forma de instalar los artículos relacionados por categorías.

Esta vez te traigo un nuevo truco con el que podrás mostrar las entradas relacionadas de tu blog junto a una captura de imagen (que contiene el artículo)...





Puedes ver el resultado del truco en este blog de pruebas.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y añade este script encima:

<script type='text/javascript'>//<![CDATA[
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; try {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;} catch (error){ s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF7jbInhS9S3JHPbpFxTla7kq4STYe9HDYmWOglnnMz9l05u8F1EzBYGkrNkrL3eK1Qw2CHWRRLfH-Or156lUOqf5Ryz0ERIo1G2TtxhJrvGetYTR5EPBpN8Dz72WSGV_vG2OhihDEo29i/s320/blnoimg.png';}
if(relatedTitles[relatedTitlesNum].length>44) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 44)+"..."; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; } } } } function removeRelatedDuplicates_thumbs() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains_thumbs(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp3.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3[tmp3.length - 1] = thumburl[i]; } } relatedTitles = tmp2; relatedUrls = tmp; thumburl=tmp3; } function contains_thumbs(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels_thumbs() { for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) { relatedUrls.splice(i,1); relatedTitles.splice(i,1); thumburl.splice(i,1); } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; if(relatedTitles.length>0) document.write('<h4>'+relatedpoststitle+'</h4>'); document.write('<div style="clear: both;"/>'); while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:4px;float:left;');
if(i!=0) document.write('border-left: solid 0.5px #6ecf59;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:108px;height:76px;border:0px;" src="'+thumburl[r]+'"/><br/><div id="related-titles">'+relatedTitles[r]+'</div></a>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } document.write('</div>'); }
//]]></script>

Ahora busca la etiqueta ]]></b:skin> e inserta estos bloques de CSS encima:

#related-posts{
border: 1px solid #6ecf59;
overflow:hidden;
min-height:100%;
margin-top: 40px;
margin-bottom: 20px;
text-transform:none;
height:100%;
padding:0;
}
#related-posts h4 {
background:none repeat scroll 0 0 #D7F5D1;
border-bottom:1px solid #6ECF59;
margin:0 0;
padding:6px;
color:#333333;
font-family:Trebuchet MS,Arial,sans-serif;
font-size:14px;
font-weight:normal;
}
#related-titles{
width:114px;
height:78px;
text-align:left border:none;
padding-left:2px;
font-size:90%;
line-height:normal;
font-weight:700;
color: #315d28;
margin:4px 0 0;}

#related-posts a{color:#333;}
#related-posts a:hover{color:#333;background-color: #c3f4b9;}

Por último busca esta línea en tu plantilla:

<p class='post-footer-line post-footer-line-1'>

En caso de no encontrarla, busca esta otra:

<div class='post-footer-line post-footer-line-1'>

Y agrega este código justo debajo:

<!-- bl_Articulos relacionados -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;Te puede interesar...&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- bl_Fin Articulos relacionados -->

Selecciona la cantidad de entradas relacionadas con imagen a mostrar en la línea que ves en verde, reemplazando la cifra 4 por cualquier otra.

La frase que he marcado en naranja es el título que llevará el recuadro y puede sustituirse por cualquier otra cosa.

Guarda la plantilla para terminar:




Nota:

- Para reducir el tamaño de las casillas que recogen cada entrada relacionada, observa esta imagen y edita lo que ves en color rojo.

- Si deseas editar el gadget (colores, fondos, tamaños...) y no sabes como hacerlo, deja un comentario para que pueda ayudarte.

Referencias: Blogger Plugins

Read More

Enlace o imagen que desaparece al hacer clíck

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Enlace o imagen que se mueve y se esfuma al hacer clic

En el anterior post aprendimos a usar prototype y scriptaculous para hacer que la sidebar o barra lateral del blog pudiese arrastrarse hasta una posición deseada.

Con este otro truco, y haciendo uso de los mismos scripts, conseguiremos un efecto magnífico para los enlaces o las imágenes en el blog.

Puedes ver el resultado haciendo clic sobre las siguientes imágenes...

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta y añade estos scripts encima:

<script src='http://sites.google.com/site/scriptsbalcon/b/blconfigtext.js' type='text/javascript'/>
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

<script type='text/javascript'>
function PuffEffect(element){
new Effect.Puff(element, {duration:3});
}
function ShowImage(element){
new Effect.Appear(element,{duration:1, from:1, to:1.0});
}
</script>

Las líneas resaltadas en color gris son los scripts de prototype y scriptaculous usados ya en varios trucos. Si están en tu plantilla, no es necesario que los agregues de nuevo.

Ahora guarda la plantilla.

Dirígete a una entrada cualquiera para probar el efecto con una imagen o un enlace...

1) Con imagen

Utiliza este código cada vez que desees insertarle el efecto a una imagen:

<div id="myimage" onclick="PuffEffect(this);">
<img style="cursor: pointer;" src="URL DE TU IMAGEN"/></div>

Reemplaza URL DE TU IMAGEN por la dirección de tu imagen o icono.

2) Con enlace

Utiliza este código cada vez que desees insertarle el efecto a un enlace:

<div id="myimage" onclick="PuffEffect(this);"><a href="DIRECCION">TITULO</a></div>

Reemplaza DIRECCION por la url o dirección de la página web o el blog, así como TITULO por el texto que llevará el enlace.

3) Con imagen y enlace

<div id="myimage" onclick="PuffEffect(this);">
<a href="DIRECCION"><img style="cursor: pointer;" src="URL DE TU IMAGEN" /></a>
</div>

Los códigos pueden utilizarse tanto en las entradas del blog como en los elementos de página o gadgets html-javascript que encontrarás en el apartado de Diseño.

Nota:

Para no estar copiando los códigos que insertan las imágenes o los enlaces con el efecto, haz uso de la plantilla de entrada que ofrece blogger.

Read More