Switch to Template Gallery

Sabtu, 20 Juni 2009

Read More Feature For Blogger

There are two kind of "Read More" Feature, Manual read more and automatic read more(third is Expandable read more, but i don't include it to this post). Think it first before you choose what kind of read more feature you will use, because both of this feature have positive and negative point. Example, some paid review advertiser required the review does'nt use "read more".

# Manual Read More Feature

1. Open Edit HTML

2. Check "Expand Widget Templates"

3. Search this code

<data:post.body/>

4. Change the code above with this code

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>
</b:if>

5. Save

Include the read more code in your post like this.

SUMMARY POST.......
<span class='fullpost'>
POST CONTINUE/HIDE POST...
</span>

# Automatic Read More Feature(Using file hosting)

Step 1-3 same as Manual read more step

4. Change the code above with this code

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://herro.fileave.com/readmore-matic.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more......</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. Save

Note:
summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width
Download this javascript file to use your own file hosting : readmore-matic.js


# Changing "Read More" text with "Read More" image

Modify This Code

<a expr:href='data:post.url'>Read More......</a>

Like this(example only)

<a expr:href='data:post.url'><img src="http://imagehosting.com/imagename.jpg"/></a>


2 komentar:

Djz mengatakan...

how can we show orginal size of image in script

News Blog mengatakan...

your post is really Helpfull For me.............Thanks alot

Poskan Komentar

 

Follower

Btheme Blog | Copyright 2008-2009 ©  Design by Herro | Powered By Blogger