Mostrar / ocultar - Efecto Drop-Down



Esta es una técnica creada con CSS por Desizntech pueden ver su ejemplo aquí. Me pareció muy interesante para ocultar contenido ya que sólo necesitamos añadir unas líneas en las hojas de estilos para poder utilizarlo.
Depurando un poco el código sería suficiente con añadir justo antes de ]]></b:skin> lo siguiente:

 #dropdown ul .drop{
display:none;
}
#dropdown ul:hover .drop{
display:block;
padding-bottom:10px;
}

 Luego, donde queremos añadir ese efecto sería algo así:

 Aquí va el contenido inicial
<div id="dropdown"><ul>Sigue leyendo<a class="drop">
Contenido oculto...
</a></ul></div>
Aquí continúa nuestra entrada.

Se puede añadir más contenido como una imagen y agregar los siguientes códigos :

<span class="span">Ver Imágenes</span>
y los siguientes estilos antes de ]]></b:skin>

.span{
border: solid #333;
padding: 2px;
background: #fff;
color:#333;
font-size:12;


Si en lugar de Ver Imagen queremos añadir una imagen podemos hacerlo sustituyendo
el texto de "Ver Imagen" por <img src="url-de-la-imagen"/>

 Aquí va el contenido inicial
Aquí continúa nuestra entrada.

Fuente : www.gemablog.com

Entradas populares de este blog

Como obtener link de cualquier tipo de archivo dropbox sin la carpeta public

Imagen
1. Ingresa a la pagina de www.dropbox.com 2. Escoge el archivo que has subido de cualquier o tipo de extension podria ser una foto con extension jpg, png, gif, o los archivos tipo html, js, pdf, zip, entre otros 3. Ya escogido dale clic en compartir (clic derecho sobre el fichero o en la parte derecha hay un icono de cadena) 4. Una ves que aparece la Url, en este caso el vinculo del archivo: https://www.dropbox.com/s/khz8g8banufcgyk/54220557_7349.gif?dl=0 para poder utilizar correctamente cambiaremos la parte www  por dl como esta https:// dl .dropbox.com/s/khz8g8banufcgyk/54220557_7349.gif?dl=0 Y en seguida copiaremos a cualquier navegador que utilizamos  y  veremos el cambio listo para ser utlizado https://dl.dropboxusercontent.com/s/khz8g8banufcgyk/54220557_7349.gif como ven automaticamente se cambio dropbox.com a dropboxusercontent.com.
Leer más

Como ocultar los iconos de edición rápida o alguna imagen que no queremos que vea

Muchas veces cuando cambiamos la plantilla de nuestro blog no damos cuenta de que aparece la herramienta de edición rápida incluso a la vista del público y esto nos molesta. Para ocultar los iconos de herramienta de edición rápida usaremos la función de cualquiera de estos códigos  CSS tales como: display:none; o visibility: hidden; que vamos a colocar en nuestra plantilla antes de ]]></b:skin> : Con esto esteremos ocultando los iconos de herramienta de edición rápida en la header(cabecera), sidebar(categorías), main(entradas), footer (pie de página) e incluso cualquier otro imagen que no queremos que se vea por ejemplo yo usare la primera, aquí les dejo código emplementado. /* Ocultar iconos de edicion*/ .wrapper .item-control a.quickedit img{ display:none; } .header-wrap .item-control a.quickedit img{ display:none; } .header .item-control a.quickedit img{ display:none; } .sidebar .item-control a.quickedit img{ display:none; } .navbar .item-cont...
Leer más

Hermosas Historias De Amor

Imagen
 Cleopatra y Marco Antonio Muy pocas parejas han dejado una huella tan profunda en la historia como la de Cleopatra y Marco Antonio, una narrativa donde el amor y el poder se enfrentaron. Cleopatra VII, la última soberana de Egipto, conoció a Marco Antonio poco después de la muerte de su pareja, Julio César, quien fue asesinado por sus propios compatriotas, obligándola a huir con el hijo que tuvieron juntos. Marco Antonio, quien sucedió a César, la llamó para expresarle su desaprobación por no haber sido una aliada leal en una de las batallas importantes, pero Cleopatra no tenía planes de pedirle perdón; su intención era conquistar su corazón. 
Leer más