Poner imagen a lo de leer m??s

  • agosto 25, 2010

Hay muchas maneras de insertar o cambiar el c??digo de leer m??s o Read more.
Esta que voy a explicar la encontr?? en alguna p??gina cuando todo esto de Blogger beta me sonaba a cuento chino, ahora me alegro de haberlo guardado.
No recuerdo la p??gina, por lo tanto si la persona que tuvo la genial idea de postearlo piensa que el c??digo puede ser suyo le ruego me lo haga saber para citar el autor.
Ahora bien, yo he querido personalizar este c??digo con una imagen, ese detalle si ha sido idea m??a y creo que es justo que lo diga porque las ideas no fluyen siempre en cualquier momento y estoy contenta con el resultado 😉
Para aplicar el efecto de leer m??s lo primero que hay que hacer es situarse en:

Plantilla/Edici??n HTML/Expandir plantillas de artilugios.
Buscamos las etiquetas </b:skin> y </head>
Y pegamos el c??digo de color rojo.

</b:skin>

<b:if cond=’data:blog.pageType == «item»‘>
<style type=’text/css’>
.fullpost {display:inline;}
.summarypost {display:none;}
</style>
<b:else/>
<style type=’text/css’>
.fullpost {display:none;}
.summarypost {display:inline;}
</style>
</b:if>

</head>

Luego en cada pots donde deseamos que salga el efecto de????leer m??s« aplicaremos lo siguiente:

(Aqu?? escribimos el principio de la entrada )

<span class=»summarypost»>
<a href=»link-de-la-entrada«>Seguir Leyendo… </a>
</span>

<span class=»fullpost»>
( Aqu?? escribimos la parte de entrada que veremos extendida )
</span>

Para que el texto de ????Leer m??s…« haga el efecto de expandir la entrada deberemos incluir el link de la entrada.
??C??mo conseguimos el link? Lo explico:
Le damos salida al post y clicamos en la fecha que hay junto al autor de la entrada, eso es el permanent link.
Copiamos la URL de la barra de direcciones, editamos de nuevo la entrada y pegamos la URL donde dice: link-de-la-entrada y damos salida de nuevo.
Hay una forma de no tener que aplicar este c??digo cada vez que escribimos una entrada, es m??s c??modo y ahorra tiempo, basta con aplicar este ??timo c??digo en la plantilla de entrada, la encontrar??is en este orden:
Opciones/Formato/Plantilla de entrada
Eso hace que quede ????grabado« el c??digo y salga en todas las entradas, pero con la posibilidad de escoger a que entradas le a??adimos ????el leer m??s« de no desearlo lo eliminamos y listo.
Ahora viene la parte donde yo puse mi granito de arena, a??adiendo una imagen en vez del cl??sico texto lo hice de la forma siguiente:
Escog??is la imagen, en mi caso quise que esa imagen fuera un texo diferente, lo hice con un generador de botones, pero pod??is hacerlo con cualquier editor de imagen.
Luego en la plantilla de entrada elimin?? donde dice: Seguir Leyendo… y a??ad?? el c??digo para imagen:
<img src=»aqu??-la-url-de-la-imagen» />
De esta forma apareci?? la imagen/texto que veis:


Ser??a un c??digo a poner m??s o menos as??:

(Aqu?? escribimos el principio de la entrada )

<span class=»summarypost»>
<a href=»link-de-la-entrada«><img src=»aqu??-la-url-de-la-imagen» /></a>
</span>

<span class=»fullpost»>
( Aqu?? escribimos la parte de entrada oculta que se extender?? )
</span>
Tambi??n pod??is poner una flecha, un bot??n de aviso o cualquier otra imagen peque??a para ese menester, eso es a gusto de cada uno.


Fuente

No Comments Found