"TINKERMASTER " diseños para Photoshop

tinkermaster

Codigos HTML parte II
  

IMAGEN DE FONDO: Con este codigo podran poner un fondo de pantalla en su web que no se mueve es decir que al bajar por el menu dara el efecto de que la imagen no se mueve, como el que pueden ver en mi pagina web solo copienlo en el block de notas y pongan el codigo url de la imagen donde les indicara y luego solo copienlo en texto por encima de la pagina.
 
<style>
body
{
background-image: url(aki va el url de la imagen);
background-repeat: no-repeat;
background-attachment: fixed
}
</style>
   


CENTRAR TU PAGINA: Con este codigo podran centrar su pagina web es decir para que les quede en el mero centro de la pantalla solo copienlo en texto por encima de la pagina en editar diseño.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/www.w3.org/1999/xhtml"> <div style="width:900px; position: relative; margin-left: auto; margin-right: auto;">



   


CAJAS DE TEXTO: Con este codigo podran poner cajas de texto como las que ven aqui solo deben de copiar el codigo y pegarlo en la fuente HTML donde deseen que aparezca la caja de texto.
<div align="center">
<div style="background-color:white; border-color: black; border-style: solid; color: black; height: 100px; overflow: scroll; width: 250px;">
<span style="color: black; font-family: tahoma; font-size: 85%;"><b></b></span>
<div align="center">
<span style="color: black; font-family: tahoma; font-size: 85%;"><b></b></span>
</div>
<span style="color: black; font-family: tahoma; font-size: 85%;"></span>
</div>
</div>
<b></b>
   


CAMARA DE VIGILANCIA: Con este codigo podran tener una camara web como la que aparece en la esquina superior derecha de mi pagina web solo deben de copiar este codigo y pegarlo en texto por debajo de la pagina en editar diseño y edictar donde dice tinkermaster hay colocan el nombre de su canal de youtube.
 
<div style="text-align: center;"><a style="right: 0px; position: fixed; top: 0px;" href="http://www.youtube.com/url aqui " target="_blank"><img alt="" src="http://dl.dropbox.com/u/47340707/camara-tinkermaster.gif" /></a></div>
   


CHAT DE EBUDDY:codigo de ebudy para su pagina web solo copien el codigo del ebudy y lo pegan en HTMl.
 
<div style="text-align: center;"><a style="right: 0px; position: fixed; top: 0px;" href="http://www.youtube.com/url aqui " target="_blank"><img alt="" src="http://dl.dropbox.com/u/47340707/camara-tinkermaster.gif" /></a></div>
   


Probador HTML: Con este codigo los visitantes entraran a tu sitio web y pongran todos sus codigos HTML para editarlos y despues colocarlos a su pagina web ya editados. Solo pega este codigo en la pagina que quieras  en HTML.
 
<div><!--- Codigo por a-battle-games.es.tl---> <script>
 function probar(texto) {
  ventana = window.open('', 'popup', '');
  ventana.document.write(texto);
 }a-battle-games.es.tl
 </script>
<form action="" name="probador">
    &nbsp;
</form>
</div>
<form action="" name="probador">
    <h1><font size="2"><span><span style="font-size: larger;">Este es un Vizualizador de c&oacute;digos HTML, inserta el c&oacute;digo HTML y te dar&aacute; el resultado en una ventana nueva!&nbsp;</span></span></font></h1>
    <div>&nbsp;</div>
    <font size="2"><hr />
    </font>
</form>
<div>
<form action="" name="probador">
    <textarea rows="10" cols="50" name="texto"></textarea><font size="2"> <br />
    </font><input type="button" onclick="probar(texto.value)" value="Visualizar el codigo" name="" /><a target="By Battle-Games" href="http://a-battle-games.es.tl"><font size="2"><br />
    </font></a> &nbsp;
</form>
<!--- Codigo por a-battle-games.es.tl---></div>
 
   


Buscador google:Este codigo es para poner un buscador google en tu web para que todos los visitantes cuando entren puedan buscar desde tu pagina solo pegalo en Fuente HTML de tu pagina.
 
<!-- Búsqueda Google -->
<center>
<FORM method=GET action="http://www.google.com/search">
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com/">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT TYPE=hidden name=hl value=es>
<INPUT type=submit name=btnG VALUE="Búsqueda Google">
</td></tr></TABLE>
</FORM>
</center>
<!-- Búsqueda Google -->
 


Palabra que se mueve de derecha o izquierda:Este codigo sirve para que cuando pongas un titulo en tu pagina web solo colocas este codigo y el titulo empesara a moverse asi la derecha o izquierda solo copia el codigo y editas en donde dise "TITULO AQUI" y ahi colocas lo que quieras que se mueva despues lo pegas en Donde quieras de HTML.
 



