Posicionamiento web

Como conseguir un buen posicionamiento web en los buscadores para eso hay que seguir algunos pasos como conseguir que otras webs de temática relacionada enlacen con tu web. Para ello es interesante realizar una búsqueda para aquellos términos que consideras deberían llevar tráfico a tu web y estudiar cuáles de ellos tienen un contenido complementario. Si por ejemplo quieres posicionarte por el término "peluquería madrid" puede ser interesante intentar conseguir backlinks de peluquerías de otras ciudades. La temática será similar .
# Darse de alta en directorios importantes como Dmoz y Yahoo!. Los directorios han perdido mucho interés en los buscadores pero siguen siendo un buen punto de partida para conseguir enlaces o un primer rastreo de tu web por los buscadores. Ambas requieren de un filtro humano para su inclusión lo que asegura la calidad de las web añadidas, pero también ralentiza y dificulta su inclusión.
# Registrarse y participar en foros, de preferencia en foros temáticos relacionados a la actividad de su página web. La frecuente participación tiene que ir acompañado de aporte real y valioso como para ser tomado en cuenta como un usuario calificado, el detalle del éxito para conseguir visitas y aumentar el posicionamiento es el enlace hacia su página web presentado en su firma.
# Escribir artículos en otros sitios web. Los artículos son un método muy poderoso para mejorar el posicionamiento y conseguir atraer visitas.Si puedes escribir unos artículos de un curso, de los trucos del día, la utilidad del producto de tu web.
# Ahora mismo hay cientos de redes sociales, por ejemplo Hi5, Facebook y, Orkut, en las cuales poder participar y obtener visitas de nuestros nuevos «amigos».
# Crear contenidos con textos que contienen frases con que buscan los usuarios web los servicios o productos de este sitio.
# Hacer nuestra web lo más accesible posible: limitar contenido en Flash, frames o JavaScript. Este tipo de contenido no permite el rastreo o seguimiento de la información por parte del robot en las diferentes páginas o secciones. Para ellos son un espacio plano por el cual no se puede navegar.
# Crear títulos únicos y descripciones pertinentes del contenido de cada página. Cada página es una tarjeta de presentación para el buscador. Los títulos y descripciones son puntos de partida para la identificación de los términos relevantes a lo largo de la web por los buscadores.
# Enlazar internamente las páginas de nuestro sitio de manera ordenada y clara. Un «mapa del sitio» (tanto el de Google como uno presente en el sitio) permitirá dar paso al buscador por las diferentes secciones del sitio en forma ordenada, mejorando su visibilidad.
# Actualizar la página con contenido original de calidad.
# Intercambiar contenido.
# Generar tráfico a través de SEM (Search Engine Marketing) o anuncios en buscadores con las palabras consideradas clave para la página web. Así mismo, generar tráfico a través de redes sociales y anuncios segmentados en las mismas y otras páginas de interés.
# Optimizar el tiempo de carga de una web para conseguir la reducción del ancho de banda .
siga estos pasos y vera que obtendra buenos resultados.

Read More

saber el tiempo vivido

Quieres saber cuanto tiempo has vivido? cuando ustedes pongan su fecha de nacimiento este le dira el día de la semana que nacistes y cuantos meses ,semanas,horas,minutos,segundos,y milisegundos han trancurrido hasta entonces y en que tiempo sera su proximo cumpleaños.


Hola disculpen el inconveniente con este codigo pero por algun motivo dejo de funcionar estoy trabajando en ello espero y solucionarlo pronto mientras pueden chequear en este sitio saber el tiempo vivido

muchas gracias por su visita.jorge

Read More

Numerar los comentarios en blogger

En esta entrada les muestro como numerar los comentarios es decir que cada comentario tenga su numero 1 2 3 etc, estos se van a mostrar entre mensaje y mensaje a la derecha
lo pueden modificar a sus gustos.
bueno para implementar esto y obtener el resultado vamos a ir a Diseño
Edición de HTML y Marcamos la casilla "expandir artilugios" una ves hecho eso vamos a buscar este codigo:
(les recomiendo usar Ctrl + F para buscar más rápido)

<b:loop values='data:post.comments' var='comment'>

una ves encontrado vamos a colocar dos codigos uno antes y uno despues
el primer codigo que vamos a colocar antes es este :

<script type='text/javascript'>var num_comm = 1;</script>

