1.9. Estilos CSS y Código HTML Útil para tu Página Web - Parte I

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>

Read More

Funciones en PHP para comandos de MySQL

Funciones PHP de acceso a MySql

Aquí tengo tres funciones muy útiles, para poder acceder a los datos de una base de datos MySQL desde PHP, solo deberás cambiar el nombre del servidor, la base de datos y el usuario y su clave.

El archivo libreria.php tiene el siguiente código:

<?php
/*
* Funcion para ejecutar comandos tipo insert, update, delete y similares
*/

function ejecutarConsulta($textoSQL)
{
          //Abriendo la conexion
          $conexion=mysqli_connect("localhost","root","");
          //Verificando si existe la conexión
          if($conexion)
          {
                   //Abriendo la base de datos
                    mysqli_select_db($conexion,"bdPrueba");
                   //Ejecutando la consulta
                   $rsDatos=mysqli_query($conexion,$textoSQL);
                   //Devolviendo los datos de la consulta
                   return $rsDatos;
          }
          else
          {
                   //Devolveindo un valor nulo
                   return null;
          }
}
/**
* Función para ejecutar comando de tipo select o consultas
*/
function ejecutarComando($textoSQL)
{
          //Abriendo la conexion
          $conexion=mysqli_connect("localhost","root","");
          //Verificando si existe la conexión
          if($conexion)
          {
                   //Abriendo la base de datos
                    mysqli_select_db($conexion,"bdPrueba");
                   //Ejecutando el comando
                    $temp=mysqli_query($conexion,$textoSQL);
                   return "OK: Comando correcto";
          }
          else
          {
                   return "Error: En conexion o comando";
          }
}
/*
* Funcion que usa un RecordSet (rs) y muestra este como una tabla
*/
function consultaTabla($rs)
{
          $salida="";
          if($rs){
                   $numCol=0;
                   echo  "<table border=1><tr>";
                   while($x=mysqli_fetch_field($rs))//Recorriendo la cabecera
                   {
                            echo "<td>".$x->name."</td>";
                            $numCol++;
                   }
                   echo "</tr>";
                   while($reg=mysqli_fetch_row($rs))//Recorriendo los registros
                   {
                            echo "<tr>";
                            for($i=0;$i<$numCol;$i++)
                            {
                                     echo "<td>$reg[$i]</td>";
                            }
                            echo "</tr>";
                   }
                   echo "</table>";
          }else{
                   $this->mensaje = "ERROR: no hay datos";
}
return $salida;
}
?>

Código de una base de datos y tabla de prueba en MySql.

Deberás crear el siguiente código para poder realizar las pruebas de las funciones, el siguiente es el script en MySql:

/*Crear la base de datos*/
create database bdPrueba;
/*Poner en uso la base de datos*/
use bdPrueba;
/*Crear la tabla tPersona*/
create table tPersona
(
       idPersona int,    
       nombre varchar(50),    
       edad int,    
       PRIMARY key (idPersona)
)
/*Mostrar o listar el contenido de la tabla*/
select * from tPersona;
/*Insertar un registro a la tabla tPersona*/
insert into tPersona values(1,'Angel', 15);
/*Modificar el registro de la tabla tPersona*/
update tPersona set nombre = 'Juan', edad='22' where idPersona=1;
/*Eliminar el registro de idPersona con valor 1*/
delete from tPersona where idPersona = 1;

Código en PHP para usar las funciones

Este código solo funciona si tienes el archivo libreria.php con las tres funciones y has creado la base de datos bdPrueba y la tabla tPersona; luego podrás ejecutar el siguiente código en php:

<?php
         /*Este código en un ejemplo de como usar las funciones de php creadas, no presenta
         ningún formulario, el objetivo es ver la sintaxis de las funciones y su utilización*/
         /*Incluyendo la libreria para su uso*/
         include_once("libreria.php");
         /*Ejecutando el comando insert*/
         ejecutarComando("insert into tPersona values(0,'Julio', 25);");
         /*Ejecutando la consulta aunque esta no se muestra*/
         ejecutarConsulta("select * from tPersona");
         /*Mostrando la consulta en forma de tabla*/
         consultaTabla(ejecutarConsulta("select * from tPersona"));
?>

Read More