Escrito por Joselite | 0 Comentarios

Menú Descriptivo con CSS

Esta es una buena manera de reducir el peso de tu página Web, ya que éste menú no usa Javascript, se hace todo con CSS. Ver demo

1. Creamos una lista con una pequeña descripción del contenido que contiene el vínculo del botón del menú.




^?Ver código HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<div class="baseofmenu"> <ul class="boxedmenu"> <li><a href="#">   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt. Cras fermentum orci t leo. Cras malesuada quam sed nibh interdum accumsan. Suspendisse magna arcu, blandit nec, placerat vitae, bibendum eu, tortor. Ut sapien sapien, tempus eget, sodales ut, facilisis ut, ante.   <small>Entertainment</small>Celeb Gossip</a></li> <li><a href="#">   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt. Cras fermentum orci ut leo. Cras malesuada quam sed nibh interdum accumsan. Suspendisse magna arcu, blandit nec, placerat vitae, bibendum eu, tortor. Ut sapien sapien, tempus eget, sodales ut, facilisis ut, ante.   <small>Technology</small>Softwares</a></li> <li><a href="#">   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt. Cras fermentum orci ut leo. Cras malesuada quam sed nibh interdum accumsan. Suspendisse magna arcu, blandit nec, placerat vitae, bibendum eu, tortor. Ut sapien sapien, tempus eget, sodales ut, facilisis ut, ante.   <small>Sports</small>Live Cricket</a></li> </ul> </div>




2. Éste es el CSS que convierte nuestra lista en un menú / desplegable.
^?Ver código CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

<br \> body { font-family:Georgia, "Times New Roman", Times, serif; } .baseofmenu{ height:104px; background-color:#99CC33; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 760px; } .boxedmenu { list-style-type:none; display:block; margin: 0px; padding: 0px 5px 0px 5px; position: absolute; width: 750px; } .boxedmenu li{ display:inline }   /* Styling A link START */ .boxedmenu li a, .boxedmenu li a:link, .boxedmenu li a:visited{ display: inline; text-decoration:none; font-size: 25px; background-color: #339966; color: #a3e9c6; margin: 10px 5px; padding: 10px; letter-spacing: 3px; border: 1px solid #306F4F; -moz-border-radius: 10px; -webkit-border-radius: 10px; float:left; width: 29%; } .boxedmenu li a:hover, .boxedmenu li a:active{ background-color: #206442; border-color: #a3e9c6; color: #fff; } /* Styling A link END */   /* Styling SMALL text item START */ .boxedmenu small{ display:block; font-size:16px; background-color: #206442; padding: 0px 10px; margin: 0px -10px 5px -10px; line-height: 25px; color: #339966; letter-spacing: 8px; } .boxedmenu li a:hover small, .boxedmenu li a:active small{ background-color: #339966; color: #206442; } /* Styling SMALL text item END */   /* Styling Paragraph within each menu item START */ .boxedmenu li a p { font-size: 11px; padding: 5px; margin: 0px; display: none; } .boxedmenu li a:hover p, .boxedmenu li a:active p{ display: block; } /* Styling Paragraph within each menu item END */

Visto en: Witty Sparks

Escrito por Joselite | 0 Comentarios

Comprobar la seguridad de tu blog

Hay algunas plantillas de Word Press que pueden tener vulnerabilidades de seguridad, las cuales pueden exponer tu blog a posibles spammers, hackers, …

BlogSecurity ofrece un “WordPress Theme Scanner“, el cual comprobará si tu tema es vulnerable a:

• Comprobará la versión de tu WP.
• Realizará un test a tus plantillas para comprobar si tu blog está expuesto a posibles ataques XSS
• Enumerará los plugins. En futuras versiones se realizarán comprobaciones sobre estos.

Escrito por Joselite | 0 Comentarios

Función ClearTimeOut() Javascript

La función ClearTimeOut() sirve para desactivar una llamada a una función que se llama a través del método setTimeOut(). Es muy útil esta función, lo único que se debe tneer en cuenta es que debemos tener un id con el identificar de la llamada al método setTimeOut().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script type="text/javascript">
<!--
var id;
 
function timeOut ()
{
  id = setTimeout("muestra_capa()", 4500);
}
 
function anulaTimeOut ()
{
  clearTimeout(id);
}
 
function muestra_capa() ()
{
  document.getElementById("capaPrueba").style.display = "block";
}
//-->
</script>

Escrito por Joselite | 1 Comentario

Diálogos de alerta con JQuery

Cory S.N. LaViska ha publicado recientemente la versión 1.0 de jQuery Alert Dialogs. Es un trabajo excelente, un código muy sencillo y totalmente personalizable sin apenas tener que modificar nada.

Escrito por Joselite | 0 Comentarios

Listado de funciones de WordPress

Estoy implementando unas mejoras para la web, ya que quiero añadir una nueva categoría/sección que ya os comentaré un poco más adelante. El problema me ha venido a la hora de obtener información sobre cada uno de los posts. Miraba el código y veía funciones, muchas funciones, pero no sabía para que servía cada una de ellas.

Mi remedio:  He encontrado un listado de todas las funciones de Wp, con su descrpción, ejemplos, parámetros, uso, … Muy muy útil para los que querais tocar algo de Wp que necesite programar (no sea HTML o CSS).

Link: Function Reference

Escrito por Joselite | 2 Comentarios

Recibir aviso si tu Web está caída

¿Deseas estar informado cuando tu sitio web está caído?. Esto es posible gracias a una web llamada Are my sytes up, la cual nos permite recibir un aviso vía email o SMS cuando nuestras páginas web estén caídas. Ninguno de los servicios ofrecidos es de pago. El sistema nos permite añadir nuestros sitios web y configurar el tipo de alertas que recibiremos en caso de la caída de nuestro sitio.

Enlace: Are my sites up?