una ves puesto este antes pues vamos a colocar el siguiente que es despues

<a class='num_comments' expr:href='data:blog.url + &quot;#comment-&quot; + data:comment.anchorName' expr:id='&quot;comment-&quot; + data:comment.anchorName' expr:title='&quot;Comentario hecho por &quot; + data:comment.author'><script type='text/javascript'>document.write(num_comm); num_comm=num_comm+1 ;</script></a>

Una ves hecho eso les tendria que quedar así :

<script type='text/javascript'>var num_comm = 1;</script>

<b:loop values='data:post.comments' var='comment'>

<a class='num_comments' expr:href='data:blog.url + &quot;#comment-&quot; + data:comment.anchorName' expr:id='&quot;comment-&quot; + data:comment.anchorName' expr:title='&quot;Comentario hecho por &quot; + data:comment.author'><script type='text/javascript'>document.write(num_comm); num_comm=num_comm+1 ;</script></a>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

Ya verificado que haiga quedado igual vamos al ultimo paso busquemos lo siguiente:

]]></b:skin>

y arriba de este codigo ,antes colocamos esto:


.num_comments {
color:#0101DF;
float:right;
text-decoration:none;
font-size:24px;
}

este ultimo codigo es para darle estilo pueden modificar el color la posicion y el tamaño si necesitan los codigos de colores pueden encontrarlos aquí

bueno ya por ultimo paso es guardar los cambios y comprobar que te haya quedado bien, yo he hecho lo mismo en mi blog asi que el resultado final tambien lo puedes apreciar aquí en mi blog.

Read More

camara de seguridad para tu sitio

Con este gadget que les muestro hoy van a obtener el resultado de una cámara de

vigilancia en su blog claro es una imagen animada no vayan a pensar que es de verdad   no tiene ninguna utilidad pero es un poco divertida bueno esto es a gusto de cada cual a lo mejor a alguien no le gusta pero para gustos se hicieron los colores jajaja esta cámara va a estar ubicada en la parte de arriba a la derecha pero ustedes la pueden modificar la posición.
bueno para instalarla es muy simple van a diseño añadir un gadget después HTML/Javascript y pegan el siguiente código que le brindo.

<div style="text-align: center;"><a href="<br /> AQUI VA LA URL DE TU SITIO O LA QUE QUIERAS" style="right: 0px; position: fixed; top: 0px;"><img src="http://dl.dropbox.com/u/25944020/camarastubegif" /></a></div>

Disfrutenla

Read More

Personalizar la fecha de los post,(entradas) en tu blog

Con los siguientes pasos podremos hacer que las fechas de los post,entradas de nuestro blog se muestre dentro de un fondo que quieras mostrar con la medida 48 px por 49 px como el que yo tengo en mi blog, si no la quieres con un fondo igual te queda con un estilo diferente y mas hermoso de como la muestra blogger que es horizontal y por encima del titulo con los pasos que les boy a indicar hoy les va a quedar en miniatura y vertical arlado del titulo .

Este es un ejemplo sin imagen de fondo:

Y este va a ser el resultado con imagen:

Bueno despues de ver estos ejemplos vamos a cambiar el formato en que se muestra la fecha de nuestros posts. Para eso vamos a Diseño a Configuración y escogemos la opción Formato, una vez allí en "Formato de cabecera de la fecha" seleccionamos la penúltima opción que se nos presenta en el desplegable, ejemplo: 28 septiembre 2011, y guardamos configuración

Ya guadado el formato de la fecha vamos a ir a diseño despues a Edición de Html y expandimos los artilugios.
vamos a localizar la etiqueta </head> y justo antes vamos a colocar este script:


<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(dia+mes+anio);
}
</script>


Ahora vamos a localizar este codigo:


<h2 class='date-header'><data:post.dateHeader/></h2>

Una ves localizado lo vamos a sustituir por este codigo:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

Ya por ultímo vamos a darle un poco de estilo a la fecha y localizemos este codigo:

]]></b:skin>

Justo antes vamos a pegar este codigo a continuacion:

/* css para la-Fecha
-------------------- */

#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(AQUI VA LA URL DE LA IMAGEN) no-repeat;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 10px;
font-weight:bold;
}

.fecha_anio {
display: block;
font-size: 10px;
}

