Tips y Trucos Blogger
Los tips y trucos que puede usar el blogger en el blog, hacen que cada blog sea distinto de otros, ofreciendo comodidad o añadiendo valor agregado al blog. Muchos de los trucos son sencillos, mientras que otros son un tanto más complejos de ser llevados adelante, según los conocimientos del blogger y del efecto que queramos obtener.Imagen flotante en Blogger u otro gestor de contenidos
El truco blogger de hoy es bastante sencillo e interesante, se trata de establecer una imagen flotante del lado superior derecho, efecto similar a la ventana flotante que vimos tiempo atrás.Código Blogspot
Debemos acceder al escritorio - diseño y en la edición html de la plantilla buscamos la etiqueta </head> e introducimos este código.
<a href='http://URL DE TU BLOG.blogspot.com/' style='display:scroll;position:fixed;bottom:0px;right:0px;'><img src='URL DE TU IMAGEN'/>
Lo que nos resta por hacer es modificar por nuestra url donde dice urldetublog.blogspot.com, al igual que la imagen.
Esperamos que te haya gustado este truco blogspot del día de hoy.
Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)
Foto Vía Decora Blog
30/07/2010
Trucos Blogger: tooltips con css
Los trucos visuales hacen que el blog gane en adeptos a los que les gusta la parte gráfica. Si bien muchas veces los trucos nos afectan en otras cosas, como la validación del sitio por ejemplo, no debemos dejarlos de tener en cuenta, ya que pueden ser muy útiles a los ojos de los visitantes.
El truco de hoy es insertar un tooltip (caja con texto descriptivo que se tiene al pasar el mouse sobre un objeto o texto) con css. Este truco fué creado por la gente de Ciudad Blogger, y el cual considero que es muy interesante.
Bien para generar nuestro tooltip destacado, debemos acceder al escritorio y allí dirigirnos a la pestaña de diseño > edición de html. Una vez allí buscaremos el siguiente código: ]]></b:skin>. Antes de ese código deberemos pegar lo siguiente:
a.tooltip {
position: relative;
z-index: 24;
cursor: help;
text-decoration: underline;
}
a.tooltip:hover {z-index: 25; text-decoration: none;}
a.tooltip span {display: none}
a.tooltip:hover span { /* Estilos de la descripción */
display: block;
position: absolute;
top: 2em; left: 2em;
width: 16em;
border: 1px solid #0cf;
background: #ECE0D8;
color: #000;
text-align: center;
}
En background puedes poner el código de otro color que se ajuste a tu blog, o incluso puedes añadir una imagen de fondo insertando este código en lugar del código del color:
url("http://dirección-de-la-imagen.jpg") (esto iría en remplazo de #ECE0D8)
Ahora para finalizar solo falta añadir un código extra en nuestras entradas, para cada vez que deseemos utilizar este tooltip en las entradas:
<a class="tooltip">Pasa el cursor aquí<span>Mensaje mostrado</span></a>
Como vemos es un truco muy sencillo y que puede darle un toque especial a nuestros blogs.
Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)
14/07/2010
08/07/2010
Como agregar la opción de responder a un comentario
Al mantener un blog actualizado y con buena información, éste se hace más popular y con ello aparecen los comentarios de los usuarios sobre cada tema, algo que como autores de una entrada nos hace sentir muy bien, ya que a alguien le ha interesado la misma.
Al tiempo que no podemos dejar de no contestar esos comentarios, por varias razones, pero una de ellas es por que probablemente quien comentó esté esperando una respuesta de nuestra parte.
Si bien el blogger debe saber como reaccionar ante los diversos tipos de comentarios que se pueden presentar, a veces es mejor responder un comentario citándolo, algo común que s se puede observar en los foros.
Para lograr este truco en Blogger debemos:
- Obtener el código ID del blog: para esto debemos acceder a la sección de diseño y luego mirar la barra de direcciones del navegador allí veremos algo así como http://www.blogger.com/rearrange?blogID=7857555404733341038 siendo estos números los que nos interesan.
- Buscar alguna de las siguientes etiquetas (habiendo expandido los widgets): <data:commentPostedByMsg/> o <data:comment.timestamp/>
- Insertar el siguiente código luego de la etiqueta encontrada en el punto anterior:
El número resaltado en rojo, es el que se debe reemplazar con el número de ID obtenido en el punto 1.
Espero que les guste este sencillo truco para Blogger que me pareció muy bueno.
Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)
01/07/2010
Trucos para tu blog: texto deslizante en tu entrada
Los trucos que podemos aplicar en nuestro blog para hacerlo más útil, vistoso y distinguido, son realmente bastantes, y en nuestra sección de Tips y Trucos encontrarás varias ideas para poder aplicar a tu blog.
Y hoy veremos un truco, algo viejo ya, el cual es muy sencillo de emplear y que lo podemos utilizar en el blog directamente, o en una sola entrada. La sencillez de uso, radica en que es un simple código html, el cual no requiere de grandes o complicadas modificaciones en la plantilla blogger.
Si lo vamos a implementar en una entrada en particular, bastará con que nos vayamos a la pestaña de edición de html y copiemos el código con nuestro texto, ejemplo:
Si queremos añadirlo al blog directamente, pues nos será suficiente con que añadamos un widget a nuestra plantilla, o modificar desde el editor de la plantilla.
Código:
<marquee> Aquí viene el texto que deseas</marquee>
A ese texto que incluiremos ahí le podemos dar formato html o incluso añadir enlaces con la etiqueta <a>
Como vemos es muy sencillo de aplicar y da un toque especial a una entrada en particular.
Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)
Si queremos añadirlo al blog directamente, pues nos será suficiente con que añadamos un widget a nuestra plantilla, o modificar desde el editor de la plantilla.
Código:
<marquee> Aquí viene el texto que deseas</marquee>
A ese texto que incluiremos ahí le podemos dar formato html o incluso añadir enlaces con la etiqueta <a>
Como vemos es muy sencillo de aplicar y da un toque especial a una entrada en particular.
Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)
28/05/2010
Google Fonts: fuentes para tu blog
Google no deja de avanzar cada día un poco más, y ahora nos ofrece una interesante aplicación para nuestros blogs, que es la de añadir fuentes especiales a parte de nuestro texto, con lo cual lograr efectos distintivos.
Al añadir textos con fuentes distintas a las tradicionales (arial, helvética, etcétera) podemos lograr resaltar ciertas frases o comentarios, quedándonos la seguridad de que nuestros visitantes podrán ver correctamente en sus navegadores, pese a no tener instalados ese tipo de fuente.
Antes este efecto tenía que ser recreado bajo animaciones en flash o con imágenes, pero ahora es mucho más sencillo que eso, si somos organizados claro.
Para poder aprovechar el beneficio de Google Font Library debemos seguir los siguientes pasos:
- Acceder al directorio de fuentes y escoger la que nos gusta.
- Luego escoger el tamaño de la fuente que nos interesa.
- Ir a la pestaña Get the Code (obtener el código).
- Accedemos a la edición de html, en el escritorio > diseño.
- Antes de la etiqueta </head> debemos pegar el código:
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
- Luego en el código CSS de tu plantilla o theme busca el elemento en que quieres que aparezca este tipo de fuente e inserta la tipografía seleccionada, como primera alternativa, de forma tal que quede algo similar a: h1 { font-family: 'Tangerine', arial, serif; }
- Listo, cada vez que utilices ese elemento, en nuestro caso el h1, aparecerá esta nueva tipografía.
Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)
15/05/2010
Como hacer enlaces internos en tus post
La usabilidad y la comodidad deben ser aspectos que tenemos que tener en cuenta a la hora de crear nuestras entradas. Debemos tratar de ofrecerle al visitante, no solo un buen contenido, sino que además tenemos que brindarle el mejor confort.Una forma de lograrlo es insertando enlaces hacia puntos internos de nuestro artículo, a forma de que le quede a solo un click el traslado interno en el post, al usuario.Esto es especialmente útil cuando nuestro artículo:está dividido en secciones, ycuando su longitud es superior a las 200...
06/05/2010
Barra inferior personalizada
En Ayuda para Blogs nos encanta poder ofrecerte novedades a diario: plantillas blogger personalizadas, tutoriales, trucos, sugerencias etcétera.
Está en nosotros que tu blog sea cada día más vistoso y con mayor funcionalidad para tus lectores. En esta ocasión te presentamos la primera versión de nuestra barra inferior personalizable.
Hemos insertado en la barra una serie de botones útiles:
- En la zona izquierda de la barra se encuentra nuestro link, no lo puedes borrar es la única condición que ponemos para que uses esta barra en tu sitio.
- En el centro de la barra encontrarás los botones de cantidad de usuarios online, de suscripción al feed, para que te sigan en Twitter o para que puedan imprimir el contenido del blog.
- Sobre el costado derecho hemos dejado limpio para que tu puedas insertar lo que te parezca, como por ejemplo publicidad: la venta de algún enlace bien vistoso o un banner (no muy alto height="24")
]]></b:skin> </head>
deberás insertar este código:
#taskbar{Bien ahora buscas la etiqueta </body> e insertas este código:
height:25px;
width:100%;
margin:auto;
position: fixed;
bottom: 0;
z-index: 99;
}
#taskbar #container{
background-color:#E5E5E5;
border:1px solid #B5B5B5;
display:block;
margin-left:15px;
margin-right:15px;
height:25px;
}
/*------- blocks btns --------*/
#taskbar #container .block-left{
position:relative;
float: left;
width:10%;
height:25px;
border-right:1px solid #B5B5B5;
}
#taskbar #container .block-center{
position: relative;
float: left;
width: 50%;
height:25px;
border-right:1px solid #B5B5B5;
}
#taskbar #container .block-right{
position: relative;
float: left;
width: 25%;
height:25px;
border-right:1px solid #B5B5B5;
}
/*------- btns --------*/
#taskbar #container .btns{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
padding:3px;
display:inline-block;
vertical-align:middle;
line-height:14px;
}
#taskbar #container .btns:hover{
background-color:#F4F4F4;
cursor:pointer;
}
/* ---- align image -------*/
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
margin: 0 0 2px 5px;
display: inline;
}
img.alignleft {
margin: 0 5px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
<div id='taskbar'>
<!--Creado por Juan para Vida Blogger versión 1.0 - se permite su uso dejando el link inicial de Vida Blogger a forma de reconocimiento-->
<div id='container'>
<div class='block-left'>
<strong> <a class='btns' href='http://www.vidablogger.com.ar' title='Ayuda para Blogs'>Ayuda para Blogs</a></strong>
</div>
<div class='block-center'>
<script src='http://widgets.amung.us/classic.js' type='text/javascript'/><script type='text/javascript'>WAU_classic('fp0pgk72cozl')</script>
<a class='btns' href='http://www.vidablogger.com.ar/feed/'><img alt='Feed' class='alignleft' height='24' src='http://i44.tinypic.com/draxow.jpg' width='24'/>Suscríbete Gratis</a>
<a class='btns' href='http://www.twitter.com/vidablogger'><img alt='aplicacion' class='alignleft' src='http://i41.tinypic.com/sphn5e.jpg' height='24' width='24'/>Twitter</a>
<a class='btns' href='' onclick='Window.print();'>Imprimir</a>
</div>
<div class='block-right'>
<a class='btns' href='http://www.sitio.com'><img alt='publicidad' class='alignleft' height='24' src='http://i44.tinypic.com/draxow.jpg' width='24'/>Posible espacio publicitario</a>
</div>
</div>
</div>
Deberás modificar por el nombre de tu sitio, o el que corresponda, lo resaltado en rojo. Si tienes alguna sugerencia para añadirle a la barra, ¡dilo en los comentarios!
Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)
05/05/2010
Como mostrar la foto del autor en Blogger
Uno de los trucos más interesantes para tu blog puede ser el de insertar una foto o imagen del autor del post o entrada al inicio o al final del artículo.
Este truco logra que el lector sienta más confianza hacia el blog, al ver una fotografía, por más que sea pequeña, de una persona.
Si bien sabemos que las imágenes en los comentarios y el blog, como cualquier otro elemento, enlentecen la carga del blog en el navegador del visitante, podemos optimizarla a fin de lograr buenos resultados.
Para lograr este truco debemos ir al Escritorio>Diseño>Edición de Html y buscar las siguientes etiquetas:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
Seguida de esta última etiqueta debemos agregar el siguiente código:
<div style="clear:both"> <dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'> </dt> <b:if cond='data:comment.authorUrl'> <script type="text/javascript"> if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':'<data:comment.authorUrl/>'}); </script> <b:else/> <script type="text/javascript"> if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':''}); </script> </b:if><dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-" + data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt><b:if cond='data:comment.author == data:post.author'> <dd class='comment-body-author'> <p></p> </dd> <b:else/><dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd></b:if><dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd></div></b:loop> </dl>
Luego debemos insertar este código antes de la etiqueta </body>
<script type='text/javascript'>
//<![CDATA[
function commentPhotoDo() {
var tag;
for(var i = 0; i < commentPhotoIds.length; i++) {
tag = document.createElement('script');
tag.type = 'text/javascript';
tag.src = 'http://scrape.singpolyma.net/avatar.php?maxwidth=70&url='+encodeURIComponent(commentPhotoIds[i].url)+'&id='+encodeURIComponent(commentPhotoIds[i].id)+'&defaultimage='+encodeURIComponent('http://img139.imageshack.us/img139/1011/defaultavatarad7.png');
document.body.appendChild(tag);
}//end for var i in commentPhotoIds
}//end function commentPhotoDo
if(typeof(commentPhotoIds) != "undefined") commentPhotoDo();
//]]>
</script>
Debemos cambiar la url de la imagen (resaltado en rojo) por la de nuestra imagen.
Guardamos los cambios cerramos y listo. Como siempre, antes de cualquier cambio, debemos guardar una copia de seguridad de nuestra plantilla.
Consejos para optimizar nuestra imagen:
- No es necesario que nuestra foto o imagen (preferentemente foto no avatar) sea muy grande, quizás de 32x32 píxeles sea suficiente.
- Es recomendable utilizar herramientas de diseño de imagen como Gimp o Pixrl (las utilizadas para crear logos) para reducir la calidad de la imagen.
- Nuestra foto debe ir acorde al blog: si es un informativo la foto deberá ser bastante formal. Si es un blog personal, la informalidad se hará más notoria.
Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)
04/05/2010
Consejos básicos para un blog más visible - II Parte
En la entrada anterior comenzamos a ver algunas sugerencias para que nuestro blog sea más visible.
Entre esas sugerencias mencionamos la calidad del contenido y evitar o corregir los errores en el código html.
Consejos para aumentar la visibilidad del blog II
- Vinculación interna: en cada post que hacemos es importante enlazar entradas anteriores u otras secciones del blog. Esto nos favorece tanto para los buscadores, que pueden indexar mejor todas nuestras páginas y les dá mayor relevancia (aunque sea minúscula), y a los lectores ya que pueden seguir leyendo contenido relacionado sin salir del blog, así reducimos el porcentaje de abandono o rebote del sitio. Uno de los mejores sitios que hace esto es Wikipedia.
- Sitemap: un mapa de nuestro blog no solo es útil para los buscadores, a nuestros lectores les puede interesar tener un paneo de la estructura del blog. Quizás estén buscado un sector específico del mismo.
- Aplicar las técnicas SEO: en el blog vemos muchas sugerencias y técnicas SEO que son necesarias implementarlas para lograr una mayor visibilidad del blog.
Como siempre debemos pensar en el lugar del lector, ellos son en definitiva quienes califican al blog, y para quienes escribimos. Debemos estudiar y analizar que es lo mejor para ellos, que querrán leer y de que forma podemos lograrlo.
Para leer el primer artículo sobre visibilidad del blog
Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)
Consejos básicos para un blog más visible
Los bloggers muchas veces, en nuestro afán de tener gran cantidad de contenido en nuestro blog, nos olividamos de pequeños detalles que hacen que nuestro blog sea más vistoso o con mejor "visibilidad" a los ojos de los lectores, y en algunos casos a los ojos de los buscadores.
Debemos recordar que
Un blog más visible, es un blog con más visitas y que muy probablemente retornen.
No debemos olvidarnos de que si nuestro blog carece de calidad, las visitas optarán pronto por ir en búsqueda de otro contenido, lo que significa un alto nivel de rebote hacia nuestro blog.
Consejos para mejorar la vistosidad del blog
- Contenido de Calidad: lo que escribamos que sea fundamentado y con base en hechos. Eso nos dará la seguridad de no exponer nuestro blog a duras críticas. Ojo, siempre habrá alguien que nos critique, pero si nosotros tenemos fundamentado nuestro texto, el que deberá fundamentar es quien opine en contra, existen muchos puntos de vista para una misma verdad.
- Validar Código Html: una de las cosas más importantes es tener nuestro código limpio de errores. W3 nos facilita un validador de código para comprobar y corregir los errores del código html.
- Uso Correcto de las etiquetas H: todos sabemos que es importante para la optimización del blog el uso de negritas y de las etiquetas h1, h2, h3, y sucesivas. Sin embargo no debemos abusar, sino que tenemos que usarlas con lógica: primero la etiqueta h1, luego la etiqueta h2 y así sucesivamente. Si mezclas tu blog será un desorden único, y los lectores no aprecian esto.
Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)
03/05/2010
Palabras que siguen a tu cursor
Seguramente muchas veces has visitado algún blog y te encontraste que cuando estas en ellos, al mover tu cursor lo siguen una fila de letritas (que forman una frase). Seguramente te ha llamado la atención y te entretuviste un ratito girando el cursor por toda la pantalla para ver los movimientos de las palabras. La verdad que es muy tentador hacer esto.Hay muchos efectos de textos, algunos que paran su recorrido cuando el cursor queda quieto, algunos con letras parpadeantes, y otros como el que les traigo hoy en el que el texto no se queda quieto, es decir te sigue por toda la pantalla y cuando tu cursor se queda quieto, las palabras comienzan a girar alrededor de el .
Si quieres colocar uno igual en tu blog, es muy fácil solo debes copiar el siguiente codigo htmly pégalo en tu blog en la parte de “Diseño” pero en HTML.Busca la etiquta < /head > y pegalo antes.
Puedes modificar el código a tu gusto, color de texto, fuente tipográfica, velocidades, espacio entre letras, pero si quieres hacerlo mas simple, solo escribe tu mensaje y listo.
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial; (Cambiar Fuente)
color: #000; (Cambiar color)
/* End Optional */
/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
// Your message here (ESCRIBE TU MENSAJE)
var msg = "Dynamic Drive! Scripts & More!";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>
<!--[if !supportLineBreakNewLine]-->Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)
No hay comentarios:
Publicar un comentario