Añadir traductor google con banderas a nuestro blog

Ya os conte como añadir el traductor google a nuestra web en este post, pero ahora os traigo ese traductor con otro diseño que es posible que llame la atencion a más gente.






Se trata del traductor de google con banderas. Para aladirlo a vuestro blog solo tenéis que añadir un nuevo elemento html/javascript y escribir el siguiente código:


<style>



.google_translate img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

border:0;

}

.google_translate:hover img {

filter:alpha(opacity=30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

.google_translatextra:hover img {

filter:alpha(opacity=0.30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

</style>

<div>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-pw9CojT-Le6moXx1dLZ9tLxgkcjTrhPKr5Xaiq2wazVhnlekIWTu2zRKPIjpwjzrxtWqYsVJala6a9SiJRU7w_44VMEFNxoD9o7gl3E2VlyC6RY7_fx3bleNn9qeftMloyfSd3xfTp8/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjreVgSzz4rxZ9nl-70s0MDCHDcNyaveuPmkfnLlD0NVSXolneBgK2Km-2qIuKb89d9qGVDQgsDeN6rc_T0OGWuxWyHtDp9Loa-be0T4B7Ava82TFt1SKdCnCYnPnE116g9l9kNkRoRaIo/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgbw4q854N7u10GsOGwc-FB9DJwPafdQF0sg-DfCYPk-5dUoOV1LYe86OS3EuporGBlX_m1beyNqZxb3yyrgzflT_69RYBr5QbUrVEX-DPhml2J8tUooxrARqiJx31RZq_13PB7wnE6I/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2esBK44eIwuSK1Sr71n63xVJdwh0-P2t5CVc6D4eM_dw_yrl16IQMZk3qaECEg2f9GuAYXhYNv-LXUFlUTjZfUA1Gfcv1EY0lTYE1QFE5smWTmc4WnrCT6R0kOvDg5ivCTCctqHy4ZVg/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuXlIF3qfNd0Kp_Xd_oC4rR-CgtB9fEWuqfrbykmoteSaD5DwLdptUFYurQu9oVdUypxQRVd3wwp06KFn5e50ZAfS0GqMWUwgchnqqjV4UpB6GVnS2rduvPpASVoiW9GJacYtfX_v4Coc/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDRBMe1bkUwMYmIjvmV3g4DTRpv8HF1RWgNju_jTvuDxLDdi9STQdsFhuK_Zm6y8fJCB1eWwEu6dlCyuauLlMpI39jQgwNSIwfQoolejA90a41hyo9hKZ_qupVgWiu0-kD5War2yHaNmM/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYTL47P92cNPqyIWfT_bFmmn6LVC5gNALrjWEa-j_hOOHlIrUtbcEK7Ee87lWVTmm_on6kcN3PhQVPGyLkG0kTUBNUe4M6b8dAf-jTAzow16ry40FmDmfWzgdp_VT-b4sLzW1a9NSA9Ew/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgktquc1nubjKCJe8e7GIf4J4TYdKizgA2eQmovmvVE-j7_6gAq3QLtOcgtZ_LxGURsQ2d3o3KPRbiADQ9sxjVusaXAXircq89IUcmsLPvgTsk92kg1gzPVIEdkMa8fJQeI_vhFhxTVnus/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ2_Uvmhbi40Om08XB8Y44w-se7WZtZB124DWFXehcC9p502MfIrzRSCyT9sWTj7z-mPdySbtib1bHQBAcC3EkwCF81nBgV3DzsM0UqiSkQxDvlOZYIFRWL_9Tq4udqMxqqnR3kQL0iew/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizHq7VU09CKHUjVbJ9uDjt9QQnJqHZflT5Py6bBpcYJ1zNYL2jPNK4LFf5hJd1xGR58etlSYoh-oAxQRtLrihMPLw4ne4UzJ5kQGMzc6AMGtNQIo-FBIU0k-HGtgljxaTjY8YRCYCmCzU/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdqFNv_AdJzcznLU1qB2B3oBwKQmWemLXWIicyI4xGelbWg9rkQ6qK67QfcMlRxRD93eVZs0r8W8Ttaxu0GDxKfXnGHDA6XhhXWyeP86F3iVtxmoQidqxIKkFDmx2zaSZ9-WWXYUoba-w/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZTE6WanBbmhu2Ao-jN3Q2QEo7NPWraQ9zYIc4iNDsE5MGLQ2OGgsP6YrFxLoDuhZi2CfweAu-wnwmQqLu-uIunNH8X6di2o9-uh8EfcMmTw1ETjoRR7D1mBFeW7-zetWsU-x32hSVMpc/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a> </div>

<div 0px 0pxâ?? style="â??font-size:10px;margin:8px" 3px></div>



<br/>

<a href="http://www.ayudaparamiweb.com/"><font size="1px">Widget ofrecido por www.ayudaparamiweb.com</font></a>


Leer más......

Como añadir boton de imprimir en mi web o blog

Hola de nuevo, hoy os traigo un sencillo javascript que os permitirá añadir un botón con la funcionalidad de imprimir la página que nuestra visita esta visualizando, ya sea un post o una pagina web común.

Lo único que tendréis que hacer seá añadir este código allá donde queráis que aparezca el botón imprimir:


<a href="javascript:print()">Imprimir</a>


Si deseais que en lugar de poner "Imprimir" el enlace sea un icono o imágen el código deberá ser el siguiente:


<a href="javascript:print()" src="ruta de la imagen"></a>


Leer más......

Como poner efecto nieve en mi web o blog

Con motivo de las fechas en las que nos encontramos, me puse ha buscar algo con lo que poder decorar nuestra página web o blog durante el invierno y las navidades. Pues bien, lo encontre gracias al Escaparate de Rosa. Se trata de un script que da un efecto de nieve en nuestro sitio web.

Para integrarlo es muy fácil, simplemente tendremos que ir a la pestaña diseño, editar html y justo antes de la etiqueta </body> , pegamos el siguiente código:



<script type="text/javascript" src="http://agudovk.googlepages.com/snow.js"></script>



Recordar que antes de modificar la plantilla de nuestra web es importante guardarla por si acaso hacemos algo mal. También os recomiendo descargaros el script y alojarlo en el servidor que soláis utilizar para vuestras imágenes y demás archivos.

AQUI os dejo una página de ejemplo

Leer más......

Como poner efecto de reflejo de agua en una imagen

Ultimamente se ven mucho por internet imágenes con un efecto de reflejo en el agua que resulta llamativo y queda bastante bien, claro siempre depende de donde y como se utilice.

Lo único que deberéis hacer es copiar el siguiente código javascript dentro de la etiqueta body en el lugar que queramos que aparezca. En blogger podemos escribir el código añadiendo un nuevo elemento html/javascript.

El código a insertar es el siguiente:


<!-- Mas javascripts en http://ayudaparamiweb.com -->
<center>
<!--Change following image name to your own-->
<img id="reflect" src="URL de la imágen"/><br/>
<script language="JavaScript1.2">

function f1(){
setInterval("mdiv.filters.wave.phase+=10",100);
}

if (document.all){
document.write('<img id="mdiv" style="filter:wave(strength=3,freq=3,phase=0lightstrength=30) blur() flipv()" src="'+document.all.reflect.src+'">')
window.onload=f1
}

</script>
</center>


Por ultimo cambiamos donde pone URL de la imágen por la direccion donde este alojada la imágen a la que queramos poner el efecto.

Leer más......

Como poner emoticonos en comentarios de blogger

Aquí les traigo un script que permite introducir emoticonos en los comentarios de blogger. Antes de nada quiero comentaros que para que el script funcione correctamente, deberemos tener los comentarios incrustados en el post.

¿Cómo funciona?

Se trata de un script que recibe todo el texto de nuestro comentario, busca una serie de caracteres y lo sustituye por la imágen que está asignada. También añadiremos una leyenda en la parte superior justo antes de la caja donde escribiremos el comentario, para que nuestros visitantes sepan en todo momento coo poner el emoticon que deseen.

¿Cómo añadirlo en nuestro blog?

Lo primero que debemos hacer es añadir justo antes de la etiqueta </body> el siguiente código:


<b:if cond='data:blog.pageType == "item"'>
<script src='http://agudovk.googlepages.com/Emoticonos.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>


De está manera hemos añadimos el script que sustituira los caracteres por emoticonos. El siguiente paso será colocar la leyenda, para ello buscamos la etiqueta <iframe allowtransparency='true' y justo encima pegamos el siguiente código html:


<table width='400px'>
<tr>
<td colspan='10'>Emoticonos en blogger</td>
<td colspan='3'><a href='http://ayudaparamiweb.com'><img src='http://agudovk.googlepages.com/ayudaweb.png' style='border:0;'/></a></td>
</tr>
<tr>
<td><img src='http://agudovk.googlepages.com/com-smile.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-cry.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sad.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-tongue.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-lol.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-oops.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-blink.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-neutral.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-secreto.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sorpresa1.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sorpresa2.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-mad.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-confuso.gif'/></td>
</tr>
<tr>
<td>:)</td>
<td>:'(</td>
<td>:(</td>
<td>:P</td>
<td>:D</td>
<td>:$</td>
<td>;)</td>
<td>:-I</td>
<td>:-X</td>
<td>:o</td>
<td>:O</td>
<td>O</td>
<td>:/</td>
</tr>
</table>


Pues ya está, a partir de ahora vuestros comentarios disfrutarán de graciosos emoticonos que animarán un poco más vuestro blog.

Leer más......

Como añadir últimos post en el sidebar de blogger

Buscando en la red alguna cosa útil que poder mostraros hoy, encontre un sencillo script que nos permitirá añadir en la sidebar, los últimos post que hemos publicado.

En El Escaparate de Rosa está muy bien explicado pero les haré una pequeña guía aquí tambien para que podáis integrarlo en vuestro blog.

Lo único que tendremos que hacer será ir a configuración, diseño, elementos de la página y aqui añadimos un nuevo elemento html/javascript. El código que debemos pegar será el siguiente:


<script src="http://lejaniaimposible.googlepages.com/ultimospost.js">
</script>
<script language="javascript">
var numposts = 10;
var numchars = 120;
var showpostdate = false;
var showpostsummary = true;
var standardstyling = true;
</script>
<script src="http://NOMBRE_DEL_BLOG.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts">


Tendréis que modificar donde pone Nombre_del_Blog por vuestra dirección. Tambien podréis modificar algunos valores el script:

var numposts Este es el número de entradas que queremos mostrar.
var numchars Aquí elegiremos el número de letras de cada post que mostraremos.
var showpostdate Elegiremos true o false depende de si queremos mostrar la fecha.
var showpostsummary Con true mostramos el ...(leer mas) y con false no se verá.
var standardstyling Según pongamos true o false, cambiará el estilo del texto. Os recomiendo dejarlo en true, queda mucho más bonito.

Leer más......

Dividir una cadena de texto en varias partes con js

Para todos aquellos que necesiten por cualquier motivo (que hay muchos), dividir una cadena de texto ya sea para cambiar cualquier cosa de un formulario, incluso para hacer varios cambios a través de un solo botón en ajax, aquí os dejo una pequeña guía de como podeis hacerlo.

Lo primero que haremos es definir una variable para averiguar en que posición de la cadena queremos hacer
el corte. Antes es necesario que a la hora de almacenar el texto, coloquemos algún separador, en este caso utilizaremos "#". De tal manera que ya solo tendremos que utilizar la funcion indexOf para localizar la posición de dicho separador.

var texto = "Javier#tiene dos perros"
var posicion = texto.indexOf("#")

Como véis el ejemplo es un poco absurdo pero enserio que este manual os podrá sacar de más de un apuro. Lo siguiente será recoger la cadena de texto que va desde el principio, es decir la posicion 0, hasta el separador que hemos colocado:

var nombre = texto.substring(0,posicion);

Por último recogeremos el texto que queda desde el separador hasta el final de la cadena de texto utilizando el tamaño de la variable texto:

var descrip = texto.substring(posicion+1,texto.length);

De este modo tendremos en nombre el valor "Javier", y en descrip "tiene dos perros". Como ya he comentado este ejemplo es algo absurdo pero es bastante explicativo. Podéis utilizar las funciones indexOf y substring a vuestro antojo depende de lo que queráis hacer, eso ya es la necesidad de cada uno, pero seguro os servirá de ayuda

Leer más......

Botón Agregar a favoritos para mi web

Hoy os dejo un sencillo código con el cual mostraremos un botón para que nuestros visitantes puedan añadir nuestra página web a sus favoritos.Este script solo funciona correctamente en Internet Explorer.

Lo primero que debemos hacer es copiar el siguiente código entre las etiquetas <head></head>:


function agregar(){
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="http://www.paginaweb.com/";
var titulo="Nombre del Sitio";
window.external.AddFavorite(url,titulo);
}
else {
if(navigator.appName == "Netscape")
alert ("Presione Crtl+D para agregar este sitio en sus Bookmarks");
}
}
</script>


Tendremos que modificar la parte del código donde pone www.pagina web por la dirección de vuestro sitio. También deberemos cambiar el Nombre del sitio por el nombre de nuestra web.

Por último pegaremos este código entre las etiquetas
<body></body>, donde queramos que aparezca el botón para añadir a favoritos:


<input type="button" value="Agregar a favoritos" onClick="javascript:agregar();">


Leer más......

Titulo de blogger en movimiento

En este post voy a explicar como con un simple JavaScript podemos cambiar el titulo de nuestra web de tal modo que tenga movimiento, es decir, que el texto que deseamos se mueva de derecha a izquierda como podemos ver en este blog.

Simplemente en Configuracion, Diseño, Elementos del blog añadimos un nuevo elemento HTML/JavaScript. En este nuevo elemento pegaremos el siguiente codigo:


<script language="JavaScript" type="text/JavaScript">

<!-- Mas trucos y recursos web en http://ayudaparamiweb.blogsport.com -->

var txt="Ayuda para mi web -- Todo lo necesario para triunfar con tu web o blog";

var refresco=null;

function titulo() {

document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

refresco=setTimeout("titulo()",200);}

titulo();

// -->

</script>

Por ultimo modificaremos el valor de la variable txt con el texto que queremos que se desplace en la barra del titulo. De esta forma daremos un aspecto mas dinámico a nuestra web.



Leer más......