Esta es una página que te ayudará a colocar accesorios al blog. Aprenderás como mejorar tu blog. Pasa y encontrarás de todo un poco.
Cargando

Crear resúmenes de entradas ampliables (Un simple botón, Leer Mas) -5-

Si quieres como un simple botón. Tendrás que hacer lo siguiente:
1. Ir a Opciones (Setting). Luego a Archivo (Archiving). De ahí, en donde dice: ¿Habilitar páginas de entrada? (Enable Post Pages), activas la opción Si (Yes). No te olvides que tienes que Guardar valores (Save Settings) y que tienes que volver a publicar el blog para ver los cambios.

Click en la imagen para agrandarla

2. Ir a Plantilla (Template). Luego agregas el siguiente código entre <style> y </style>. Preferible que pegues el código al comienzo de la etiqueta <style type="text/css"> porque puede ser que en algún momento, no quieras este truco y se te va hacer mas fácil poder ubicarlo para borrarlo.

<MainArchiveOrArchivePage>
span.fullpost {display:none;
</MainArchiveOrArchivePage>

<ItemPage>
span.fullpost {display:inline;}
</ItemPage>

Click en la imagen para agrandarla


3. Seguimos en la Plantilla. Una vez que han pegado el código anterior, ahora pegas el siguiente código entre </style> y </head>.

<script type="text/javascript">
var memory = 0;
var number = 0;
</script>

Click en la imagen para agrandarla


4. Seguimos en la Plantilla. Una vez que han pegado el código anterior, ahora pegas el siguiente código en donde dice: <$BlogItemBody$>, esto esta entre <body> <div "class=post-body"> </div> </body>.

<MainOrArchivePage>
<script type="text/javascript">
spans = document.getElementsByTagName('span');
number = 0;
for(i=0; i <spans.length; i++){
var c = " " + spans[i].className + " ";
if (c.indexOf("fullpost") != -1) {
number++;
}
}
if(number != memory){
document.write('<a class="readmorebutton"
href="<$BlogItemPermalinkUrl$>">Leer Mas</a><br>');
}
memory = number;
</script>
</MainOrArchivePage>


Click en la imagen para agrandarla

5. Seguimos en la Plantilla. El siguiente código lo deje para el último, porque se refiere a un pequeño estilo de botón simple, el cual se podrá realizar cambios, utilizando tu criterio.
El código lo tendrás que pegar entre <style> y </style>. Preferible que lo pegues al final, porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.

a.readmorebutton:link, a.readmorebutton:visited {
float: left;
margin: 2px 2px 2px 2px;
padding: 2px;
width: 115px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #000000;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #000000;
background: #CCCCCC;
text-align: center;
text-decoration: none;
font: normal 10px trebuchet ms, verdana, sans-serif;
color: #194B77;
}

a.readmorebutton:hover, a.readmorebutton:active {
float: left;
margin: 2px 2px 2px 2px;
padding: 2px;
width: 115px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #000000;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #000000;
background: #EEEEEE;
text-align: center;
text-decoration: none;
font: normal 10px trebuchet ms, verdana, sans-serif;
color: #194B77;
}

Explicación:

Click en la imagen para agrandarla


6. Para que funcione esto necesitas un código más, que lo vas a pegar en:
- Ir a Opciones. Luego a Formato y en Plantilla de entrada lo pegas.
- Cuando vas a publicar algo, prácticamente en todas las entradas te saldrá este código, sin necesidad de estar escribiéndolo en cada entrada. Además, el usuario tendrá la facilidad de ir a la página principal. No olvidar guardar los cambios. El código es el siguiente:

<span class="fullpost">
<a class=readmorebutton href="la URL">Ir a la página principal</span></a>


Veamos un ejemplo:

Click en las imagenes para agrandarla




Nota: Se tendrá que hacer una pequeña corrección. Probablemente el botón salga detrás de: Posted by (según lo que dice tu blog)
Corrección:

Click en la imagen para agrandarla

Lista de colores con sus respectivos códigos
1. Los colores y sus códigos RGB
2. Manual de Wiki Colores

Crear resúmenes en entradas ampliables en la nueva versión de Blogger (Leer Mas)

14 Comentarios:

Beatlejo dijo...

vgjvgf

angelcaido666x dijo...

Muy buen post

Realmente te pasaste con la explicacion.

Saludos

Anónimo dijo...

Hola a todos, muy bueno el post, lo probé en una plantilla de blogger común y fucnionó perfecto, ahora el problema lo tengo con la plantilla de blogger BETA. Me ha sido imposible conseguir que funcione esto. Por ejemplo esto no aparece en ninguna parte de la plantilla <$BlogItemBody$>.

Agradezco que alguien me ayude con esto. Saludos"

Soleska / www.soleskka.blogspot.com

Andrés dijo...

Hello Soleska.
Con respecto a tu pregunta visita esta página:
http://tintafantasma.net/2006/09/26/entradas-expandibles-con-blogger-beta/

Bye.
PD: Gracias por la visita.

Anónimo dijo...

Hola Andrés! muchas gracias por tu dato, probé y sigo sin funcionar, cada vez que hago las modificaciones dice error en rojo... la verdad es que ya no se que hacer y mientras menos me sale más ganas tengo de dicho botón el los post!!! saludos.

Anónimo dijo...

Hola Andrés, yo otra vez unas horas después. Te cuento este es el texto que me aparece de error cuando aplico los tags que saqué del link que me diste: "No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Open quote is expected for attribute "cond" associated with an element type "b:if".
Estará faltando un /b:if en el texto a pegar. Aviso; ya probé y no funciona!

Andrés dijo...

Hi Soleska.
Encontre esta pagina, ojal te ayude y te salga todavia no lo he probado.
Visita: http://naufragandoporlared.blogspot.com/2006/10/entradas-extendidas-en-blogger-beta.html
Bye.
PD: Si necesitas mas ayuda, cuenta conmigo.

Anónimo dijo...

Hola Andrés! este truco si funciona, es caserito pero anda bien...

saludos! gracias again.

Andrés dijo...

Hello.
Decirles que esto también sirve para el Blogger Beta.
Les explico:
1. Ir a plantilla.
2. Edición de HTML.
3. Casi al final dice:
Recuperar la plantilla clásica.
4. Entonces tendremos el antiguo código que la mayoría conoce, pero estan en Blogger Beta. Simplemente cambia la plantilla.
5. Las plantillas o el diseño son las mismos, lo único que cambia es el código de la plantilla.
PD: Ahora cuando se obtiene un blog en Blogger, te mandan al Blogger Beta pero si ustedes deciden usar la antigua plantilla, les resultara este "Leer Mas".

Clausss dijo...

Andrés muchas gracias por tu ayuda lo que publicastes anteriormente fue la solucion a mi problema de colocar una plantilla que hace semanas que lo intentabas, GRACIASSS

Andrés dijo...

Hi.
Clauss: Gracias a ti por visitar mi blog.
Bye.

profesora_lmb dijo...

Hace un par de días descubrí tu blog. Me parece genial!!! Ya aprendí un montón!!! Soy absolutamente principiante en esto. He creado un blog, relacionado con mi trabajo, un sector educativo. Algunas cosas lindas le pude poner. Estoy intentando desde hace 2 días esto de "entradas extendidas", pero no me sale. Pero bueno, ya podré!!! Bastante puedo hacer por no pertenecer a esta generación que viene con un chip informático cuando nacen!!! Nací en 1960 y bastante he aprendido ya.
Es que en mi plantilla no dice lo mismo que vos colocás en tu explicación.
Además hay una cosa tonta, no se si mi blog es beta o no.
Bueno, no puedo colocarte la página del blog, porque es para un determinado sector educativo. Pero sí la del blog que uso para hacer las pruebitas que quiero hacer en el otro.
http://profesoralmb.blogspot.com/

También puedo dejar una de mis direcciones de correo por si alguien puede darme una mano en esto.

Muchas gracias por tu generosidad en colocar estas explicaciones, con imágenes, que yo sé que lleva tiempo armarlas.
Un saludo

Laura Top
lautopweb@gmail.com

Me x 5 dijo...

Hola perdon por la pregunta pero no encuentro la parte de style en donde pegarlo en mi plantilla. Ya he usado tus instrucciones en repetidas ocasiones y funcionan a la perfeccion pero en esta ocasion no? Me podrias ayudar, si quieres temando una copia de la plantilla.
Inclusive dandole control F para buscar, no me aparece nada parecido a los styles que mencionas.

Anónimo dijo...

Les quiero contar de un blog que se llama PCzeros y tiene miles de gadjets para el blog. Tiene relojes para el blog, calendarios para el blog, fracés célebres, mensajes animados, buscador para blogger, relojes digitales y analógicos y... lo que búsquen!
Un saluditos para todos! !!!!!!!!!!!!!!!!!!!!!!!!!

Related Posts with Thumbnails
Últimos Post