All Blogger Tips

Today I'll show you how to display image with a summary of your articles in the homepage, archives, labels and research. All this will be done in a completely automated, that is to say that you will apply the trick and your articles (old and new) will be summarized without you having to change them.

Installation - Step 1:

Log in to Blogger, Go to "Presentation", "Edit HTML" select "To develop models of gadgets," and find (Ctrl + F) </ head> and just before copy / paste these lines:


<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300;        /* Longueur des des résumés,article sans image */
summary_img = 250;           /* Longueur des des résumés, article avec image */
img_thumb_height = 128;       /* Hauteur de l’image dans le résumé */
img_thumb_width = 128;       /* Largeur de l’image en pixel */
</script>
<script src='http://lewordpress.com//Blogger/JS/LireLaSuite0.js' type='text/javascript'/>

To display the image on the right of the summary
Instead, use this code just before </head&gt;

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300;        /* Longueur des des résumés,article sans image */
summary_img = 250;           /* Longueur des des résumés, article avec image */
img_thumb_height = 128;       /* Hauteur de l’image dans le résumé */
img_thumb_width = 128;       /* Largeur de l’image en pixel */
</script>
<script src='http://lewordpress.com//Blogger/JS/LireLaSuiteDroite0.js' type='text/javascript'/>

To center the image of the summary
To view the summary with the image in the center (size of the image, as shown in the article not abstract) and abstract text just below the image, copy / paste this code before </head> :

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300;        /* Longueur des des résumés,article sans image */
summary_img = 250;     /* Longueur des des résumés, article avec image */
</script>
<script src='http://lewordpress.com//Blogger/JS/LireLaSuiteCentre0.js' type='text/javascript'/>

Installation - Step 2:

Now, look <data:post.body/> and replace it with these lines:

<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> <div style='clear: both;'/><span style='float:right;padding-top:20px;'><a expr:href='data:post.url' rel='bookmark'>Read more...</a></span>
</b:if>
</b:if>

You can use an image instead of the expression Read more... replacing it with:

<img src="URL de votre image" title="Lire La Suite" alt="Read more...">

Now the messages in your homepage, archives, labels and research are summarized with an image and link more ...