» » » Scroll en una entrada del blog

Scroll en una entrada del blog


El cuadro de Scroll es un cuadro que permite comprimir un texto, con una barra lateral (de desplazamiento).
Se puede utilizar cuando hay que poner un código o un texto largo en una entrada de nuestro blog. Este permite seleccionar y copiar lo que esté en su interior.


Escribir la entrada, normalmente, incluir imágenes, enlaces, etc., una vez acabada ir en la pestaña HTML, y pongas este código al comienzo del texto que deseas comprimir.



<div id="scroll">
<p> Texto dentro del scroll </p>
</div></p>
</div>



Si queremos que nos quede centrado

Le añadimos esto

<div align="center">
<div id="scroll">
<p>Texto dentro del scroll </p>
</div>
</div>


Luego ir a:

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado


En el recuadro pegar el Código
/*scroll
------------*/
#scroll {
background:#cccccc;
border: 1px solid black;
width:400px;
height:200px;
overflow: scroll;
}


Ejemplo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec ligula a augue dictum facilisis. Proin eget tellus sed ipsum aliquam lobortis quis vitae quam. Sed lacinia metus erat, sit amet pellentesque tellus tempor sit amet. Donec vulputate eleifend orci, et dapibus sem. Proin orci velit, luctus a vehicula et, tincidunt ac mauris. Donec molestie pharetra nibh a pellentesque. Vivamus vitae varius nisi. Suspendisse id ligula consectetur, cursus lacus non, commodo purus. Curabitur semper sagittis tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Quisque non pulvinar risus. Nunc suscipit volutpat lectus ac molestie. Quisque aliquam eros leo, at consectetur arcu sollicitudin sit amet. Praesent feugiat diam in tellus porttitor elementum. Aenean vulputate massa a lectus porttitor luctus. Suspendisse egestas molestie turpis, nec cursus neque ultricies pellentesque.
Nunc non feugiat leo, quis varius velit. Integer vulputate pharetra nunc sit amet vestibulum. Sed accumsan orci non tempus tempor. Cras vehicula dapibus ante, a iaculis odio. Vivamus tristique nec metus nec tincidunt.


 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec ligula a augue dictum facilisis. Proin eget tellus sed ipsum aliquam lobortis quis vitae quam. Sed lacinia metus erat, sit amet pellentesque tellus tempor sit amet. Donec vulputate eleifend orci, et dapibus sem. Proin orci velit, luctus a vehicula et, tincidunt ac mauris. Donec molestie pharetra nibh a pellentesque. Vivamus vitae varius nisi. Suspendisse id ligula consectetur, cursus lacus non, commodo purus. Curabitur semper sagittis tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus.


overflow: scroll = Siempre aparecen las barras, si el contenido no excede las medidas las barras quedan deshabilitadas, en el momento que es mayor el contenido se habilitan.

overflow: auto = aparecerán las barras del scroll en caso de que el contenido sea mayor a las medidas que se añadieron en la plantilla.


Los valores que están en rojo, se pueden cambiar.



Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top