.fecha_dia {
margin: 2px 0 0 1px;
display: block;
font-size: 16px;
font-weight:bold;
}




Ahora guardamos los cambios y vemos que todo este bien.

Si no quieren fondo no pongan ninguna imagen y solo se les mostrara la fecha.

Espero y les haya gustado aquí les dejo algunas imagenes por si quieren usar ,den click derecho encima de la imagen  ver imagen y guardar como y se les guardara en su pc despues la pueden subir a un servidor de imagenes o archivos les recomiendo Dropbox obtinen la url la ponen donde va y es todo
o click derecho ver informacion de la imagen y copien la direccion url de la imagen.

Read More

Eliminar la LightBox de Blogger

Muchas personas en su blog le a aparecido la LightBox de Blogger, recientemente agregó blogger de manera automática y obligatoria la LightBox en las imágenes de todos sus blogs. la lightbox es una forma de resaltar las fotografías y será útil para las personas que les gusta o que la hallan útil, pero no en todos los casos es igual,para esas personas que no la quieren aqui les voy a brindar el codigo por JMiur.

Aquí tienen una imagen de la LightBox

Para implementarlo vayan a diseño ,Edición de HTML y pegen antes de </head>
el siguiente codígo :

<script type='text/javascript'><br /> //<![CDATA[<br /> function killLightbox() {<br /> var images = document.getElementsByTagName('img');<br /> for (var i = 0 ; i < images.length ; ++i) {<br /> images[i].onmouseover=function() { <br /> var html = this.parentNode.innerHTML; <br /> this.parentNode.innerHTML = html;<br /> this.onmouseover = null;<br /> }<br /> }<br /> }<br /> if (window.addEventListener) {<br /> window.addEventListener('load',killLightbox,undefined);<br /> } else {<br /> window.attachEvent('onload',killLightbox);<br /> }<br /> //]]><br /> </script>

Una ves puesto le damos a guardar y listo .

Read More

Imagenes rotativas con boton de start y stop

En este código vamos a usar la etiqueta marque que nos va a dar el efecto a estas imagenes ,rotandolas una detrás de otra también añadiéndoles otros atributos que necesitamos,vamos a ponerle la opción de empezar y parar recuerden pueden modificarlas a sus gustos como la velocidad en la que van a ir pasando la altura etc.
este código lo van a poner en donde ustedes quieran que se muestre no necesitamos poner nada en el head.
aquí pueden ver otras opciones de la etiqueta marque ver aquí

Donde dice:  

<center><a href="AQUI VA LA URL DE ENLACE" target="_blank"><img src="AQUI VA LA URL DE LA IMAGEN" alt="AQUI VA TITULO O INFORMACION" style="position: relative;" border="0" /></a>
</center>

Si quieres mostrar mas imagenes simplemente añade este codigo:

<center><a href="AQUI VA LA URL DE ENLACE" target="_blank"><img src="AQUI VA LA URL DE LA IMAGEN" alt="AQUI VA TITULO O INFORMACION" style="position: relative;" border="0" /></a>
</center>

<center><marquee behavior="scroll" style="position: relative;" id="mymarquee" align="center" direction="up" scrollamount="2" scrolldelay="5" width="200" height="280"><br /> <!--- code for http://fasetube.blogspot.com/---><br /> <center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images1.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images2.jpg" alt="'aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images3.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images4.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images5.jpg" alt="'aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images6.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images7.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images8.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a></center><br /> <br /> <br /> </marquee><br /> <input onclick="document.getElementById('mymarquee').start ();" value="Start" type="button" /> <input onclick="document.getElementById('mymarquee').stop ();" value="Stop" type="button" /></center>

Ejemplo:

Read More

Galeria de imagen con la opcíon ampliar II

Esta es una galería de imagen al pasar el mouse por encíma de ese texto se mostrara una imagen,Un título puede ser añadido a la imagen ampliada,estas las pueden modificar a sus gustos,medidas color de fondo del borde y imagenes disfrutenla.


Este va entre las etiquetas .<head><head>

