*(Imagen sacada de http://www.motogpmotor.blogspot.com/ )La página principal de tu blog generalmente muestra todo el contenido de cada unos de tus posts. Si estos son mayores a 2 párrafos, tus visitantes se verán en dificultades para encontrar rápidamente algún tema de interés para ellos dado que van a necesitar desplazarse hacia abajo en la página,además demasiados Post ralentizará la carga del mismo,incluso habrá gente que se cansará de esperar e irá a otra parte. Aquí es donde los post con resúmenes expandibles ayudaban en el viejo blogger. Este hack sirve para el nuevo blogger,la página principal sólo mostrara los resúmenes de los posts y cuando den click en "leer más", el post completo aparecerá en la página principal ...
(Antes de empezar guarden una copia de seguridad de su plantilla)
-Paso 1: Vamos a "Diseño","Edición de html",(sin expandir plantilla) a continuación de <head> pegamos el siguiente código: <script src="'http://www.anniyalogam.com/widgets/hackosphere.js'" type="'text/javascript'/"> a continuación este otro
CODIGO:
<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 < 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 < 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 < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
<style>
#fullpost {
display:none;
}
</style>
</b:if>
<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 < 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 < 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 < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
<style>
#fullpost {
display:none;
}
</style>
</b:if>
-Paso 2: Guardamos y ahora damos "Expandir plantillas y artilugios", Ahora buscamos "de la mitad de la plantilla hacia abajo" : <b:includable id='post' var='post'> y después de: <div class='post" "vemos que no esta acabado" ponemos esto: expr:id='"post-" + data:post.id'>
-Paso 3: Ahora a partir de hay en unas 12 lineas mas o menos copiamos detrás de: <div class='post-body'>ponemos esto: <b:if cond='data:blog.pageType == "item"'>
-A continuación vemos otro código: <p><data:post.body/></p> y detrás de este ponemos todo lo siguiente:
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>LEER MÁS...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>CERRAR LECTURA...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
-Paso 4: Damos a guardar,"habiendo comprobado antes que todo está bien",y nos dirigimos a "Configuración",y "Formato",abajo del todo hay un cuadrito,hay intruducimos lo siguiente:
Escribe tu resumen aquí.
<span id="fullpost">
Escribe el resto de tu post aquí.
</span>-Paso 5: Damos a guardar,y ya a la hora de escribir un "Post" saldrá automaticamente,la zona en la que poner el "resumen" y la zona "donde poner el Post completo",si no la necesitas la borras y escribes el Post sin "Leer más".
-Si usas algunas de estas ayudas ofrecidas gratis "se agradece agreguen el banner de Ayuda Blog" en la barra lateral derecha,disfrutenlo.si quereis ver un ejemplo de como queda ir
0 comments:
Post a Comment