Mi Código Personal Para Mejorar Mi Blog

Tabla Básica

<table width="600" border="1">
  <tr>
    <td width="300">&nbsp;</td>
  </tr>
  <tr>
    <td width="300">&nbsp;</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td width="600">&nbsp;</td>
  </tr>
</table>

Mi HTML - PROGRAMACIÓN

--En Construcción afuera
<div class="ejercicio">
<!-- INICIO EJERCICIO -->
--En construcción Ejercicio
<!-- Inicio Análisis -->
<div class="analisis">
--En construcción Análisis:
</div>
<!-- Fin Análisis -->
<br />
<!-- Inicio Diseño -->
<div class="diseno">
--En construcción Diseño:
</div>
<!-- Fin Diseño -->
<br />
<!-- Inicio Codigo -->
<div class="codigo">
--En construcción Código:
</div>
<!-- Fin Codigo -->
--En Construcción Notas:
</div>
<!-- FIN EJERCICIO -->
--En construcción afuera

Mi Código de Inserción

<center>
<h1>
<a href="" target="_blank"> CLIC AQUI PARA ENTRAR EN LA PAGINA </a>
</h1>
<h2>Ing. Angel Moreano Terrazas</h2>
<iframe src="" width="800" height="600"> </iframe></p>
</center>

Mi Código de Redes Sociales

<center>
<a href="http://www.facebook.com/amoreanoterrazas" target="_blank"><img alt="Siguenos en Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN6pB_PryUnYbTzGWppBY35l-wW7OtXQusU07_Rc4zR03NPDPBViPFv-5J2u-rqvK1az4dX7We-ihHFPGR1i9jukGDkgRlMQpRsBZ3MYA2ts_2rqIKgkt2UG83O7ZX3qDJILHsIdAZ1yNy/s32/facebook32.png" width=32 height=32  /></a>
<a href="http://www.youtube.com/user/amoreanoperu"><img alt="Siguenos en YouTube" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl7LbM5Y0ReWgfhP5MOTfGnNob_4aQhnVYRXJ-oHvxUhjjt47zxytA7N6cZ7K_wrho4231Wl28ROw4HXWGLS8dV0UonN4JT4WrBttUe2qXu78V6onr8Wzg5Bw2AOLBZ1e5_AxS2BAYd9qI/s32/youtube32.png" width=32 height=32  /></a>
<a rel="author" href="https://plus.google.com/114656656848048458446" target="_blank"><img alt="Siguenos en Google+" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hxfBF3CnzHSzMoQmI9lzqNl4OijVE4lz1yYvDt1O3dA-3d2Lylo7JQKznMdsQCH9nTbP78VjTlVG5htIBpnTXLn6dwJi4F66ROLbqy8jLq95WAFqcOdyZG1MY-6SxKKZdjGSbENn2kfj/s32/google32.png" width=32 height=32  /></a>
<a href="http://www.blogger.com/profile/11124355828038459316" target="_blank"><img alt="Siguenos en Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNWd4IgMk9u_Ond3fcK7Kob-I2w6RppfV2EU1DGE3tshvUVmX9OZKM3XQM1zLsPPwzfrFLw82C0JzqabMRdrshcEXhl261GAo3SOQHLtV9tURZ8bIrWv99fEOd_Hsxb4GVQJvHKmTgfl7M/s32/blogger32.png" width=32 height=32  /></a>
<hr />
<b>
<a href="http://angelcursos.blogspot.com/" target="_blank">Clic Aquí para Ver Todos los Cursos</a>
</b>
<hr />
</center>

Código Para Menú Azul

<style>
#menuvert ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px; /* ancho del menú */
font-size: 10pt;
}
#menuvert ul li {
background-color: #A0CBEE; /* color de fondo del menú */
padding: 0px;
}
#menuvert ul li a {
color: #000; /* color de las letras */
text-decoration: none;
display: block;
padding: 5px 5px 5px 10px;
}
#menuvert ul li a:hover {
background: #336699; /* color del botón al pasar el cursor */
border-left: 10px solid #000066; /* color del rectángulo junto al título */
color: #FFFFFF; /* color de las letras al pasar el cursor */
}
</style>
<a href="http://angelcursos.blogspot.com/" target="_blank">Indice De Cursos</a>
<div id="menuvert">
<ul>
<li><a href=" "> 1.... </a></li>
<li><a href=" "> 2.... </a></li>
</ul>
</div>

Re Definición de las Etiquetas h1-h4

h1
{
 color:#000080;
 font: 50% arial;
}
h2
{
 color:#6666FF;
 font: 150% arial;
}
h3
{
 color:33CCCC;
 font: 130% arial;
}
h4
{
 color:#00AAAA;
 font: 120% arial;
}

Mi Estilo CSS - Programación

