"TINKERMASTER " diseños para Photoshop

tinkermaster

codigos HTML parte III



Recuadro curioso con formato html:Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.
 <table border="0" cellspacing="1" cellpadding="3" width="280" bgcolor="#1e679a">
    <tbody>
        <tr>
            <td><font color="#ffffff" face="arial, verdana, helvetica"><b>Recuadro curioso con HTML</b> </font></td>
        </tr>
        <tr>
            <td bgcolor="#ffffcc"><font face="arial, verdana, helvetica">Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo. </font></td>
        </tr>
    </tbody>
</table>
 
Recuadro curioso con HTML
Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.


Recuadro curioso con formato html:Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.
<table border="0" cellspacing="1" cellpadding="3" width="200" bgcolor="#165480">
    <tbody>
        <tr>
            <td bgcolor="#5fa6d7"><font size="1" face="verdana, arial, helvetica"><b>Recuadro curioso con HTML</b> </font></td>
        </tr>
        <tr>
            <td bgcolor="#ffffcc"><font size="1" face="verdana, arial, helvetica">Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo. </font></td>
        </tr>
    </tbody>
</table>
 
Recuadro curioso con HTML
Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.


Recuadro curioso con formato html:Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.
<table border="0" cellspacing="1" cellpadding="3" width="200" bgcolor="#80a93e">
    <tbody>
        <tr>
            <td bgcolor="#b7f259"><font size="1" face="verdana, arial, helvetica"><b>Recuadro curioso con HTML</b></font></td>
        </tr>
        <tr>
            <td bgcolor="#f5ecb9">
            <table border="0" cellspacing="1" cellpadding="1" width="95%" align="center">
                <tbody>
                    <tr>
                        <td valign="top"><font size="1" face="verdana, arial, helvetica">+</font></td>
                        <td><font size="1" face="verdana, arial, helvetica">Opci&oacute;n uno </font></td>
                    </tr>
                    <tr>
                        <td valign="top"><font size="1" face="verdana, arial, helvetica">+</font></td>
                        <td><font size="1" face="verdana, arial, helvetica">Otra opci&oacute;n con texto en varias l&iacute;neas </font></td>
                    </tr>
                    <tr>
                        <td valign="top"><font size="1" face="verdana, arial, helvetica">+</font></td>
                        <td><font size="1" face="verdana, arial, helvetica">Lo que sea que desees destacar </font></td>
                    </tr>
                    <tr>
                        <td valign="top"><font size="1" face="verdana, arial, helvetica">+</font></td>
                        <td><font size="1" face="verdana, arial, helvetica">&Uacute;ltima opci&oacute;n </font></td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
 
Recuadro curioso con HTML
+ Opción uno
+ Otra opción con texto en varias líneas
+ Lo que sea que desees destacar
+ Última opción


Recuadro curioso con formato html:Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.
<table border="0" cellspacing="0" cellpadding="1" width="220">
    <tbody>
        <tr align="center" bgcolor="#990033">
            <td><b><font color="#ffffff">Titular del cuadro</font></b></td>
        </tr>
        <tr bgcolor="#990033">
            <td>
            <table border="0" cellspacing="0" cellpadding="4" width="100%">
                <tbody>
                    <tr bgcolor="#ffffff">
                        <td>Ponga aqui el contenido del cuadro</td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
 
Titular del cuadro
Ponga aqui el contenido del cuadro


Recuadro curioso con formato html:Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.
<table cellspacing="1" cellpadding="1">
    <tbody>
        <tr>
            <td valign="top"><span style="color: #99cc00"><img border="0" alt="" vspace="5" width="7" height="7" src="bullet_peq.gif" /></span></td>
            <td><span style="color: #99cc00">Elemento 1 de la lista</span></td>
        </tr>
        <tr>
            <td valign="top"><span style="color: #99cc00"><img border="0" alt="" vspace="5" width="7" height="7" src="bullet_peq.gif" /></span></td>
            <td><span style="color: #99cc00">Este ser&iacute;a un segundo elemento</span></td>
        </tr>
        <tr>
            <td valign="top"><span style="color: #99cc00"><img border="0" alt="" vspace="5" width="7" height="7" src="bullet_peq.gif" /></span></td>
            <td><span style="color: #99cc00">Caracter&iacute;stica adicional a resaltar</span></td>
        </tr>
        <tr>
            <td valign="top"><span style="color: #99cc00"><img border="0" alt="" vspace="5" width="7" height="7" src="bullet_peq.gif" /></span></td>
            <td><span style="color: #99cc00">Puede haber elementos cuyas caracter&iacute;sticas ocupen varias l&iacute;neas. Colocamos VALIGN=TOP en la celda del bullet para que aparezca arriba.</span></td>
        </tr>
    </tbody>
</table>
 
