Seguimos con las cosas facilitas, que el calor del verano derrite las neuronas y hay que conservarlas en el mejor estado posible.En esta ocasión veremos cómo añadir un contenido en una pestaña lateral, fuera del contenido principal del blog, de manera que al pasar el puntero por encima de dicha pestaña ese contenido aparezca. Además, como usaremos position: fixed para situarlo dónde queremos, el contenido permanecerá fijo aunque hagamos scroll en la página.
La idea la vi hace unos días en Tutorial blog for stylish Blogger, aunque le he introducido unas pequeñas variaciones para que se pueda meter un contenido distinto a una lista, que es como viene en el ejemplo de BebenKoben y sobre todo para darle un aspecto distinto a la pestaña.
Mis contenedores están ahí, a la derecha. Son esas pestañas de color ocre. Pasad el puntero por encima y veréis un bloque que aparece con una lista de enlaces a modo de menú y otro con un vídeo dentro.
No requiere de JavaScript porque todo se hace con CSS. El HTML sería este, simplemente una caja con una clase creada para este fin que hará de contenedor general y dentro de ella, una segunda que hará de pestaña y el propio contenido. Este último lo marcaremos de manera genérica con una etiqueta de párrafo.
Lo más cómodo es ponerlo en un gadget, pues al estar posicionado con fixed, el sitio dónde se coloque el HTML es indiferente.
<div class="hiddencon">
<div class="hiddencon-label">●</div>
<p>CONTENIDO OCULTO</p>
</div>
<div class="hiddencon-label">●</div>
<p>CONTENIDO OCULTO</p>
</div>
Como es habitual en estas ocasiones, la magia la hace la parte CSS que es esta otra. También como siempre, hay que incluirlo en la hoja de estilo (entre las etiquetas skin en la plantilla Blogger), aunque también podría ir antes o después del anterior HTML si se mete entre etiquetas <style>.
/* Contenedor general contenido */
.hiddencon {
margin: 0;
padding: 0;
width: 410px;
z-index:99999;
position: fixed;
/* Desplazamiento para ocultar hacia la derecha
todo el ancho del bloque menos el borde */
right: -402px;
top: 10px;
opacity: .9;
}
.hiddencon2 {
top: auto;
bottom: 10px;
}
/* Contenido visible al hacer hover */
.hiddencon:hover {
right: 0;
}
/* Pestaña para desplegar */
.hiddencon-label {
margin-top: -17px;
margin-left: -30px;
padding: 10px;
position: absolute;
top: 50%;
display: inline-block;
color: white;
background: #BE901B;
font-size: 14px;
-moz-border-radius: 20px 0 0 20px;
-webkit-border-radius: 20px 0 0 20px;
border-radius: 20px 0 0 20px;
}
.hiddencon, .hiddencon-label {
/* Desplegado suave con transiciones */
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
/* El contenido incluida variante para listas */
.hiddencon p, .hiddencon ul {
margin: 0;
padding: 0;
border: 8px solid #BE901B;
border-right: 0;
color: #fff;
background-color: #000;
text-align:center;
vertical-align: center;
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
}
/* Estilo para listas */
.hiddencon ul {
margin:0;
overflow:auto;
}
.hiddencon li {
display: block;
}
.hiddencon li a {
display: block;
padding: 10px;
border-bottom: 1px solid #333;
color: #ddd;
-moz-transition: all 0.4s linear;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.hiddencon li:last-child a{
border-bottom: 0;
}
.hiddencon li a:hover {
background-color: #333;
text-decoration: none;
}
.hiddencon {
margin: 0;
padding: 0;
width: 410px;
z-index:99999;
position: fixed;
/* Desplazamiento para ocultar hacia la derecha
todo el ancho del bloque menos el borde */
right: -402px;
top: 10px;
opacity: .9;
}
.hiddencon2 {
top: auto;
bottom: 10px;
}
/* Contenido visible al hacer hover */
.hiddencon:hover {
right: 0;
}
/* Pestaña para desplegar */
.hiddencon-label {
margin-top: -17px;
margin-left: -30px;
padding: 10px;
position: absolute;
top: 50%;
display: inline-block;
color: white;
background: #BE901B;
font-size: 14px;
-moz-border-radius: 20px 0 0 20px;
-webkit-border-radius: 20px 0 0 20px;
border-radius: 20px 0 0 20px;
}
.hiddencon, .hiddencon-label {
/* Desplegado suave con transiciones */
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
/* El contenido incluida variante para listas */
.hiddencon p, .hiddencon ul {
margin: 0;
padding: 0;
border: 8px solid #BE901B;
border-right: 0;
color: #fff;
background-color: #000;
text-align:center;
vertical-align: center;
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
}
/* Estilo para listas */
.hiddencon ul {
margin:0;
overflow:auto;
}
.hiddencon li {
display: block;
}
.hiddencon li a {
display: block;
padding: 10px;
border-bottom: 1px solid #333;
color: #ddd;
-moz-transition: all 0.4s linear;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.hiddencon li:last-child a{
border-bottom: 0;
}
.hiddencon li a:hover {
background-color: #333;
text-decoration: none;
}
Para meter una lista en lugar de texto, un vídeo, imágenes, etc. sólo habría que quitar la etiqueta <p> del HTML:
<div class="hiddencon">
<div class="hiddencon-label">
●</div>
<ul><li><a href="javascript:void();">Enlace 1</a></li>
<li><a href="javascript:void();">Enlace 2</a></li>
<li><a href="javascript:void();">Enlace 3</a></li>
<li><a href="javascript:void();">Enlace 4</a></li>
<li><a href="javascript:void();">Enlace 5</a></li></ul></div>
<div class="hiddencon-label">
●</div>
<ul><li><a href="javascript:void();">Enlace 1</a></li>
<li><a href="javascript:void();">Enlace 2</a></li>
<li><a href="javascript:void();">Enlace 3</a></li>
<li><a href="javascript:void();">Enlace 4</a></li>
<li><a href="javascript:void();">Enlace 5</a></li></ul></div>
Si la lista es muy larga y sobrepasa el alto de la ventana del navegador, mejor usáis directamente el código de Tutorial blog for stylish Blogger.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Simplemente excelente, creativo, elegante, funcional... :D
ResponderEliminarRecuérdame que cuando nos veamos te pague lo tuyo ;)
Eliminar(perdon por no seguir el tema de la entrada)
ResponderEliminarHola Oloman;
Estoy haciendo una nueva decoración para mi blog.
Me he dado cuenta que aunque yo ponga las imágenes en paralelo en el editor de la entrada, luego en el blog se ven unas debajo de otras.
Aumente el ancho del blog y del cuerpo principal para que tuvieran mas sitio pero se siguen sin poner en horizontal.
Te dejo el blog de pruebas donde estoy poniendo la nueva decoración
http://pruebas202.blogspot.com.es/
La primera entrada que se llama "Diseño 2013" es en donde he puesto imágenes en paralelo (2 a 2). Son las que pone "Winx Club All ...".
De paso te pregunto si a la plantilla se le podría hacer que el fondo de las entradas y columna derecha tuvieran fondo blanco. Lo que sobra por los extremos, que tuviera como fondo una imagen.
Yo probé a hacerlo pero la imagen que ponía hacia de fondo de todo el blog.
Muchas gracias!
Bloom
La culpa es del display: block que tienes en este grupo de selectores:
Eliminar.post img, #related-posts img, #recent-comments-avatar img, .PopularPosts img, #recent-posts img {}
Si lo quitas verás que funciona como quieres, pero si ese cambio te fastidia el diseño de alguno de los otros gadgets, entonces déjalo como está y añades tras ese grupo de selectores un:
.post img {display: inline-block;}
Muchas gracias!! me ha funcionado perfectamente.
EliminarVeo que las imágenes con tamaño pequeño si se ponen en horizontal pero las medianas no. Esto puede ser porque no tiene la entrada el ancho suficiente pero ya estuve aumentando el ancho y las imágenes medianas se siguen sin poner en horizontal.
¿Crees que habría que aumentar mas el ancho? o es que hay algún otro problema.
Sí, ese es el problema. Se ve que olvidaste aumentar también el ancho en .post. Actualmente hay un 620px y las imágenes medianas son de 320px cada una.
ResponderEliminarGracias!! me mire el código varias veces pero se me debió de pasar eso siempre jajaja
EliminarYa la ultima cosa.
No se como hacer para que el fondo de las entradas y columna de la derecha quede en blanco y lo que sobra, una imagen de fondo.
Intente poner la imagen directamente pero hacia de fondo de todo el cuerpo del blog.
Pon la imagen de la misma manera que lo hiciste en tu prueba, pero luego añade un color a las id #main-wrapper y #sidebar-wrapper.
EliminarPor ejemplo #main-wrapper {background: white;}
Muchas gracias!! hice lo que me dijiste y funciono a la perfección.
EliminarPensaba que iba a poder poner los títulos de las entradas a la izquierda pero no encuentro el margen o float que controla eso. ¿Me dirías cual es?
Eso lo controlas desde este selector:
Eliminar.post-header {
float: right;
width: 395px;
border-bottom: 1px dashed #D8D8D8;
padding-bottom: 6px;
}
Muchísimas gracias Oloman por todo!
EliminarMe has ayudado mucho y ahora gracias a ti puedo tener el nuevo diseño de mi blog como quería.
:-D
Hola Oloman:
ResponderEliminarHace tiempo sigo Tus tutoriales, pero nunca te pregunto, este tema es muy interesaante, aunque para los novatos nos resulta un poco dificil
Yo encontré Tu pagina en ciudadblogger y las explicaciones que daba el
Potro me resultaban muy fáciles, te pediría por fabor que des mas detalles para los novatos-
Muchas gracias por Tu tiempo y enorabuenas por Tu estupenda página.
Un saludo
Se hace lo que se puede Conchi, pero no me gusta sólo dar códigos de copiar pegar y probablemente en las explicaciones que doy es dónde os complico. De todas formas pienso que es mejor entender lo que se hace para poder modificar cualquier código al gusto ;)
EliminarMe encantó! Oloman! como siempre impecables y creativas las ideas, veré de implementarlo en mi blog que siempre quise algo similar a esto pues tengo puesta tu plantilla elegante pero quería destacar cosillas en la portada:D
ResponderEliminar¿Elegante? Qué buen gusto tienes XD
EliminarBuenas, muy buen tuto, mi pregunta es la siguiente, que variación de código hace falta para poner dos en el mismo lado, solo consigo poner uno y el siguiente no tengo idea com desplazarlo hacia abajo, y otra cuestión, que variaciones habría que incluir para colocarlo en la izquierda, cambié todo lo que pude pero no lo consigo, ¿podrías incluir esos dos códigos? gracias amigo.
ResponderEliminarPara lo de poner una segunda solapa, sólo tienes que reconstruir el HTML, pero añadiendo una segunda clase en la caja principal, por ejemplo:
Eliminar<div class="hiddencon dos">
Luego a esa segunda clase ya le pones el top y el top (o bottom) como necesites. Yo para esta demo puse...
.dos {top:auto;bottom:10px;}
Para ponerlo a la izquierda ya hay que cambiar más cosas:
- En .hiddencon cambia el right:-402px; por un left:-402px;
- En .hiddencon-label, cambia el margin-left:-30px; por margin-right:-30px; y los border-radius, que en lugar de 20px 0 0 20px, sean con los valores 0 20px 20px 0
- En .hiddencon p, .hiddencon ul, el border-right:0 que se convierta en un border-left:0;
- Por último, el .hiddencon:hover tiene que llevar un right:0; en lugar del left:0;
Buenas noches, una pregunta, quisiera poner este "menu" en mi blog, pero lo que me interesa poner no son links, si no gadgets, es decir, que al pasar el cursor salga el gadget de los seguidores, de las etiquetas y esos que da google por defecto. Se puede con este codigo o hay algun "menu oculto" que lo pueda hacer? Saludos.
ResponderEliminarSe puede Alejandro. El CSS sería más o menos el mismo y el HTML también. Lo que cambia es el lugar dónde poner este último. En lugar de colocarlo en un gadget, hay que ponerlo en la plantilla, y luego, dentro en CONTENIDO OCULTO, poner el gadget correspondiente. El único inconveniente es que hay que añadir también una SECTION para poder incluir gadgets, pero si estás familiarizado con las plantillas de Blogger, no es muy difícil.
EliminarMuchas gracias, ya pude hacerlo trabajar, ahora el detalle esta en que no se puede hacer escrol el contenido de la pestaña, este se corta. Y al momento de implementar el codigo original de beben-koben no desplega el menu. Se podrá modificar tu codigo para que este haga escrol? Gacias de antemano.
EliminarPrueba a poner en el selector .hiddencon un overflow:auto o quizás un overflow:scroll, pero sin verlo me resulta difícil saber cuál es exactamente el problema.
EliminarBuenas, quería darte la enhorabuena por el blogg, tienes artículos muy chulos.
ResponderEliminarEstoy ahora dedicándome a trastear con el Blogg y el caso es que este articulo me ha llamado bastante la atención, pero algo se me escapa por que no me entero jajaja. El caso es que no se en que parte hay que meter cada parte del código, he probado a meter lo que seria el código para el CSS en el estilo del blogg, en el apartado añadir CSS del diseñador de plantillas. Y probé a añadir un Gadget html como mencionas con lo que seria lo correspondiente al desplegable que saldría en el lateral.
Pero nada, me aparece el gadget ya sea arriba , abajo o en un lateral con el contenido que le ponga "" Oculto "" sea para imágenes o vídeos o para texto.
Podrías darme algún detalle mas sobre donde abría que añadir los códigos.
Saludos
Es como lo haces Vicente, así que tendría que verlo puesto para ver dónde está el fallo. En El rincón del hobby no lo vi en este momento.
EliminarChe cumpa, me encanta el diseño de tu blog, es una plantilla o tu propio css, es es asi, muchas felicidades, excelente combinacion de colores
ResponderEliminarEs una plantilla propia, Huascar, pero precisamente los colores es lo que menos me gusta :)
EliminarHola Oloman, porqué no funciona bien en Internet Explorer?. Saludos
ResponderEliminarLo único que sé que puede fallar es la transición, pero por lo demás... Si pudieras detallar qué es lo que no funciona quizás yo también podría detallar más.
ResponderEliminarEl problema es al momento de desplegar el vídeo, no me deja ver parpadea tampoco reproducir. Saludos
Eliminar¿Cuál es tu blog que vea eso?
EliminarHola Oloman, no es un blog. El enlace es lo siguiente: http://www.hospitalvitarte.gob.pe:81/intranet/NotificacionInterno.aspx
EliminarAcabo de ver ese enlace que me pasaste y el vídeo se ve estupendamente ¿?
EliminarHola! En esta misma página, la pestaña inferior oculta (vídeo youtube) con iE no funciona correctamente. Es casi imposible desplegarla. Un saludo. Gracias.
EliminarAhora sí lo he visto.
EliminarEso es cosa del iframe que hay dentro de la pestaña que, efectivamente en IE, no reconoce el :hover cuando se está sobre él.
He comprobado que con otros contenidos si va, pero con el vídeo (iframe) no. Lo malo es que no sé cómo solucionarlo.
Una pregunta así que puede parecer tonta, si lo quiero poner arriba, en horizontal y que se abra hacia abajo, ¿cómo lo hago?
ResponderEliminarMuchas gracias por todo, muchos de los trucos que tengo en mis plantillas han salido gracias a ti :)
Lo he tenido que rehacer porque no es fácil adaptar el que publiqué aquí.
EliminarEste es el enlace dónde lo puedes ver http://codepen.io/oloman/pen/Gvosz
en chrome no me salía bien la pestaña (lo curioso es que esta web, si se ve bien). he tenido que cambiar en el css /* Pestaña para desplegar */
ResponderEliminar.hiddencon-label {
margin-top: -17px;
margin-left: -30px; por left:0px y top:x% a ojo
Bueno, el caso es que te funcione y sobre todo, que hayas entendido cómo va el código para que puedas adaptarlo a tu gusto ;)
Eliminarhola, disculpa una pregunta y si necesito que la pestaña aparezca con clic y desaparezca con otro clic.... podrías ayudarme!!!
ResponderEliminarHola EDR. Eso ya es otro asunto distinto.
EliminarNo obstante en esta entrada tienes explicado uno de los distintos sistemas que podrías aplicar.