<!-- Codes by tubetrucos.com --> <style type="text/css"> .gallerycontainer{ position: relative; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid blue; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 0; left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style>

Este va en el body donde ustedes quieren que se muestre.

<div class="gallerycontainer"> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src=" http://dl.dropbox.com/u/25944020/images11.jpg" /></span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src="http://dl.dropbox.com/u/25944020/images9.jpg" /></span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src=" http://dl.dropbox.com/u/25944020/images.jpg" /></span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src="http://dl.dropbox.com/u/25944020/jesus.jpg" /></span></a> </div>

Con este es lo mismo lo uníco que este tiene para mostrar un titulo o informacion hacerca de la imagen en la parte de abajo de la imagen van a usar el mismo codígo para el head que les brindo anteriormente ,este va en el body donde ustedes quieren que se muestre.

<div class="gallerycontainer"> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src=" http://dl.dropbox.com/u/25944020/images11.jpg" /><br />Aquí ponen el titulo que quieran</span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src="http://dl.dropbox.com/u/25944020/images9.jpg" /><br />Aquí ponen el titulo que quieran</span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src=" http://dl.dropbox.com/u/25944020/images.jpg" /><br />Aquí ponen el titulo que quieran</span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src="http://dl.dropbox.com/u/25944020/jesus.jpg" /><br />Aquí ponen el titulo que quieran</span></a> </div>

Ejemplo:

Aquí ponen el titulo
Aquí ponen el titulo
Aquí ponen el titulo
Aquí ponen el titulo

Ejemplo:

Aquí va el titulo
Aquí ponen el titulo que quieran
Aquí va el titulo
Aquí ponen el titulo que quieran
Aquí va el titulo
Aquí ponen el titulo que quieran
Aquí va el titulo
Aquí ponen el titulo que quieran

Read More

Galeria de imagen con la opcíon ampliar

Esta es una galería de imagen CSS con títulos, que muestra más grandes las imágenes dinámicamente cuando el mouse pasa sobre ellas. Un título puede ser añadido a la imagen ampliada,estas las puedes modificar a sus gustos,medidas color de fondo del borde y imagenes disfrutenla.

Este va entre las etiquetas .<head><head>

<!-- Codes by tubetrucos.com --> <style type="text/css"> .gallerycontainer{ position: relative; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid blue; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 0; left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style>

Este va en el body donde ustedes quieren que se muestre.

<div class="gallerycontainer"><br /> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images1.jpg" width="100px" height="66px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/images1.jpg" /><br /> Aquí pueden poner el titulo que quieran</span></a> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/ima.jpg" width="100px" height="66px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/ima.jpg" /><br /> Aquí pueden poner el titulo que quieran</span></a> <br /> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images6.jpg" width="100px" height="75px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/images6.jpg" /><br /> Aquí pueden poner el titulo que quieran</span></a> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images7.jpg" width="100px" height="70px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/images7.jpg" /><br /> Aquí pueden poner el titulo que quieran</span></a> <br /> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images4.jpg" width="100px" height="75px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/images4.jpg" /><br /> Aquí pueden poner el titulo que quieran</span></a> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images8.jpg " width="100px" height="70px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/images8.jpg " /><br /> Aquí pueden poner el titulo que quieran</span></a> <br /> </div>

Ejemplo:

Aquí pueden poner el titulo que quieran
Aquí pueden poner el titulo que quieran

Aquí pueden poner el titulo que quieran
Aquí pueden poner el titulo que quieran

Aquí pueden poner el titulo que quieran
Aquí pueden poner el titulo que quieran

Read More

Translucente scroller con texto y enlaces

Hoy les voy a brindar un código muy utilizado en los sitio web los cuales ponen algún texto rotativo con sus enlaces esta translucente scroller es configurable yo les voy a guiar donde poner el texto la url,enlace color de fondo el ancho y la altura y la velocidad con la que va a ir rotando el texto.

Donde dice:

var scroller_width='190px' este es el ancho
var scroller_height='80px' esta es la altura
var bgcolor='#FFDEAD' este es el color de fondo si necesitan codígo de color pueden ir aquí
var pause=3000 esta es la velocidad con la que se muestra el texto (3000=3 segundos)


scrollercontent[0]='AQUI VA TEXTO <a href="AQUI VA LA URL">AQUI VA EL ENLACE DE LA URL </a>AQUI VA MAS TEXTO'

scrollercontent[1]='AQUI VA TEXTO <a href="AQUI VA LA URL">AQUI VA EL ENLACE DE LA URL </a>AQUI VA MAS TEXTO'

scrollercontent[2]='AQUI VA TEXTO <a href="AQUI VA LA URL">AQUI VA EL ENLACE DE LA URL </a>AQUI VA MAS TEXTO'

Si quieren añadir mas simplemente añaden lo que les muestro anteriormente lo unico donde dice: scrollercontent[2] donde esta el 2 lo cambian por el 3 despues el 4 y así sucesivamente.

<script language> var scroller_width='190px' var scroller_height='80px' var bgcolor='#FFDEAD' var pause=4000 //selecciona el tiempo de uno al otro (4000=4 segundos) var textcolor='#FFDEAD' var aling='center' var scrollercontent=new Array() scrollercontent[0]='todos los <a href="http://tubetrucos.com">codigos html javascript </a>todo gratis!' scrollercontent[1]='todos los <a href="http://tubetrucos.com/">trucos blogger y web</a> aquí vas a encontrar todo lo que necesitas para tu sitio web o blog.' scrollercontent[2]='Con este <a href="http://tubetrucos.com/">descodificador html</a>descodifica tu codigo html o codificalo.' //Para mas HTML scripts, visita http://tubetrucos.com/ //////NO necesitas editar despues de aquí////// var ie4=document.all var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1 if (ie4||dom) document.write('<div style="position:relative;width:'+scroller_width+';height:'+scroller_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>') else if (document.layers){ document.write('<ilayer id=tickernsmain visibility=hide width='+scroller_width+' height='+scroller_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+scroller_width+' height='+scroller_height+' left=2 top=2>'+scrollercontent[0]+'</layer></ilayer>') } var curpos=scroller_height*(1) var degree=10 var curcanvas="canvas0" var curindex=0 var nextindex=1 function moveslide(){ if (curpos>0){ curpos=Math.max(curpos-degree,0) tempobj.style.top=curpos+"px" } else{ clearInterval(dropslide) if (crossobj.filters) crossobj.filters.alpha.opacity=100 else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=1 nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) tempobj.innerHTML=scrollercontent[curindex] nextindex=(nextindex<scrollercontent.length-1)? nextindex+1 : 0 setTimeout("rotateslide()",pause) } } function rotateslide(){ if (ie4||dom){ resetit(curcanvas) crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ if (crossobj.filters) document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20 else if (crossobj.style.MozOpacity) document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2 var temp='setInterval("moveslide()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else if (document.layers){ crossobj.document.write(scrollercontent[curindex]) crossobj.document.close() } curindex=(curindex<scrollercontent.length-1)? curindex+1 : 0 } function resetit(what){ curpos=parseInt(scroller_height)*(1) var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) crossobj.style.top=curpos+"px" } function startit(){ crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub if (ie4||dom){ crossobj.innerHTML=scrollercontent[curindex] rotateslide() } else{ document.tickernsmain.visibility='show' curindex++ setInterval("rotateslide()",pause) } } if (ie4||dom||document.layers) window.onload=startit </script>

Read More

Deshabilita el botón derecho y no permite seleccionar

Muchas personas no les gusta que alguien venga y les copie cosas de su sitio porque después de tanto esfuerzo que te cuesta diseñarlo esta duro verdad,el que tenga un sitio personal y no quiere compartir ningún código con nadie y quisiera evitar que otra persona le copie o le seleccione a continuación le voy a brindar ese código el cual nadie puede seleccionar ni dar click derecho para poderte copiar.
Nota: también existe una manera pero es mas complicada porque tendrías que ir al código completo de la pagina y pueden usar Ctrl+F y buscan lo que necesitan pero mucho no lo saben.

Bueno para implementar este codigo vamos a Diseño>edición HTML>expandimos artilugios
para busqueda mas rapido usamos Ctrl+F y buscamos </head> y justo antes pegamos el siguiente

<script type='text/javascript'>
function inhabilitar(){

return false;
}
document.oncontextmenu=inhabilitar;

function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function (&quot;return false&quot;);
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>



Una ves puesto el codigo guardamos plantilla y es todo recuerden que compartir y comentar no cuesta nada si pueden y creen que esta información es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código lo podrán ver muchas gracias.

Read More

Personalizar "entradas antiguas" "home" "entradas mas recientes" con imagen

Hay muchas personas que en su sitio al final de cada entrada tienen los link de "Entradas mas recientes" "Página principal" y "Entradas mas antiguas" pero lo tienen simplemente con solo letras si lo que quieren es personalizarlo y ponerle imagenes en lugar de palabras pues aquí les muestro como hacerlo de la forma mas sencilla,en muchas plantillas ya biene estas opciones pero como les dije con solo palabras,ahora vamos a personalizarlo.
Recuerden siempre guardar una copia de seguridad antes de empezar con los cambios.

1-Lo primero que vamos a hacer es ir a diseño a Edición de HTML.
2-Activa la opción "Expandir plantillas de artilugios" y en el código busquemos lo siguiente:

o usen Ctrl+F y usen cualquier linea del código para encontrarlo mas rápido siempre asegúrese de que coincida lo demás.

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link'

expr:href='data:newerPageUrl' expr:id='data:widget.instanceId +

&quot;_blog-pager-newer-link&quot;'

expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'

expr:id='data:widget.instanceId + &quot;_blog-pager-older-

link&quot;'

expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link'

expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link'

expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>



Estos códigos corresponden a estos enlaces de navegación.

<data:newerPageTitle/> – "Entrada más reciente"
<data:olderPageTitle/> – "Entradas antiguas"
<data:homeMsg/> – "Página principal"



Para cambiar el texto por otro de su agrado sólo remplazamos la etiqueta correspondiente a cada enlace por nuestro texto, un ejemplo, para el link de entradas recientes sustituimos completamente "<data:newerPageTitle/>" por "entradas más recientes".

Para cambiar el texto por una imagen ejemplo, para el link de entradas recientes sustituimos completamente <data:newerPageTitle/> por
<img alt='data:newerPageTitle' src='AQUÍ VA LA DIRECCIÓN DE LA IMAGEN' />
sustituimos completamente <data:olderPageTitle/> por
<img alt='data:olderPageTitle' src='AQUÍ VA LA DIRECCIÓN DE LA IMAGEN'/>
sustituimos completamente <data:homeMsg/> por
<img alt='data:homeMsg' src='AQUÍ VA LA DIRECCIÓN DE LA IMAGEN'/>

Una ves encontrado ese código lo van a sustituir por este que les brindo ya con imagen simplemente si no les gusta la imagen la cambian .


<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img alt='data:newerPageTitle' src='http://dl.dropbox.com/u/25944020/left.gif'/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img alt='data:olderPageTitle' src='http://dl.dropbox.com/u/25944020/right.gif'/> </a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img alt='data:homeMsg' src='http://dl.dropbox.com/u/25944020/casatube.gif1.gif'/> </a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>


Una ves hecho eso le dan a guardar y es todo disfruten ese nuevo diseño para su plantilla.
El resultado lo pueden ver al final de cada post de este sitio .asi les va quedar a ustedes.

Read More

Desabilitar botón derecho "con mensaje"

Con este código que les brindo a continuación lo que pueden hacer es inabilitar el botón derecho y el que intente hacerlo le saldrá un mensaje en pantalla el cual ustedes lo pueden modificar a sus gustos.
Donde dice: Función desabilitada.Perdonen las molestias lo pueden modificar por las palabras que ustedes quieran.

Nota: con esta función desabilita el botón derecho pero el que quiera copiarte simplemente seleccionando y arrastrando ya te copia.


<script language="JavaScript">
<!--http://www.tubetrucos.com/-->
<!--
function inhabilitar(){
alert ("Función desabilitada.Perdonen las molestias")
return false
}
document.oncontextmenu=inhabilitar
// -->
</script>

Read More

Cursor con imagen

Con este código que les brindo a continuación lo que vamos a obtener es que una imagen siga al cursor,mouse,puntero etc como le llamen con cualquier movimiento que haga.este código lo vamos a colocar entre las etiqueta <body></body>

Donde dice: var trailimage=["AQUI VA LA IMAGEN Y A CONTINUACIÓN EL ANCHO Y LA ALTURA",30,30]
         &nb
sp;         var displayduration=0      ES EL TIEMPO QUE QUIERES QUE DURE LA IMAGEN SIGUIENDO AL CURSOR 0 ES PARA SIEMPRE.

<script type="text/javascript">

<!---http://www.tubetrucos.com/--->

var trailimage=["http://dl.dropbox.com/u/25944020/baseball.gif",35,35] //image path, plus width and height
var offsetfrommouse=[10,-20] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0 //duration in seconds image should remain visible. 0 for always.

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:0px;width:1px;height:1px"><img src="'+trailimage[0]+'" border="0" width="'+trailimage[1]+'px" height="'+trailimage[2]+'px"></div>')

function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else if (document.all)
return document.all.trailimagid.style
}

function truebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail(){
gettrailobj().visibility="hidden"
document.onmousemove=""

}

function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
if (typeof e != "undefined"){
xcoord+=e.pageX
ycoord+=e.pageY
}
else if (typeof window.event !="undefined"){
xcoord+=truebody().scrollLeft+event.clientX
ycoord+=truebody().scrollTop+event.clientY
}
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)
gettrailobj().display="none"
else
gettrailobj().display=""
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}

