Blogger Blogspot ajouter lire la suite avec image automatiquement en savoir plus

Ah enfin, voici la méthode qui marche pour ajouter un lire la suite ou en savoir plus sur Blogger Blogspot (Read More).

Cette astuce, je l'ai trouvée sur que je remercie fortement, car j'ai longtemps cherché cette technique et pour une fois ça a marché.

La source de cette technique est en anglais : bloggersentral.com.

Avant d'aller loin, enregistrer votre modèle (au cas où il y a une mauvaise manipulation)

Lire la suite les codes à mettre dans votre templates

Allez sur Modèle --> cliquez sur Modifier le code HTML.
Ajoutez le code suivant juste avant

 </head>  

.

 <!-- Auto read more script Start -->  
 <script type='text/javascript'>  
 var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail  
 summary_noimg = 430; //summary length when no image  
 summary_img = 340; //summary length when with image  
 img_thumb_height = 200;  
 img_thumb_width = 200;  
 </script>  
 <script type='text/javascript'>  
 //<![CDATA[  
 function removeHtmlTag(strx,chop){   
  if(strx.indexOf("<")!=-1)  
  {  
  var s = strx.split("<");   
  for(var i=0;i<s.length;i++){   
   if(s[i].indexOf(">")!=-1){   
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);   
   }   
  }   
  strx = s.join("");   
  }  
  chop = (chop < strx.length-1) ? chop : strx.length-2;   
  while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;   
  strx = strx.substring(0,chop-1);   
  return strx+'...';   
 }  
 function createSummaryAndThumb(pID){  
  var div = document.getElementById(pID);  
  var imgtag = "";  
  var img = div.getElementsByTagName("img");  
  var summ = summary_noimg;  
     if(thumbnail_mode == "yes") {  
  if(img.length>=1) {   
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';  
  summ = summary_img;  
  }  
  }  
  var summary = imgtag + '<div>  
 ' + removeHtmlTag(div.innerHTML,summ) + '</div>  
 ';  
  div.innerHTML = summary;  
 }  
 //]]>  
 </script>  
 <!-- Auto read more script End -->  

Faites ensuite un Ctrl + F pour trouver cette ligne :

 <data:post.body/>  

et remplacez tous les

 <data:post.body/>  

(tous hein) avec le code suivant.

 <!-- Auto read more Start -->  
 <!-- http://www.BloggerSentral.com -->  
 <b:if cond='data:blog.pageType == &quot;item&quot;'>  
 <data:post.body/>  
 <b:else/>  
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
 <data:post.body/>  
 <b:else/>  
 <div expr:id='&quot;summary&quot; + data:post.id'>  
 <data:post.body/></div>  
 <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);  
 </script>  
 <a class='more' expr:href='data:post.url'>Read more ...</a>  
 </b:if>  
 </b:if>  
 <!-- Auto read more End -->  

Cliquez ensuite sur Prévisualiser le modèle pour voir si ça marche, ensuite Enregistrer le modèle.

Lire la suite : pour modifier la taille des images d'illustration, la taille des textes à afficher

Pour modifier tout ce qui est cité ci-dessus changez les valeurs suivant:

1/thumbnail_mode – mettre "yes" si vous voulez mettre une image avec un résumé du texte.

2/summary_img – détermine le nombre de caractères affichés, si vous avez mis "yes" à thumbnail_mode.

3/summary_noimg – même chose si vous avez mis "no" a thumbnail_mode.

4/img_thumb_height et img_thumb_width - détermine la taille de l'image height (longueur) et width (largeur) (en pixels).

Comme nous sommes français, je vous conseille de faire Ctrl+F et trouvez "Read more" changez le par ce que vous voulez.