Las ventajas de un menú superior desplegable es que nos permite ofrecerle al usuario una serie de accesos directos a los enlaces más importante de nuestra web de forma que no estén continuamente en pantalla si no que solo se desplieguen cuando el usuario desee.
Para hacer este menú hemos utilizado la librería jQuery, para conseguir ese efecto. Para aplicarlo en nuestra web tenemos que incluir el código Javascript y la llamada a la librería entre las etiquetas <head></head> de la siguiente forma:
Código PHP (Copiar):
-
<script type="text/javascript" src="jquery.js"></script> <!-- Libreria jQuery -->
-
<script type="text/javascript">
-
$(document).ready(function(){
-
-
$(".btn-slide").click(function(){
-
$("#panel").slideToggle("slow");
-
$(this).toggleClass("active"); return false;
-
});
-
-
-
});
-
</script>
El código html quedaría de la siguiente forma:
Código HTML (Copiar):
-
-
-
<li><a href="#">Inicio
</a></li>
-
<li><a href="#">Contacto
</a></li>
-
<li><a href="#">Portafolio
</a></li>
-
<li><a href="#">Sobre...
</a></li>
-
<li><a href="#">Ayuda
</a></li>
-
<li class="buscar"><input value="Buscar" /></li>
-
</ul>
-
<div class="clear"></div>
-
</div>
-
-
<p class="slide"><a href="#" class="btn-slide">Men
ú</a></p>
Y por último necesitamos darle estilo mediante CSS quedando de la siguiente forma:
Código CSS (Copiar):
-
#panel {
-
background: #CCC093;
-
height: 50px;
-
display: none;
-
}
-
.slide {
-
margin: 0;
-
padding: 0 0 0 5px;
-
border-top: solid 4px #825948;
-
height: 40px;
-
}
-
.btn-slide {
-
float: left;
-
background: #825948 url(white-arrow.gif) no-repeat right -50px;
-
text-align: center;
-
width: 144px;
-
height: 31px;
-
padding: 10px 10px 0 0;
-
margin: 0 auto;
-
display: block;
-
font: bold 120%/100% Arial, Helvetica, sans-serif;
-
color: #fff;
-
text-decoration: none;
-
}
-
.active {
-
background-position: right 12px;
-
}
-
-
ul.list {margin: 0px; padding: 16px 0px 0px 10px; list-style: none;}
-
ul.list li {float: left; width: auto;}
-
ul.list a {text-decoration: none; background: #453027; margin: 5px; padding: 4px;}
-
ul.list a:hover {text-decoration: none; background: #825948;}
-
-
ul.list li.buscar {float: right; margin-right: 5px;}
-
ul.list li.buscar input {background-color: #453027; border: 0px; color: #CCC093; font-size: 18px; margin: 0px; width: 300px;}
Si queréis ver un ejemplo de como queda, tenéis esta página disponible. La librería jQuery la tenéis aquí.
El titulo no se si es lo suficientemente descriptivo como para entender el contenido de esta entrada, pero, básicamente, lo que vamos a hacer es que mientras que los vídeos de nuestra web cargan se muestre una imagen indicando que el vídeo esta cargando.
Todo ello usando solamente CSS. La técnica es sencilla, consiste en darle estilo al div del vídeo para que muestre una imagen de fondo, una vez que el vídeo cargue, la imagen quedará en el fondo y conseguiremos ese efecto de imagen de carga que buscamos. El código CSS quedaría de la siguiente forma:
Código CSS (Copiar):
-
.video {
-
border: 20px solid #825948;
-
background: url(video-bg.gif) center no-repeat;
-
margin: auto;
-
background-color: #825948;
-
height: 355px;
-
width: 425px;
-
}
Por supuesto el código anterior es personalizable, yo además a añadido un borde y lo he alineado al centro, pero cada uno lo puede personalizar a su gusto.
El código Html sería algo así:
Código CODE (Copiar):
-
<div class=
"video"><object classid=
"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width=
"425" height=
"355" codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name=
"wmode" value=
"transparent" /><param name=
"src" value=
"http://www.youtube.com/v/KA2B5X0LhMY&hl=en" /><embed type=
"application/x-shockwave-flash" width=
"425" height=
"355" src=
"http://www.youtube.com/v/KA2B5X0LhMY&hl=en" wmode=
"transparent"></embed></object></div>
Podeís ver un ejemplo de como queda el código o descargar la imagen que he usado en el ejemplo.
Primero que nada: ¿Que es y para que sirve? PHP Speedy Wordpress Plugin es un plugin para Wordpress que acelera la carga del blog, uniendo y comprimiendo los archivos Javascript y las Hojas de Estilo (CSS). La página cargará más rápido y si usamos varias librerías JavaScript notaremos bastante la diferencia.
A continuación hablaremos de:
- Instalación
- Configuración
- Prueba de la configuración
- Activación
- ¿Realmente mejora el tiempo de Carga?
Instalación
La instalación no es diferente a el resto de plugins, simplemente lo descargamos y subimos la carpeta php_speedy_wp al directorio wp-content/plugins de Wordpress.
Antes de activarlo tenéis que aseguraos de que los directorios /wp-content/plugins/php_speedy_wp/libs/php_speedy/config.php y /wp-content/plugins/php_speedy_wp/cache tengan permisos CHMOD 777. Luego lo activamos y vamos a Opciones » PHP Speedy. Continuar leyendo →
Hace algunas versiones Wordpress dejó de mostrar los enlaces entrantes con Technorati y paso a mostrarlo con Google. Esto a mucho no les gusto y surgieron plugins para cambiar esto.
Con la última versión de Wordpress la mayoría de los plugins han dejado de funcionar, pero, tampoco son necesarios, ya que es muy fácil cambiarlo manualmente:
- En el Dashboard hacemos clic en
Editar en el Widget de Enlaces entrantes.
- Modificamos la URL del Feed por
http://feeds.technorati.com/cosmos/rss/?url=LA_URL_DE_TU_BLOG
- Pulsamos
Guardar.
Como vemos es sencillo y si queremos dejarlo todo como estaba lo podremos cambiar nuevamente por la URL de Google que sería: http://blogsearch.google.com/blogsearch_feeds?hl=en&scoring=d&ie=utf-8&num=10&output=rss&partner=wordpress&q=link:LA_URL_DE_TU_BLOG
Con este truco podremos con una sola imagen crear tantos iconos como queramos en todos los colores que queramos. El truco consiste en utilizar una imagen transparente y por medio de CSS cambiar el color de fondo del div.
Código CSS (Copiar):
-
.rssicon32 {
-
width:32px;
-
height:32px;
-
background-image:url(rss32.png);
-
background-color:red; /* Color del icono */
-
}
Aqui tenemos varios ejemplos de su utilización y podemos ver el resultado con distintos colores.
Los custom fields o campos personalizados nos permiten incluir información extra en cada entrada y mostrarla posteriormente a los usuarios. Por ejemplo, si tenemos un blog en el que escribimos nuestra opinión sobre películas podríamos incluir campos como autores, titulo, año o genero y posteriormente mostrarlos en el blog de manera más ordenada.
Todos los campos tienen dos valores, Key y Value o nombre y valor. No hay limite de campos personalizados por entrada y cada vez que añadamos uno Wordpress guardará el nombre (key) para que lo podamos añadir en otras noticias. Continuar leyendo →
29 March del 2008 (2:12 am) Asides.
Personalmente prefiero utilizar Wordpress en ingles, la versión original, pero claro alguno de los inconvenientes es que por ejemplo las fechas se encuentran en ingles, pero esto tiene un sencilla solución.
Para traducir las fechas de ingles a español en wordpress lo único que tenemos que hacer es traducir el archivo locale.php que se encuentra en el directorio /wp-includes de wordpress. Yo ya lo he traducido, y os dejo el código después del salto. Continuar leyendo →
En CSS aparte de todas las propiedades de CSS también existen pseudo-elementos que permiten aplicar el formato basado en información que está fuera de la estructura del documento. Por ejemplo el pseudo-elemento :first-line se refiere específicamente a la primera línea de un elemento.
Pero en esta entrada ablaremos de los pseudo-elementos :before y :after, estos son realmente útiles, con ellos podremos insertar cualquier cosa delante o después de un elemento a través de CSS. Para hacerlo tendremos que usarlo conjuntamente con la propiedad content. Continuar leyendo →
28 March del 2008 (5:13 pm) CSS.