<marquee>TITULO AQUI</marque>
  Tinkermaster


Pagina en construccion:Este codigo sirve para poner tu pagina web en construccion solo copia el siguiente codigo y pegalo en Texto por debajo de la pagina.
 
<style type="text/css">
<!--
body { visibility:hidden;
background-color:#FFFFFF;
background-image:url(http://www.cordoba-redes.com.ar/EnConstruccion.bmp);
background-repeat: no-repeat;
background-position: top; }
//-->
</style>
   


Tiempo restante para finalizar el dia:Este codigo sirve para que sepas cuanto tiempo falta para que se termine es te dia. solo copia el codigo y pegalo donde quieras en HTML.
 
<body>
<p>Tiempo restante para finalizar el día</p>
<form name="Reloj">
<input type="text" size="7" name="tiempo" value="mm:hh:ss" title="Tiempo restante para finalizar el día">
<script language="JavaScript">
<!--
var tiempoAtras;
 

updateReloj();
function updateReloj() {
var tiempo = new Date();
var hora = 23-tiempo.getHours();
var minutos = 59-tiempo.getMinutes();
var segundos = 59-tiempo.getSeconds();

tiempoAtras= (hora < 10) ? hora :hora;
tiempoAtras+= ((minutos < 10) ? ":0" : ":") + minutos;
tiempoAtras+= ((segundos < 10) ? ":0" : ":") + segundos;

document.Reloj.tiempo.value = tiempoAtras;

setTimeout("updateReloj()",1000);
}
//-->
</script>
</form>
</body>
   


suscribete de youtube: este codigo nos permite poner el codigo de suscribete en youtube,
solo copia el codigo y pegalo donde quieras en HTML.

<iframe frameborder="0" scrolling="no" id="fr"
hidden; height: 105px; width: 270px; border: 0;"></iframe>
 
   


subir fotos: este codigo sirve para ver el el link de la imagen para poder cargarlo a nuestra web solo copia el codigo y pegalo donde quieras en HTML. 

<p align="center" class="Titulos-menu"><strong>||- SACA LA URL A TU FOTO -||</strong></p>
<form action="http://i68.plebius.net/upload.php" enctype="multipart/form-data" target="_blank" method="post" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">
    <p align="center"><input type="hidden" name="dest0" /> <span class="Estilo1">SACA LA URL DE TUS IM&Aacute;GENES</span><br />
    <input type="file" name="pic" value="" /><br />
    <input type="submit" value=" Subir " /> &nbsp; <input type="button" value=" Cancelar " onclick="self.close();" /></p>
    <input type="hidden" name="op" value="upload" /> <input type="hidden" name="dest" />
</form>
 
 
   SACA LA URL DE TUS IMÁGENES

    



texto que cambia de color: este codigo sirve para que se mueva un texto y a la ves cambie de color solo copia el codigo y pegalo donde quieras en HTML.

<marquee><span style="font-weight: bold;font-size:180%;"><script>
var text="AQUI EL TEXTO QUE CAMBIARA DE COLOR Y QUE SE MUEVA"
var speed=80
if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script></span></marquee>
 
AQUI EL TEXTO QUE CAMBIARA DE COLOR Y QUE SE MUEVA


Pagina en construccion:Este codigo sirve para poner tu pagina web en construccion solo copia el siguiente codigo y pegalo en Texto por debajo de la pagina.
 
<style type="text/css">
<!--
body { visibility:hidden;
background-color:#FFFFFF;
background-image:url(http://www.cordoba-redes.com.ar/EnConstruccion.bmp);
background-repeat: no-repeat;
background-position: top; }
//-->
</style>
   


Imagen grande:Este codigo sirve para que cuando alguien de click en una imagen la imagen se haga mas grande de lo que estaba solo copia el siguiente codigo y le edictas donde dise "URL DE LA IMAGEN" quitas eso y pegas la URL de la imagen que quieras. Bueno despues copias todo y lo pegas en donde quieras en HTML.
 
<img onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=100;this.height=80" src="URL DE LA IMAGEN" width="100"/>
   


Colocar un cargador de pagina:Este codigo sirve para que cuando un visitante entre a nuestra web se encuentre con una imagen de carga de que esta cargando la pagina bueno solo copia el siguiente codigo y pegalo en la pagina de inicio en Fuente HTML.
 
 </style>
</head>
<body>
<FONT color="white"><script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
</script>

<div id='imgLOAD' style="TEXT-ALIGN: center">
<b>Cargando la pagina</b>
<IMG src="https://img.webme.com/images/progress.gif">
</div>
   


Efecto titulo de la web escribiendo estilo MAQUINA DE ESCRIBIR: Este codigo hace que el titulo de nuestra web escriba algo a estilo de una maquina de escribir osea tu pones el nombre del titulo y el codigo hara que escriba el titulo por cada palabra. Bueno si entendistes copia el siguiente codigo y edita donde diga "AQUI EL TITULO DE LA WEB" ahy colocares el titulo que hara efecto. Y listo copealo y pegalo en TEXTO POR ENCIMA DE LA PAGINA
<script language="JavaScript1.2">

var message="AQUI EL TITULO DE LA WEB" //
var message=message+" "
i="0"
var temptitle=""
var speed="150" //
function titler(){
if (!document.all&&!document.getElementById)
return
document.title=temptitle+message.charAt(i)
temptitle=temptitle+message.charAt(i)
i++
if(i==message.length)
{
i="0"
temptitle=""
}
setTimeout("titler()",speed)
}

window.onload=titler
</script>


 
   


Cerrar pestaña de tu web: Con este codigo pongremos un cuadro que diga "SALIR" para cerrar la pestaña de nuestra web. Les dejo un ejemplo abajo de esta imformacion. Si quieres colocarlo en tu web solo copia el siguiente codigo y pegalo donde quieras de HTML.
<html>
<head>
<title>Ventana Secundaria</title>
<script>
function cerrarse(){
window.close()
}
</script>
</head>

<body>

da click en SALIR para cerrar la pestaña de mi web

<form>
<input type=button value="Salir" onclick="cerrarse()">
</form>

</body>
</html>


 


 
   

Pagina Hostiada En PWG: Con este codigo haremos que aparesca una imagen en la esquina superior derecha de nuestra web que diga "PAGINA HOSTIADA EN PWG" puedes ver la imagen en la parte de abajo de esta imformacion. Te gusto copia el siguiente codigo y pegalo en TEXTO POR ENCIMA DE LA PAGINA.
<a target="_blank" href="http://www.paginawebgratis.es/"><img alt="" src="https://img.webme.com/pic/b/by-ro0driig0o/hostiadaenpwg.png" style="position:absolute; top:0; right:0;" /></a>


 


 
   

Fantasmas volando por tu web: Con este codigo haremos que aparescan muchos fantasmas volando por toda tu web. Puedes ver la imagen del fantasma abajo de esta imfomacion. Si te gusto copia el siguiente codigo y pegalo en TEXTO POR ENCIMA DE LA PAGINA.

 
<script language="JavaScript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){

//Configuracion

var numberOfGhosts = 10; /* Numero de fantasmas */
var ghostSpeed = 0.9; /* Velocidad */
var inTheFace = 5;
var setTimeOutSpeed = 50; /* Velocidad a la que desaparecen */

//Fin de la configuracion

var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var strs = [];
var gro = [];
var dim = [];
var dfc = [];
var vel = [];
var dir = [];
var acc = [];
var dtor = [];
var xy2 = [];
var idx = document.getElementsByTagName('div').length;
var zip = [];
var pix = "px";

for (i = 0; i < numberOfGhosts; i++){
document.write('<div id="ghosts'+(idx+i)+'"'
+' style="position:absolute;top:0px;left:0px;'
+'width:40px;height:40px;background-color:transparent;'
+'font-size:0px;"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/TLUwy8cYCsI/AAAAAAAAAZ0/kWv1B3tlak4/s1600/ghost.gif" class="ghost" width="70"/></div>');
}

if (domWw) ref = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
}

function win(){
var mozBar = ((domWw) &&
ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
cy = Math.floor(h/2);
cx = Math.floor(w/2);

oy1 = (75 * h / 100);
oy2 = (oy1 / 2);
ox1 = (75 * w / 100);
ox2 = (ox1 / 2);

iy1 = (18 * h / 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);

field = (h > w)?h:w;
}

function rst(s){
var cyx;
sy = (domSy)?ref.pageYOffset:ref.scrollTop;
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
acc[s] = 0;
dim[s] = 1;
xy2[s] = 0;
cyx = Math.round(Math.random() * 2);
if (cyx == 0){
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
}
else{
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
}
dy = y[s] - cy;
dx = x[s] - cx;
dir[s] = Math.atan2(dy,dx) * pi1;
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
zip[s] = 10 * (dfc[s] + inTheFace) / 100;
vel[s] = ghostSpeed * dfc[s] / 100;
dtor[s] = (field - dfc[s]);
if (dtor[s] < 1) dtor[s] = 1;
gro[s] = 0.003 * dtor[s] / 100;
}

function animate(){
for (i = 0; i < numberOfGhosts; i++){
y[i] += vel[i] * Math.sin(dir[i] * pi2);
x[i] += vel[i] * Math.cos(dir[i] * pi2);
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
vel[i] += (acc[i]);
dim[i] += gro[i] + acc[i] / zip[i];
xy2[i] = dim[i] / 2;
if (y[i] < 0 + xy2[i] ||
x[i] < 0 + xy2[i] ||
y[i] > h - xy2[i] ||
x[i] > w - xy2[i]){
rst(i);
}
strs[i].top = (y[i] - xy2[i]) + sy + pix;
strs[i].left = (x[i] - xy2[i]) + sx + pix;
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
}
setTimeout(animate,setTimeOutSpeed);
}

function init(){
win();
for (i = 0; i < numberOfGhosts; i++){
strs[i] = document.getElementById("ghosts"+(idx+i)).style;
rst(i);
}
animate();
}

if (window.addEventListener){
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
}
})();
}//End.

