BloG InFoRmaTiCo » CSS http://elblogdeerik.com El BloG De EriK Thu, 01 Jul 2010 11:29:24 +0000 en hourly 1 http://wordpress.org/?v=3.0 Crear Sitemap Manualmente http://elblogdeerik.com/crear-sitemap-manualmente http://elblogdeerik.com/crear-sitemap-manualmente#comments Tue, 22 Jun 2010 21:49:08 +0000 Erik http://elblogdeerik.com/?p=1116 Os voy a intentar explicar brevemente como crear un Sitemap Casero .

Lo lógico si estamos hablando de sitios web muy extensos es utilizar algun tipo de scripts  o programa para crearlo.Pero en este caso como nuestro supuesto sitio tiene pocas páginas lo crearemos manualmente.

La extensión del documento debe ser .xml , lo crearemos con el bombre genérico de “sitemaps.xml” .

Se coloca siempre en la raíz de nuestro sitio para indexarlo en los buscadores o mostrarlo a los respectivos interesados.El archivo .xml es un archivo de texto y lo empezaremos escribiendo la introducción de todo archivo .xml.

<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

Aquí escribiremos el body
</urlset>

El sistema para introducir nuestras url es el siguiente.

<url>
<loc>http://www.tupagina.es/</loc>
<lastmod>2010-06-22</lastmod>
<changefreg>monthly </changefreg>
<priority>0.8</priority>
</url>

La etiqueta <loc> es obligatoria y se escribe con la barra diagonal (/) al final  y comenzar por “http://”.

La siguiente etiqueta (<lastmod>) opcional , informa al buscado la fecha de  actualización del documento . El formato es el siguiente “aaaa-mm-dd”.

La etiqueta <priority> podemosdarle un valor de prioridad entre el 0 y el 1.

La etiqueta  <changefreg> informa al buscado la frequencia de actualización de la página, pero aunque introduzcamos diariamente no se revisa diariamente, es solo orientativo. Permite los siguientes parámetros.

  • always (siempre)
  • hourly (cada hora)
  • daily (diariamente)
  • weekly (semanalmente)
  • monthly (mensualmente)
  • yearly (anualmente)
  • never (nunca)

Un ejemplo de como quedaría este sitemap casero.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://tupagina.com/</loc>
<lastmod>2010-06-22</lastmod>
<changefreg>daily</changefreg>
<priority>1</priority>
</url>
<url>
<loc>http://tupagina.com/imagenes</loc>
<lastmod>2010-06-20</lastmod>
<changefreg> daily </changefreg>
<priority>0.8</priority>
</url>

<url>

<loc>http://tupagina.com/comentarios</loc>

<lastmod>2010-06-20</lastmod>

<changefreg> hourly </changefreg>

<priority>0.7</priority>

</url>

</urlset>
]]> http://elblogdeerik.com/crear-sitemap-manualmente/feed 1 Como quitar barra lateral en WordPress http://elblogdeerik.com/como-quitar-barra-lateral-en-wordpress http://elblogdeerik.com/como-quitar-barra-lateral-en-wordpress#comments Mon, 14 Jun 2010 21:43:46 +0000 Erik http://elblogdeerik.com/?p=1094 En muchas ocasiones deseamos quitar la barra lateral de nuestros blog en wordpress. Algunos motivos pueden ser para crear un foro y ocupar el máximo espacio o simplemente porque queramos crear una página estática.

  • En primer lugar creamos una copia de nuestro “page.php” y le cambiamos el nombre a “personalizada.php”
  • Buscamos la linea <?php get_sidebar(); ?> y la eliminamos.
  • Tenemos que acordarnos de intruducir en las primeras lineas de nuestra nueva página el siguiente código.
<?php
 /*
Template Name: personalizada
  */
   ?>
  • Ahora solo queda añadirle estilos , para eso iremos a nuestra nueva página “personalizada.php” y crearemos nuestras nuevas clases.
//Buscaremos
<div id="content-body"> 
//Y lo sustituiremos
<div id="content-body-personalizada">
 //si es el theme por default o cualquier otro
<div id="content"> 
// lo renombramos a
<div id="content-personalizada">
  • Y para finalizar añadimos a nuestra hoja de estilos que se llama “style.css” las reglas para las nuevas clases que hemos creado.
  • En este caso que ocupe un 100% del espacio de nuestra web.
#content-body-personalizada {
width:100%;
}

Una vez terminado todos los paso nos dirigimos a nuesta página y pulsamos quick edit o edición rápida y solo debemos selecciona en plantilla el nombre que le hemos puesto en esta caso “foro”.

]]> http://elblogdeerik.com/como-quitar-barra-lateral-en-wordpress/feed 1 Crear paginador en HTML http://elblogdeerik.com/crear-paginador-en-html http://elblogdeerik.com/crear-paginador-en-html#comments Mon, 14 Jun 2010 10:52:55 +0000 Erik http://elblogdeerik.com/?p=1092 Este código es muy útil si queremos crear un paginador en HTML rapidamente.Solo debemos copiar este código nuestro sitio y en el archivo style.css copiar el código que adjunto posteriormente.

<div id="paginacion">

  <li><a href="pagina1.html">1</a></li>
  <li><a href="pagina2.html">2</a></li>
  <li><a href="pagina3.html">3</a></li>
  <li><a href="pagina4.html">4</a></li>

</div>

Este lo adjuntamos en el archivo style.css , pudiendolos modificar según nuestras necesidades y gustos.

#paginacion ul{
 list-style-type: none;
}
#paginacion li{
 display: inline;
}
#paginacion li a{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 line-height: 12px;
 color: #003399;
 text-decoration: none;
 margin: 2px;
 padding: 6px;
 border: 1px solid #D6D6D6;
}

#paginacion li a:hover{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 line-height: 12px;
 color: #FFFFFF;
 text-decoration: none;
 margin: 2px;
 padding: 6px;
 border: 1px solid #D6D6D6;
 background-color: #0066CC;
}
]]> http://elblogdeerik.com/crear-paginador-en-html/feed 0 Mostrar enlaces como si fueran botones con CSS http://elblogdeerik.com/mostrar-enlaces-como-si-fueran-botones-con-css http://elblogdeerik.com/mostrar-enlaces-como-si-fueran-botones-con-css#comments Sat, 14 Nov 2009 22:06:14 +0000 Erik http://elblogdeerik.com/?p=828 Os reescribo este código que he utilizado para otros trabajos para simular un botón con un enlace corriente.

<html>
 <head>
 <title>Ejemplo como mostrar enlaces como si fueran botones CSS</title>
 <style type="text/css">
 a{ margin: 1em 0; float: left; clear: left; }  
 a.boton {
 text-decoration:none;
 background: #EEE;
 color: #222
 border 1px outset #CCC;
 padding: .1em .5em;
 }
 a.boton:hover {
 background:#CCB;
 }
 a.boton:active {
 border: 1px inset #000;
 }
 </style>
 </head>

 <BODY>
 <!--Vamos a mostrar enlaces como si fueran botones con CSS.-->

 <a href="#">ENLACE1</a>    

 <a href="#">ENLACE2</a>
 </BODY>

</html>

Graficamente quedará de la siguiente manera.

CSS

]]> http://elblogdeerik.com/mostrar-enlaces-como-si-fueran-botones-con-css/feed 0