<style type="text/css">
.analisis
{
 border:solid 3px #000000;
 -moz-border-radius-topleft: 24px;
 -moz-border-radius-topright:5px;
 -moz-border-radius-bottomleft:5px;
 -moz-border-radius-bottomright:26px;
 -webkit-border-top-left-radius:24px;
 -webkit-border-top-right-radius:5px;
 -webkit-border-bottom-left-radius:5px;
 -webkit-border-bottom-right-radius:26px;
 border-top-left-radius:24px;
 border-top-right-radius:5px;
 border-bottom-left-radius:5px;
 border-bottom-right-radius:26px;
 border-color:#FFF;
 background-color:#D7D7FF;
 color:#006;
 padding:10px;
}
.diseno
{
 border:solid 3px #000000;
 -moz-border-radius-topleft: 24px;
 -moz-border-radius-topright:5px;
 -moz-border-radius-bottomleft:5px;
 -moz-border-radius-bottomright:26px;
 -webkit-border-top-left-radius:24px;
 -webkit-border-top-right-radius:5px;
 -webkit-border-bottom-left-radius:5px;
 -webkit-border-bottom-right-radius:26px;
 border-top-left-radius:24px;
 border-top-right-radius:5px;
 border-bottom-left-radius:5px;
 border-bottom-right-radius:26px;
 border-color:#FFF;
 background-color:#EAEAF4;
 color:#750000;
 padding:10px;
}
.codigo
{
 border:solid 3px #000000;
 -moz-border-radius-topleft: 24px;
 -moz-border-radius-topright:5px;
 -moz-border-radius-bottomleft:5px;
 -moz-border-radius-bottomright:26px;
 -webkit-border-top-left-radius:24px;
 -webkit-border-top-right-radius:5px;
 -webkit-border-bottom-left-radius:5px;
 -webkit-border-bottom-right-radius:26px;
 border-top-left-radius:24px;
 border-top-right-radius:5px;
 border-bottom-left-radius:5px;
 border-bottom-right-radius:26px;
 border-color:#ffffff;
 background-color:#E8FFE8;
 color:#030;
 padding:10px;
}
.ejercicio
{
 border:solid 4px #000000;
 -moz-border-radius-topleft: 24px;
 -moz-border-radius-topright:5px;
 -moz-border-radius-bottomleft:5px;
 -moz-border-radius-bottomright:26px;
 -webkit-border-top-left-radius:24px;
 -webkit-border-top-right-radius:5px;
 -webkit-border-bottom-left-radius:5px;
 -webkit-border-bottom-right-radius:26px;
 border-top-left-radius:24px;
 border-top-right-radius:5px;
 border-bottom-left-radius:5px;
 border-bottom-right-radius:26px;
 border-color:#F60;
 background-color:#000000;
 color:#FFF;
 padding:10px;
}
</style>

1. Slider, Popup y Otros Elementos Simples Para Blog o Páginas Web

Elementos y Código para Tu Blog o Página Web

Aqui tengo una selección de código simples que he encontrado y que funcionan, para tu blog solo tienes que agregar un gadget o en alguna parte de tu blog que acepte código html, por supuesto teniendo siempre cuidado en lo que haces.

Slider Simple Copialo en un gadget u otra parte de tu blog, puede ser en edición HTML. El más simple que he encontrado, solo tienes que poner las url de las imágenes, asegúrate que las imágenes tengan el mismo tamaño para mejores resultados o agrégale el código de ancho y alto a la etiqueta de imagen.

<!--CODIGO PARA COPIAR--> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript' > </script> <script type="text/javascript"> $(function(){     $('#slider div:gt(0)').hide();     setInterval(function(){       $('#slider div:first-child').fadeOut(0)          .next('div').fadeIn(1000)          .end().appendTo('#slider');}, 4000); }); </script> <div id="slider">     <div><img src="URL_IMAGEN1"/></div>     <div><img src="URL_IMAGEN1"/></div>     <div><img src="URL_IMAGEN1"/></div> </div>

Popup Simple Copia este código al lugar que deses en tu blog, solo debes cambiar nombre del titulo y poner luego el contenido en html que quieras.

<!--CODIGO PARA COPIAR--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <link href="https://sites.google.com/site/terrenoblogger/javascript/colorbox-terrenoblogger.css" rel="stylesheet"></link> <script src="https://sites.google.com/site/terrenoblogger/javascript/colorbox-terreblogger.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*0; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString();  jQuery.colorbox({width:"400px", inline:true, href:"#facebook-TB"}); } }); </script> <div style="display: none;"> <div id="facebook-TB" style="background: #fff; padding: 10px;"> <h3 class="box-title">AQUI PUEDES PONER EL TITULO</h3>     <p>AQUI VA EL CODIGO HTML QUE DESEAS</p> </div> </div>