</script>

<style>
.ghost {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
-khtml-opacity: 0.3;
}
html {
overflow-x:hidden;
}
</style>



 


 
   

 

Boton de facebook y twitter flotante: Con este codigo haremos que aparescan 2 botones uno de facebook y el otro de twitter en la parte de alado de nuestra web flotantes abajo de esta imformacion puedes ver los 2 botones. Si te gusto copia el siguiente codigo y edita todo lo que este en MAYUSCULA y pegalo en TEXTO POR ENCIMA DE LA PAGINA.

 
<a href='URL DE LA PAGINA DE FACEBOOK' target='_blank' title='Sígueme en Facebook'><img src='http://2.bp.blogspot.com/_dsEG33PDaHw/TJvjtOw87LI/AAAAAAAAAXg/lBmeNWBHuCc/s1600/boton-fb.png' style='display:scroll;position:fixed;bottom:400px;right:0px'/></a>
<a href='URL DE TU TWITTER' title='Sígueme en Twitter'><img border='0' src='http://3.bp.blogspot.com/_qgZA1ny_dAs/Sv9ShGIZOoI/AAAAAAAADBU/zvfuqM5TP58/s320/twitter-badge-classic.PNG' style='display:scroll;position:fixed;bottom:225px;right:0px;'/></a>
 





 


 
   

 

