Elementos y Código para Tu Blog o Página Web (CSS, HTML, JavaScript)

Aqui tengo una selección de código simples que he encontrado y simplificado funcionan, lo puedes usar en tus paginas web o en tu blog, para tu blog solo tienes que agregar un gadget o en alguna parte de tu blog que acepte código html o CSS investiga, por supuesto teniendo siempre cuidado en lo que haces al modificar código en tu blog o plantilla Web.

MENÚ VERTICAL EN CSS

Menú Vertical

  • Copia este código CSS al lugar que deses en tu blog, de preferencia el estilo lo pegas en la zona de estilos del blog de esta forma no necesitaras pegarlo una y otra vez. El código html lo puedes poner en la entrada o lugar que deseas que usa html.

CÓDIGO CSS

<style type="text/css">
#mimenuvertical ul {
      list-style-type: none;
      margin: 0px;
      padding: 0px;
      width: 200px; /* ancho del menú */
      font-size: 10pt;
}
#mimenuvertical ul li {
      background-color: #A0CBEE; /* color de fondo del menú */
      padding: 0px;
}
#mimenuvertical ul li a {
      color: #000; /* color de las letras */
      text-decoration: none;
      display: block;
      padding: 5px 5px 5px 10px;
}
#mimenuvertical 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>


CÓDIGO HTML

<div id="mimenuvertical">
      <ul>
            <li><a href="#"> 1.... </a></li>
            <li><a href="#"> 2.... </a></li>
            <li><a href="#"> 3.... </a></li>
            <li><a href="#"> 4.... </a></li>
      </ul>
</div>


Cajas

  • Copia este código al lugar que deses en tu blog, de preferencia deberás colocarlo en la zona de estilos del blog, para no pegarlo una y otra vez (plantilla/diseñador de plantillas/avanzado/código CSS). El html lo puedes poner en la zona que desees siempre y cuando acepte código html. 

CÓDIGO CSS


<style type="text/css">
.micaja1/*Caja morada*/
{
 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;
}
.micaja2/*Caja roja*/
{
 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;
}
.micaja3/*Caja Verde*/
{
 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;
}
.micaja4/*Caja Negra*/
{
 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>



CÓDIGO HTML

<div class="micaja1">
Contenido de Caja1
</div>
<br />
<div class="micaja2">
Contenido de Caja2
</div>
<br />
<div class="micaja3">
Contenido de Caja3
</div>
<br />
<div class="micaja4">
Contenido de Caja4
</div>



Slider

  • Copialo en un gadget u otra parte de tu blog, en una zona donde acepte código 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.
  • El problema de este código es que solo lo puedes usar una vez en tu blog, de preferencia en la zona del titulo o alguna alguna zona permanente. Buscare la forma de arreglar este problema.

Código CSS

<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>

Código HTML

<div id="slider">
    <div><img src="URL_IMAGEN1"/></div>
    <div><img src="URL_IMAGEN2"/></div>
    <div><img src="URL_IMAGEN3"/></div>
</div> 



Popup Simple

  • Este código funciona directamente en cualquier lugar html y nos permite mostrar en una ventana nueva una imagen o el contenido de una página web, puedes cambiar el tamaño de la ventana y su posición. 

<!--CODIGO PARA COPIAR-->

Código HTML con JavaScript Código I - Apertura Automática

<!--Apertura automática de la ventana-->
<script>
window.open("URLPaginaóImagen", "_blank", "width=400,height=400,top=100px,left=200px");
</script>

Código HTML con JavaScript Código II - Apertura con Clic

<!--Apertura de la ventana al hacer click-->
<a href="URLPaginaóImagen" onclick="window.open(this.href, this.target, 'width=400,height=400, top=200px,left=300px'); return false;" target="_blank">
MENSAJE DEL LINK
</a>



Popup Constante

  • Este código esta basado en estilos CSS, funciona perfectamente y no da ningún tipo de alerta de apertura, es muy bueno.
  • Copia este código al lugar que deses en tu blog, solo debes cambiar el HTML, la parte de nombre del titulo y poner luego el contenido en html que quieras. 

<!--CODIGO PARA COPIAR-->

Código CSS

<style type="text/css">
.mioverlay {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;

    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.mioverlay:target {
    visibility: visible;
    opacity: 1;
}
.mipopup {
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 10;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.mioverlay:target+.mipopup {
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.miclose {
    background-color: rgba(0, 0, 0, 0.8);
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.miclose:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.miclose:hover {
    background-color: rgba(64, 128, 128, 0.8);
}
</style>

Código para HTML

<!--Link para abrir el popup-->
<a href="#mielemento" >Clic Aquí</a>
<!--Contenido del Popup-->
<a href="#x" class="mioverlay" id="mielemento"></a>
<div class="mipopup">
    <h2>TITULO DEL POPUP 1</h2>
        CONTENIDO DEL POPUP 1
    <a class="miclose" href="#miclose"></a>
</div>



BOTON DE COMPARTIR EN FACEBOOK

Codigo HTML

<a href="http://www.facebook.com/sharer.php?u=URL-DePaginaóImagen">
<img src="URL-DelLogoCompartirDeFacebook" />
</a>

Ejemplo HTML

<a href="http://www.facebook.com/sharer.php?u=http://creandomispaginasweb.blogspot.com">
<img src="http://www.mantenimientogratis.junkers.es/var/pool/images/home/compartir_facebook.png?imageRequest" />
</a>


CAJA CON TRANSPARENCIA Y SCROLL

Esta caja es gris y tiene cierta transparencia y un scroll; el scroll es una barra de desplazamiento vertical que aparece cuando el contenido de una caja que tiene cierta altura a sobrepasado su contenido, esta la realizamos colo con CSS.

Codigo CSS

.angelcajascroll
{
    border:solid 3px #242024;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: rgba(67, 67, 67, 0.3);
    background: rgba(67, 67, 67, 0.3);
    color: rgba(3, 3, 10, 1);
    -moz-box-shadow: 3px 5px 12px #262226;
    -webkit-box-shadow: 3px 5px 12px #262226;
    box-shadow: 3px 5px 12px #262226;
    padding: 7px;
    height:300px;
    overflow:auto;/*Coloca una barra vertical*/
    margin: 10px;
}

Código HTML

<div class="angelcajascroll">
    INICIO DEL CONTENIDO DE EJEMPLO
    <br>a<br>a<br>a<br>a<br>a<br>a<br>a
    <br>a<br>a<br>a<br>a<br>a<br>a<br>a
    <br>a<br>a<br>a<br>a<br>a<br>a<br>a
    FIN DEL CONTENIDO DE EJEMPLO
</div>