document.onmousemove=followmouse

if (displayduration>0)
setTimeout("hidetrail()", displayduration*1000)

</script>

Read More

fuegos artificiales en la web

Con este código ya pueden celebrar en su sitio web o blog porque hace el efecto de fuegos artificiales,fireworks por toda la web
pueden ver el ejemplo en pantalla.este codigo lo deben de ubicar entre las etiquetas <body></body> disfrutenlo.

<script type="text/javascript">
var bits=100;
var intensity=7;
var speed=20;
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");


var dx, xpos, ypos, bangheight;
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var decay=new Array();
var colour=0;
var swide=800;
var shigh=600;
function write_fire() {
var b, s;
b=document.createElement("div");
s=b.style;
s.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
b.appendChild(div("lg", 3, 4));
b.appendChild(div("tg", 2, 3));
for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));
}
function div(id, w, h) {
var d=document.createElement("div");
d.style.position="absolute";
d.style.overflow="hidden";
d.style.width=w+"px";
d.style.height=h+"px";
d.setAttribute("id", id);
return (d);
}
function bang() {
var i, X, Y, Z, A=0;
for (i=0; i<bits; i++) {
X=Math.round(Xpos[i]);
Y=Math.round(Ypos[i]);
Z=document.getElementById("bg"+i).style;
if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {
Z.left=X+"px";
Z.top=Y+"px";
}
if ((decay[i]-=1)>14) {
Z.width="3px";
Z.height="3px";
}
else if (decay[i]>7) {
Z.width="2px";
Z.height="2px";
}
else if (decay[i]>3) {
Z.width="1px";
Z.height="1px";
}
else if (++A) Z.visibility="hidden";
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity);
}
if (A!=bits) setTimeout("bang()", speed);
}