Ir abajo: Con este codigo haremos que aparesca una imagen en la esquina inferior derecha de nuestra web una imagen que cuando le den click te mandara asta abajo de la web. Puedes ver un ejemplo abajo de esta imformacion dale click y te mandara asta abajo de la web.Te gusto copia el siguiente codigo y pegalo en Texto por encima de la pagina.

 

<a href='#footer'><img border='0' style='position:fixed; bottom:0; right:0;' src="http://www.disemucho.com/jimdo/descargar_plantillas%20jimdo_gratis/abajo.png" title="Ir abajo" alt="" /></a>
 


 





 


 
   

 

Abrir xat en un Pop up con un link directo: Con este codigo haremos que cuando el visitante de nuestra web de click al enlace que colocaremos se abira el xat en un Pop up (Ventana emergente).Bueno puedes ver un ejemplo abajo de esta imformacion.Te gusto copia el siguiente codigo y edita donde diga "NUMERO-DE-LA-ID". ¡No sabes cual es el numero de la id?. la id esta en el codigo de tu xat Bueno no sabes Da CLICK AQUI para ver una imagen de cual es la id. Ya isistes todo lo que dice la imagen ahora copia el codigo y pegalo en donde quieras de HTML.

 




 


 
<a href="http://www.xatech.com/web_gear/chat/chat.swf?id=NUMERO-DE-LA-ID" target="_blank" onclick="window.open(this.href, this.target, 'width=500,height=500'); return false;">ABRIR CHAT</a> 

 




 


 
   
 
 
Hoy habia 12 visitantes (21 clics a subpáginas) ¡Aqui en esta página!

    • CUADRO TWEETS

      Para todos los usuarios de twitter que tienen una web es< esencial mantener informados a nuestros usuarios de las actualizaciones...

    • CUADRO DE NOTICIAS EN JQUERY

      crear un cuadro de noticias utilizando jquery para la animacion...

    • ESTILOS DE BORDES

      los bordes en realidad sirven para que algun elemento se vea mejor, es decir elegante...

    • RECURSOS

      encuentra exelentes paginas webs donde encontraras brushes, tipos de textos, etc...

  • SIGUEME EN YOUTUBE

    • DISEÑOS CSS

      descarga los mejores diseños Css para que puedas personalizar tu web...

    • PLANTILLAS XML

      Descarga exelentes plantillas para que personalizes tu blog...

    • JUEGOS PARA PC

      Descarga exelentes juegos para tu PC...

    • AFILIADOS VIP

      Afiliate a mi web de una manera facil y sencilla...

    • WALLPAPERS

      descarga wallpapers para que le den una mejor apariencia a tu PC...

    •





    • Bienvenidos a Tinkermaster website en donde se comparten conocimientos, ideas e informaciones listas para que cualquiera pueda aprender de ellas - Diseñado Por Tinkermaster
      Estas viendo la imagen:


    • Afiliados Afiliados

    Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
    Registrarse gratis