Elemento 1 de la lista
Este sería un segundo elemento
Característica adicional a resaltar
Puede haber elementos cuyas características ocupen varias líneas. Colocamos VALIGN=TOP en la celda del bullet para que aparezca arriba.


Cambiar el color de fondo:

Copia y pega donde qieras que salga la tabla de colores , si te fijas bien veras que puedes poner los colores que tu quieras modificando el codigo , es muy facil . Utilizalo en una pagina sin Imagen de fondo para que funcione.
<table border="1" cellspacing="0">
    <tr>
        <td bgcolor="#000000"><a
        onmouseover="document.bgColor='000000'">&nbsp;</a> </td>
        <td bgcolor="#C0C0C0"><a
        onmouseover="document.bgColor='C0C0C0'">&nbsp;</a> </td>
        <td bgcolor="#808080"><a
        onmouseover="document.bgColor='808080'">&nbsp;</a> </td>
        <td bgcolor="#FFFFFF"><a
        onmouseover="document.bgColor='FFFFFF'">&nbsp;</a> </td>
        <td bgcolor="#800000"><a
        onmouseover="document.bgColor='800000'">&nbsp;</a> </td>
        <td bgcolor="#FF0000"><a
        onmouseover="document.bgColor='FF0000'">&nbsp;</a> </td>
        <td bgcolor="#800080"><a
        onmouseover="document.bgColor='800080'">&nbsp;</a> </td>
        <td bgcolor="#FF00FF"><a
        onmouseover="document.bgColor='FF00FF'">&nbsp;</a> </td>
        <td bgcolor="#008000"><a
        onmouseover="document.bgColor='008000'">&nbsp;</a> </td>
        <td bgcolor="#00FF00"><a
        onmouseover="document.bgColor='00FF00'">&nbsp;</a> </td>
        <td bgcolor="#808000"><a
        onmouseover="document.bgColor='808000'">&nbsp;</a> </td>
        <td bgcolor="#FFFF00"><a
        onmouseover="document.bgColor='FFFF00'">&nbsp;</a> </td>
        <td bgcolor="#000080"><a
        onmouseover="document.bgColor='000080'">&nbsp;</a> </td>
        <td bgcolor="#0000FF"><a
        onmouseover="document.bgColor='0000FF'">&nbsp;</a> </td>
        <td bgcolor="#008080"><a
        onmouseover="document.bgColor='008080'">&nbsp;</a> </td>
        <td bgcolor="#00FFFF"><a
        onmouseover="document.bgColor='00FFFF'">&nbsp;</a> </td>
    </tr>
</table>
   


Cartel luminoso con texto: Cartel luminoso con texto .

<span id="TexteBat" style="width:100%">
<h1><font color="#ffffff">  Aprende a<br>Crear tu web</font></h1>
</span>
</center>
<script>
<!-- Mas scripts en http://www.creatupropiaweb.com -->
<!--
var from = 2;
var to = 12;
var delay = 55;
var glowColor = "#0000ff";
var i = to;
var j = 0;

textPulseDown();

function textPulseUp()
   {
   if (!document.all)
      return
   if (i < to)
      {
      TexteBat.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";
      i++;
      theTimeout = setTimeout('textPulseUp()',delay);
      return 0;
      }

   if (i = to)
      {
      theTimeout = setTimeout('textPulseDown()',delay);
      return 0;
      }
   }

function textPulseDown()
   {
   if (!document.all)
      return
   if (i > from)
      {
      TexteBat.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";
      i--;
      theTimeout = setTimeout('textPulseDown()',delay);
      return 0;
      }
   if (i = from)
      {
      theTimeout = setTimeout('textPulseUp()',delay);
      return 0;
      }
   }
//-->
</script>
 


Boton "Ir arriba" con jQuery que aparece y desaparece: En esta ocasión veremos cómo poner el botón de "Ir Arriba" en el blog pero con la particularidad de que se encuentra oculto, sólo aparece cuando se baja la página y desaparece otra vez cuando se regresa a la parte superior del blog. Además, al funcionar con jQuery el desplazamiento de la página se vuelve con un efecto deslizante. ¿Te gusto? Copea el siguiente codigo y pegalo en Texto por encima de la pagina.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<style type="text/css">
/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}

#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */
display: block;
background: url(http://lh5.googleusercontent.com/-luDGEoQ_WZE/T1Ak-gta5MI/AAAAAAAACPI/ojfEGiaNmGw/s60/flecha-arriba.png) no-repeat center center;
}
</style>


<div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
//]]>
</script>
 


El Fanbox de twitter flotante y con efecto deslizante: Bueno pues hace tiempo habia colocado el codigo del fanbox de facebook flotante y con efecto deslizante y pues ahora les traigo este codigo del fanbox de twitter. pasa el cursor sobre la imagen y veras que se desliza lentamente. ¿Te gusto? Pues para colocarlo en la web tenemos que copear el siguiente codigo y editar donde diga tinkermaster hay colocaras el nombre de tu twitter (Usuario) bueno terminastes ahora copealo y pegalo en Texto por encima de la pagina.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>  <script type="text/javascript">

jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox2").hover(function(){
jQuery(".slide_likebox2").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox2").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>

 

<style type="text/css">
.slide_likebox2 {
float:reight;
width:288px;
height:400px;
background: url(http://2.bp.blogspot.com/-B97DZMK7wus/TpOxNSwRhPI/AAAAAAAAAOU/A-RjcC6WYjk/s1600/tw_ag.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 10px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}
</style>


<div class="slide_likebox2">
<div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span>
<div class="likeboxwrap"><script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script>
<div id="twitterfanbox"><script type="text/javascript">fanbox_init("tinkermaster");</script></div>
</div>

<style>
.FB_SERVER_IFRAME {
width: 238px !important; /* Ancho del gadget */
height: 320px !important; /* Alto del gadget */
}
</style>
</span></div>
</div>
 


Boton Sigueme en facebook con bart en la ezquina inferior izquierda : Con este codigo colocaremos una imagen que diga Sigueme en facebook. La imagen estara con bart el de los simpson. Abajo de esta imformarcion les dejo la imagen. ¿Te gusto? Pues copia el siguiente codigo y edita donde diga "Url de facebook" hay colocas el link de tu pagina de facebook.

<a style="display:scroll;position:fixed;bottom:0px;left:0px;" href="URL DE FACEBOOK" target="_blank"><img src="http://dl.dropbox.com/u/52710149/Bart-sigueme-facebook.png" /></a>
 


Imagen con estilo: Con este codigo haremos un efecto con las imagenes de nuestra web. ¿Te gusto? Pues para colocarlo en nuestra web solamente copiamos el codigo y editamos donde diga "Url de la imagen" Hay colocamos el link de la imagen y listo, pegalo en donde quieras que aparesca en HTML.

<center><img class="juvinao" height="250" src="URL DE LA IMAGEN" width="230" /></center><br />
<br />
<style type="text/css">
.juvinao {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:1px solid #c0c0c0;
 background: url(http://4.bp.blogspot.com/-B58Czi-_F-8/Te8BLDSGN8I/AAAAAAAABDw/9QfUQtipWbo/s320/free_high_res_texture_381.jpg) bottom no-repeat;
padding:5px;
padding-bottom:20px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
}
</style>
 


Cuadro negro con texto desplazamiento: Con este codigo colocaremos un cuadro negro con un texto desplasandose asi la izquierda, Este codigo es muy bueno sirve para dar alguna imformacion.colocalo en tu web copiando el codigo y editar donde diga "Aqui texto" Ahy colocas el mensaje que quieres que se desplaze dentro del cuadro. pegalo en donde quieras que aparesca en HTML.
<div align="center"><table bgcolor="#000000" border="5" width="500"><tbody><tr><td align="center"><marquee scrollamount="5" direction="left" height="26"><span style="color:#FFFFFF;">AQUI TEXTO</span></marquee></td></tr></tbody></table></div>
 


Perzonalizar los avatares de los comentarios de PWG: Con este codigo perzonalizaremos los avatares de los comentarios. Si te gusta puedes hacer el efecto coloando el siguiente codigo en Texto por abajo de la pagina.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script><script>$(function(e){
var imgPer=$('img[src^="http://profile.webme.com/profile/"]');imgPer.addClass("imagenComent");
var enlace=imgPer.parent().next().next();enlace.addClass("comentarioEnlace");
var comentario= imgPer.parent().parent().parent().next();comentario.addClass('comentarioTexto');
var linea=imgPer.parent().parent().parent().parent().parent().parent().next();linea.addClass("comentarioLinea");//HR
});</script>
<style type="text/css">
.imagenComent{margin-bottom:8px;
-webkit-transform:scale(1);
-webkit-transform:rotate(45deg);
-moz-transform:scale(1);
-moz-transform:rotate(45deg);
-o-transform:scale(1);
-o-transform:rotate(45deg);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
/* By-ro0driig0o.comeze.com */
}
.imagenComent:hover{
opacity:1;
z-index:1;/*http://By-ro0driig0o.es.tl*/
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
box-shadow:3px 0px 9px black;
-webkit-box-shadow:3px 0px 9px black;
-moz-box-shadow:3px 0px 9px black;
}
.comentarioTexto{
/*Clase para los comentarios, puedes editar el color o tama?o*/
}
.comentarioLinea{
/*Linea que aparece abajo de los comentarios*/
}
.comentarioEnlace{
/*Color de el nombre de usuario */
}
</style>
 







 
 
Hoy habia 28 visitantes (35 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