Entradas ampliables en Blogger

By: Lamas Madrid 5:05 p. m.

Este código permite crear posts expandibles y colapsables en la misma página principal.

Antes de comenzar, es necesario acceder al menú de edición del Blog accediendo a los siguientes menús: Configuración >> Archivo >> Habilitar Página de entrada, esté escogida la opción SI.

1. Ir a Plantilla (Template), luego a Edición de HTML y  Expandir las plantillas de artilugios. Después agregas el siguiente código entre <head> y </head> . Preferiblemente insertarlo al final (antes de </head>).

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
    var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}

function hideFull(id) {
    var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
    var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}

</script>
</b:if>

2. Luego buscas las siguientes líneas:

<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats –>
</div>

3. Después tendrás que borrar la  linea: <div class='post-body'> y reemplazarla por el siguiente código:

<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

4. Seguimos en la Plantilla. Una vez que han pegado el código anterior, ahora pegas lo siguiente después de: <p><data:post.body/></p>

 <b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>LEER MÁS...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>SÓLO RESUMEN...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

Ahora ya pueden guardarse los cambios de la plantilla.

5. Para que funcione correctamente es necesario un código más:

  • Ir a Opciones >> Luego a Formato y en Plantilla de entrada pegas.

    ---------------------------Aquí escribes el contenido---------------------------
    <span id="fullpost">
    ----------------------Resto del contenido que se expandirá-------------------
    </span>

  • Cuando se publica algo, en todas las entradas saldrá este código, sin necesidad de reescribirlo.

Etiquetas: