Añadir barra de scroll al blog

 

¡Que tal Jimderos! alguna ves se hicieron éstas preguntas; ¿Quiero poner mi blog completo en una página pero ocupa mucho espacio? ¿Como lo hago para evitar éste problema?, ya que la paginación en Jimdo no existe y no es recomendable simular una. Por eso les traigo unn tutorial para determinar un alto del blog y que aparezca un "Scroll", ésto evitará la sobrecarga del sitio web ¡Tus visitantes te lo agradeceran!. [...]


Paso 1


Primer paso; crea una sub-página en tu página Jimdo y agregas como elemento un "Blog", en la cantidad le pones 1000 o una cantidad absurda para que se muestren todos los articulos que tengas redactados públicamente.

Paso 2


Segundo paso; Ahora que ya tienes el elemento "Blog" en tu página, dirígite al footer (pie de página) y precionas en Vista Previa.

Paso 3


Tercer paso; pon el cursor encima del un artículo del blog, y le das en Clic Derecho, se te abrirá un menu de opciones y seleccionas "Inspeccionar Elemento", y busca la linea: <div class="blogselection">, y arriba de esa línea debe aparecer algo parecido a ésto <div id="cc-m-6455665652" class="n j-BlogSelection">. Éste código que generó Jimdo cc-m-6455665652, pegenlo en un bloc de notas por que lo usaremos más adelante, DEMO:

Haz clic en la imagen para ampliar
Haz clic en la imagen para ampliar

Paso 4


Cuarto paso; ahora es el momento en el que necesitaremos el código que nos generó Jimdo cc-m-6455665652, pero primero debemos pegar éste código en vuestro Head:

  • +Código (Con decoración)

    <style>
    /*CD Codes*/
    #AcáPegaTuCódigo {
    height: 600px; /* alto del blog */
    overflow-y: scroll;
    box-shadow: 1px 1px 7px hsl(0, 14%, 75%); /* sombra */
    padding-left: 10px;
    -moz-transition: all 0.7s ease 0s;
    -webkit-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    background-color: #f7efef; /* color de fondo */
    border-radius: 8px; /* redondeo de las esquinas */

    #AcáPegaTuCódigo:hover {
    box-shadow: 1px 1px 10px hsl(0, 16%, 60%); /* sombra al pasar el cursor */
    }
    </style>

Si quieres algo simple, que sólo se muestre la barra Scroll, sólo tienes que pegar éste simple código: </style>

  • +Código (Sin decoración)

    <style>
    /*CD Codes*/
    #AcáPegaTuCódigo {
    height: 600px; /* alto del blog */
    overflow-y: scroll;

    </style>

Escribir comentario

Comentarios: 2