Así quedarán las entradas de nuestro blog, una vez que hayamos seguido los pasos. Solo hagan click en [+/-], para que vean como se despliega el resto del post que esta oculto.
Ejemplo:
Esta entrada es larga
Bueno, es verdad, no es tan larga. Pero es que no tengo mucho que decir. Sin embargo, debería incluir por lo menos un párrafo bastante largo aquí para que se haga una idea de cómo funciona esta opción. ¿Alguien conoce algún chiste bueno? Venga, seguro que sí. ¿Tengo que hacerlo todo yo solo? Me temo que sí. Lo cierto es que no me importa, porque tampoco tiene mucho sentido extenderse demasiado. Retroceda y lea el resto del artículo. (puede hacer clic en el siguiente vínculo para volver a ocultar esta entrada).
[+/-] mostrar/ocultar esta entrada
Con la implementación de este script no es necesario que el lector cargue una nueva pagina para ver el resto de la entrada. Solo tendrá que pinchar en el [+/-] y listo. Mucho más rápido que cargar una página de nuevo. Si quieren en vez de [+/-] pueden colocar cualquier cosa, una imagen, otras palabras como leer mas... , o pueden simplemente dejar solo el título de la entrada.
Esta funcionalidad es especialmente útil para los blogs que tienen entradas muy largas. El usuario sólo verá los títulos de sus entradas y podrá hojearlos para seleccionar los que realmente le interesan. A continuación, podrá hacer clic en el vínculo correspondiente para leer todo el texto de la entrada. Cuando termine, podrá volver a ocultar el texto. Todo esto sucede en la misma página, con lo que no deberá navegar por otras páginas ni cargarlas.
Esta funcionalidad se compone de tres elementos: CSS, Javascript y, cómo no, los códigos de plantilla de Blogger. Vayamos por pasos.
Paso 1:
CSS
Es la parte más sencilla. Necesitamos un par de ejemplos que oculten o muestren entradas.
Copie estas dos líneas en su hoja de estilos:
.postshown {display:inline}
Osea estas 2 líneas de código deben estar dentro de <style> y </style>
Para la mayoría de las plantillas de blogger, su hoja de estilos suele aparecer en la parte superior de su plantilla, entre los códigos <style> y </style>. Algunas plantillas simplemente hacen referencia a un archivo externo que contiene el style. Si se encuentra en un archivo externo, entonces deberán primero descargarlo, cambiarlo (agregándole las dos líneas mencionadas) y luego volver a subir el archivo a un servidor propio.
Paso 2:
Javascript
Añada el código siguiente a su plantilla, entre <head> y </head>:
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}</script>
Lo importante del código anterior es que tenemos que darle un nombre exclusivo (id) a cada una de las secciones que necesitemos ocultar.
Paso 3:
Códigos de Blogger
Ahora que tenemos las herramientas preparadas, podemos aplicarlas a nuestras entradas.
Para la mayoría de las plantillas los Post (Entradas) se representan por estas líneas de código, que se encuentran entre <Blogger> y </Blogger>:
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>
<div class="post-body">
<p><$BlogItemBody$></p>
</div>
<p class="post-footer">
<em><$I18NPostedByAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a>
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$>
</p>
</div>
<!-- End .post -->
Para Ocultarlo debemos primero eliminar esta línea de código:
<a name="<$BlogItemNumber$>"></a>
Luego reemplazamos esta parte del código inicial, la que va desde <BlogItemTitle> a </BlogItemTitle>:
Por estas líneas:
Y finalmente, reemplazamos esta otra parte del código:
Por esta otra:
<div class="post-body">
<$BlogItemBody$><br />
</div>
</span>
<a href="javascript:expandcollapse('<$BlogItemNumber$>')">
[+/-] show/hide this post</a>
Como resultado obtendríamos esto:
Si quieren que solo aparesca el titulo del blog, con el link que se hará expandible sin el [+/-], entonces el código quedaría así:
Como resultado obtendríamos esto:
Y si quieren que además desaparesca el pie del post, que tiene los comentarios, el nombre del creador del post, y la hora. Entonces el cierre (</span>) de la parte que necesitamos ocultar debe ir antes del último </div> que termina el código del Post. Quedaría así:
<div class="post">
<a href="javascript:expandcollapse('<$BlogItemNumber$>')"><BlogItemTitle> <$BlogItemTitle$> </BlogItemTitle></a>
<span class="posthidden" id="<$BlogItemNumber$>">
<div class="post-body">
<$BlogItemBody$><br />
</div>
<p class="post-footer">
<em><$I18NPostedByAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a>
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$>
</p>
</span>
</div>
<!-- End .post -->
Hasta el momento lo que tendrán como resultado, es una lista de todos los títulos de los últimos post que muestran en la página principal, con su correspondiente fecha, si aún no han eliminado la fecha, en mi caso ya lo había hecho antes (explicado en post anterior), entonces lo que deben hacer es simplemente borrar de la plantilla las siguientes 3 lineas de código que la despliegan (van desde <BlogDateHeader> hasta </BlogDateHeader>), que se encuentran entre la etiqueta <Blogger> y la linea de comentario que identifica el comienzo del post ( <!-- Begin .post --> ):
<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>
<!-- Begin .post -->
La parte más importante de este código es el empaquetador <span> que rodea el código <$BlogItemBody$>. Observe que esta sección empieza oculta y utiliza <$BlogItemNumber$> para crear un número de identificación exclusivo(id). Si quieren en vez de usar <$BlogItemNumber$> como id pueden utilizar <$BlogItemNumber$>1, de esta manera el "1" adicional garantiza la exclusividad del número de identificación en caso de que su plantilla ya utilice el número de elemento del blog para otra cosa como, por ejemplo, un vínculo perm. El vínculo de Javascript utiliza el mismo número de identificación para garantizar que se muestra u oculta la entrada adecuada.
Cuando finalicen los cambios en la plantilla, guarden los cambios y listo. El nuevo formato se aplicará automáticamente a todas sus entradas sin necesidad de realizar ninguna modificación.
Notas:
(No Ratings Yet)
Loading ...
por mas que le di vueltas no pude dejarlo con entrada expandible… se que hice algo mal, pero no se que.
Me falta mucho para entender realmente el lenguaje html…pero con constancia todo se puede.
Gracias de todos modos!
lo que necesito es saber es como enseñar una parte de la entrada y dejar un link de “leer todo” por si quieren leer todo el articulo, porque la mayoria de entradas son demasiado largas
gracias
Hola,
antes con la versión anterior de blogger podia construir entradas resumidas.(resumenes) ahora en la nueva vesrión no se como hacerlo.
¿Alguna sugerencia?
Gracias
Rodrigo y Juan
El leer mas esta en este post http://ayudaparatublog.com/2006/06/25/el-sigue-leyendo-explicado/
Recuerda que si estas trabajando con betablogger (artilugios y elementos de pagina) para ver lo que necesitas debes pinchar en la imagen
, esta justo debajo del titulo de le entrada.
Suerte!!
que buena pagina, es muy completa
Me gustaría saber como puedo visualizar mi blog con las modificaciones que hago, por alguna razón le hago modificaciones en blogger.com y en la opción ver blog no se muestran
GRACIAS
puede que tengas activado en tu navegador el cache, prueba limpiandolo..
para esto revisa:
http://ayudaparatublog.com/2006/09/09/porque-en-firefox-o-explorer-a-veces-no-se-ven-los-ultimos-cambios-que-hice-en-mi-blog/
espero que sea eso, si aun asi no funciona avisas.
suerte!!!
Ojala puedan ayudarme, tengo un blog http://www.gaby-toscano.blogspot.com
y nose que es lo que hice mal que se me genero un gran espacio entre el slide y mi entrada mas reciente..me gustaria saber como solucionarlo estoy desesperada….nose mas que hacer…desde ya mil gracias silvina
hoa quisiera saber como rayos hago para eliminar las entradas de mi blog o configurar una entrada plisssssss si se puede…. ah el blog de mi sapce en msn live
como colocar flechas para las paginas de mi espacio en mi espace de msm live.pleaseeeeeee urgente
Hola. Queria saber si me podrias ayudar con lo siguiente: Tengo en un blog que estamos armando la plantilla “Rounders”, y no encuentro ” y “; tampoco ” y “.
A que se debe? no puedo aplicar este cambio con esta plantilla? tenes idea de como podria hacerlo?
Desde ya gracias por el tiempo que le dedicas a leer mi comentario. El blog muy copado y con mucha info para los principiantes que nos animamos a meter mano.
Saludos
Uh el comentario se publico por la mitad je.
Decia que la plantilla que uso es “Rounders” (que se elige entre las x defecto de blogger) y en el codigo html no encuentro “”.
Hay alguna forma entonces de aplicar esto de mostrar/ocultar mis post?
Solo quiseara que se vean los titulos; sino se puede mostrar/ocultar la nota no habria problema. Saludos y gracias!
STYLE
eso es lo que no encuentro. lo escribi en los 2 comentarios y no se me posteo.
Disculpa y gracias de antemano!
Hola, ¿hay alguna posibilidad de que, además, se pueda configurar para que sólo los autores registrados (o mejor aún, una lista de identidades definida por el administrador) tengan acceso a la expansión de los posts (en blogger) y que el resto sólo pueda ver los títulos? Gracias.