function stepthrough() {
var i, Z;
var oldx=xpos;
var oldy=ypos;
xpos+=dx;
ypos-=4;
if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {
for (i=0; i<bits; i++) {
Xpos[i]=xpos;
Ypos[i]=ypos;
dY[i]=(Math.random()-0.5)*intensity;
dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;
decay[i]=Math.floor((Math.random()*16)+16);
Z=document.getElementById("bg"+i).style;
Z.backgroundColor=colours[colour];
Z.visibility="visible";
}
bang();
launch();
}
document.getElementById("lg").style.left=xpos+"px";
document.getElementById("lg").style.top=ypos+"px";
document.getElementById("tg").style.left=oldx+"px";
document.getElementById("tg").style.top=oldy+"px";
}
function launch() {
colour=Math.floor(Math.random()*colours.length);
xpos=Math.round((0.5+Math.random())*swide*0.5);
ypos=shigh-5;
dx=(Math.random()-0.5)*4;
bangheight=Math.round((0.5+Math.random())*shigh*0.4);
document.getElementById("lg").style.backgroundColor=colours[colour];
document.getElementById("tg").style.backgroundColor=colours[colour];
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
window.onload=function() { if (document.getElementById) {
set_width();
write_fire();
launch();
setInterval('stepthrough()', speed);
}}
</script>

Read More

Pelotas que siguen al cursor

Con este código javascripts van a obtener el resultado de unas pelotas que de una forma elásticas siguen al cursor,mouse a donde quiera que se mueva,para implementarlo simplemente lo van a colocar entre las etiqueta <body></body> y van a obtener el resultado que ven en pantalla. para poner su imagen donde dice:     http://dl.dropbox.com/u/25944020/football.gif        lo remplazan por la imagen que quieran poner

<div id="dot0" style="position: absolute; visibility: hidden;"> </div> <div 0="" 30;="" height:="" id="dot1" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <div 0="" 30;="" height:="" id="dot2" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <div 0="" 30;="" height:="" id="dot3" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <div 0="" 30;="" height:="" id="dot4" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <div 0="" 30;="" height:="" id="dot5" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <div 0="" 30;="" height:="" id="dot6" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <script type="text/javascript"> <!-- http://www.tubetrucos.com/ --> <!-- Begin var nDots = 7; if (document.all&&window.print) document.body.style.cssText="overflow-x:hidden;overflow-y:scroll" var Xpos = 0; var Ypos = 0; var DELTAT = .01; var SEGLEN = 10; var SPRINGK = 10; var MASS = 1; var GRAVITY = 50; var RESISTANCE = 10; var STOPVEL = 0.1; var STOPACC = 0.1; var DOTSIZE = 35; var BOUNCE = 0.75; var isNetscape = navigator.appName=="Netscape"; var followmouse = true; var dots = new Array(); init(); function init() { var i = 0; for (i = 0; i < nDots; i++) { dots[i] = new dot(i); } for (i = 0; i < nDots; i++) { dots[i].obj.left = dots[i].X + "px"; dots[i].obj.top = dots[i].Y + "px"; } if (isNetscape) { startanimate(); } else { setTimeout("startanimate()", 20); } } function dot(i) { this.X = Xpos; this.Y = Ypos; this.dx = 0; this.dy = 0; this.obj = eval("document.getElementById('dot" + i + "').style"); } document.onmousemove = MoveHandler; function startanimate() { setInterval("animate()", 20); } function MoveHandler(e) { if (!e) { Xpos = window.event.x + document.body.scrollLeft; Ypos = window.event.y + document.body.scrollTop; } else { Xpos = e.pageX; Ypos = e.pageY; } } function vec(X, Y) { this.X = X; this.Y = Y; } function springForce(i, j, spring) { var dx = (dots[i].X - dots[j].X); var dy = (dots[i].Y - dots[j].Y); var len = Math.sqrt(dx*dx + dy*dy); if (len > SEGLEN) { var springF = SPRINGK * (len - SEGLEN); spring.X += (dx / len) * springF; spring.Y += (dy / len) * springF; } } function animate() { var start = 0; if (followmouse) { dots[0].X = Xpos; dots[0].Y = Ypos; start = 1; } for (i = start ; i < nDots; i++ ) { var spring = new vec(0, 0); if (i > 0) { springForce(i-1, i, spring); } if (i < (nDots - 1)) { springForce(i+1, i, spring); } var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE); var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY); dots[i].dx += (DELTAT * accel.X); dots[i].dy += (DELTAT * accel.Y); if (Math.abs(dots[i].dx) < STOPVEL && Math.abs(dots[i].dy) < STOPVEL && Math.abs(accel.X) < STOPACC && Math.abs(accel.Y) < STOPACC) { dots[i].dx = 0; dots[i].dy = 0; } dots[i].X += dots[i].dx; dots[i].Y += dots[i].dy; var height, width; if (isNetscape) { height = window.innerHeight + document.scrollTop; width = window.innerWidth + document.scrollLeft; } else { height = document.body.clientHeight + document.body.scrollTop; width = document.body.clientWidth + document.body.scrollLeft; } if (dots[i].Y >= height - DOTSIZE - 1) { if (dots[i].dy > 0) { dots[i].dy = BOUNCE * -dots[i].dy; } dots[i].Y = height - DOTSIZE - 1; } if (dots[i].X >= width - DOTSIZE) { if (dots[i].dx > 0) { dots[i].dx = BOUNCE * -dots[i].dx; } dots[i].X = width - DOTSIZE - 1; } if (dots[i].X < 0) { if (dots[i].dx < 0) { dots[i].dx = BOUNCE * -dots[i].dx; } dots[i].X = 0; } dots[i].obj.left = dots[i].X + "px"; dots[i].obj.top = dots[i].Y + "px"; } } // End --> </script>

Read More

Botones para plantillas

Aquí les dejo estos botoncitos los cuales los pueden agregar a sus plantillas simplemente le dan arriba del que quieren un clic derecho después ver imagen y guardar imagen como y se les guardara la imagen en su pc si después la quieren subir a un servidor pueden usar Dropbox es gratuito y nos brinda buen espacio para fotos archivos y mas. dropbox.com/

Read More