Blogger automatic read more

11/27/2010

The default Blogger template don’t have the auto read more future, unless you put it by yourself using “insert jump break” in your blog new post. Now I will guide you how to do it automatically.

STEP 1:
Log in to Blogger, go to Layout -> Edit HTML, and mark the Expand Widget Templates box.
Now find (CTRL+F) this in the template code:

</head>
And immediately ABOVE/BEFORE that, paste this code:
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='https://sites.google.com/site/markjue92/home/read-more_auto.js' type='text/javascript'/>

You can edit the numbers in red, if desired. If a post does not have photos, the length of the summary is 500. If a message contains image and text length will be 450, and the first image displayed will have the following dimensions:
width= 120, and
height= 100.

STEP 2
Once again in the template, find (CTRL+F) this:

<data:post.body/>
Then REPLACE that line, with this code:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/><b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<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 class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read More... <data:post.title/> </a></span></b:if></b:if>

You can edit the blue words above with your own words or you can place a picture. by putting this link:

<img src="Your-Picture-link" />

Save the template and ready to see the effect by clicking “View blog”.

 

Technorati Tags: ,

You Might Also Like

0 comments

Google+ Followers

Followers