If you wanted to give your blogger blog a WordPress look, here is an another step you can take forward. New Read More post plugin for Blogger blogs can show post summary on homepage with auto generated thumbnails. These thumbnails are taken from the post pages automatically and gets displayed on home page, archive page, labels page etc. Earlier I posted about Read More post hack for Blogger, but this trick will make your job more easier, with a professional touch.
Add Read More Post Plugin to Blogger blogs
- Navigate to your Dashboard >> Layout >> Edit HTML >> Expand Widget Templates
- Search for </head> in your template (Press CTRL+F)
- Replace the above code with the following code
<script type=’text/javascript’>
var thumbnail_mode = "float" ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src=’http://files.bloggerplugins.org/excerpt.js’ type=’text/javascript’/>
</head><b:if cond=’data:blog.pageType == "item"’>
<data:post.body/>
<b:else/>
<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;’/>
<span style=’padding-top:5px;;float:right;text-align:right;’><a expr:href=’data:post.url’ rel=’bookmark’><b>Read More…</b></a></span>
</b:if>Customize Read More Plugin Look
You can customize the look and feel of this Read More blogger plugin by changing few parameters and values. Checkout the below possible customization options :
You can add an image in place of Read More.. text, by replacing that part from second code with <img src=”http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif” align=”right” border=”0″/> or with other words like : Continue Reading, [..], Read full post here etc.
You can edit the look and feel of the image by editing the following parameters:
- thumbnail_mode var = “float”; >> Thumbnail will appear above post summary
- summary_noimg = 230; >> No of characters to show in summary in case of no image
- summary_img = 140; >> No of characters to display in the summaries with pictures
- img_thumb_height = 100; >> Display post thumbnail height adjustment
- img_thumb_width = 100; >> Display post thumbnail width adjustment
That’s it. Now enjoy having Read More post summary on Blogger blogs with auto generated post thumbnails. [via]
Below are some more related articles to the topic:
Blogger going from best to bestest.
I’m sorry but this code doesn’t work ! An HTML error comes up regarding unclosed tags. Layout elements drag n’ drop is impossible after !
The method is good though and replacing the codes with those works fine for me
At first this instead of the head tag
var thumbnail_mode = "float" ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
And then this second bit instead of the other bit of code
createSummaryAndThumb("summary");
Read more >>
Hope this will help
yap , I agree, this plugin does not work
THanks a a lot !
Just change the Read More… to Read more and you have successfully implement the changes without any error.
This Hack doesn’t work In the Langit template
Pliiiz I want U to answer me soon
@X-Tina: Blogger has already introduced the ‘read more’ hack officially and you really don’t need to customize your template manually now.