» » » Leer más automático con imágenes en miniatura

Leer más automático con imágenes en miniatura



Cómo aplicar a al blog el Leer más automáticamente con imagenes en miniaturas, donde el propio truco ya define cuantos caracteres aparecerán en la entrada del post de forma automática sin tener que definir que parte de la entrada aparecerá en la página principal del blog. También presenta la posibilidad de que aparezca la imagen reducida (thumbnail) que se ha añadido en el post.

Beneficios clave:

► La página principal del blog aparece resumida automáticamente.

► Se puede establecer el número de caracteres puede aparecer en la página de inicio del post, el tamaño de la imagen reducida y de qué lado debe permanecer en el resumen del pots.

► Las miniaturas (thumbnails) de las imágenes no se distorsionan en los resúmenes de los post.

Pasos:

Ir a:

Diseño ► Edición de HTML ►Presionar Ctrl + F y buscar lo siguiente:

<data:post.body/>

Nota → es la segunda línea que se encuentra en el Html del blog.



Reemplazar con el código:



<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leer más »»</a></div> </b:if>
</b:if> <b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/> </b:if>


  • Puede sustituir las palabras '' Más ... ¿Por qué Seguir leyendo ... Resto del Post, "...", etc.
  • Para poner una imagen en lugar de Leer Más:

Ver la línea:


<a expr:href='data:post.url'> Leer más »»</a>


 y reemplazar el Leer más »»  por este código:

<img src='URL de la Imagen' />

Así que va a incluir una imagen en lugar de palabras.



Luego:

Buscar la etiqueta </head>


Pegar debajo de </head> el siguiente código:


<!-- JavaScript Posts Resumidos-->
<style type="text/css">
.thumbnailimg IMG {
max-width:150px; width: expression(this.width > 150 ? 150: true);
max-height:120px;height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;padding:10px 10px 0px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 50;var summary_img = 40;var indent = 3;
</script>
<script type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}
function getSummaryLikeWP(id) {
return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}
function getSummaryImproved(post,max){
var re = /<.*?>/gi
var re2 = /<br.*?>/gi
var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi
post = post.replace(re4,'')
post = post.replace(re3,'<br /> ').split(re2)
for(var i=0; i<post.length; i++){
post[i] = post[i].replace(re,'');
}
var post2 = new Array();
for(var i in post) {
//if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
}
var s = "";
var indentBlank = "";
for(var i=0;i<indent;i++){
indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
s = post2.join(indentBlank +' <br/>');
} else {
var i = 0;
while(s.split(' ').length < max){
s += indentBlank + ' ' + post2[i]+'<br/>';
i++;
}
}
return s;
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/<!--\s*more\s*-->/.test(content)) {
div.innerHTML = getSummaryLikeWP(pID);
div.style.display = "block";
}
else { var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
summ = summary_img;
} else {
imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>'; summ = summary_img;
}
}
var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';
div.innerHTML = summary;
div.style.display = "block";
}
}
//]]>
</script>
<!-- Fin JavaScript Posts Resumidos-->


◘ Hacer clic en Vista previa para asegurarse de que todo esta bien.
◘ Hacer clic en Guardar plantilla.


✒ Personalización del Leer más »» 


ir a:  

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado


En el recuadro pegar el siguiente Código:
/*---Leer Mas---*/
.rmlink {
font-size: 120%;
float: right;
margin-right: 30px;
font-weight: bold;
}
.rmlink a {
font-style: normal;
font-weight: bold;
font-variant: small-caps;
font-family: Arial,Sans-Serif;
color: #24618e; /*Color del Link*/
}
.rmlink a:visited {
 color: #649dc7;
}/*Color del link después de clicado*/
.rmlink a:hover {
color: red;
} /*Color del link al pasar el mouse */

Entender el código que ponemos debajo de </head>:

  • max-width:150px; width = Ancho de la imagen.
  • max-height:120px; = Altura de la imagen.
  • float:left;= Lado en el que se vera la imagen.
  • var summary_noimg = 50; = Número de caracteres cuando la entrada NO tiene una imagen.
  • var summary_img = 40; = Número de caracteres cuando la entrada tiene una imagen.

Si te gusta la entrada compártela.

¡Gracias!

2 comentarios:

  1. Kc21/3/15

    El codigo es genial .... me funciono muy bien pero mi pregunta es
    como cambio el texto que me aparece en la pagina principal... osea cuando el texto esta resumido...

    ResponderEliminar
    Respuestas
    1. Cambio-Cambie17/10/15

      ¿Quieres cambiar el Leer más o el texto de la entrada?

      Eliminar

▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top