Make Read More Link on Your Post Automatically

On About Read More on Your Post, we talk about the function of Read More. Here, I try to show you some steps to make it. I got this steps from a website a long ago, but the site cannot be accesed somehow. I hope this works well for you.

1. Log in to your account at blogger.com and then go to Template > Edit HTML. After that you will asked not to change the CSS code except for advanced users. We assume that we are advanced users and choose proceed.

2. Before adding new code, checked the checkbox of Expand Widget Templates.

 3. Look for this code </head> and then copy this code below and paste it right above </head>.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

4. Use Ctrl+f to search this code <data:post.body/> or <p><data:post.body/></p> and change it with this code below.

<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;padding-top:20px;'> <a expr:href='data:post.url'>&#187;&#187;&#160;&#160;Read More...</a>
</span>
</b:if> 
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. Save your Template and you post will be added by Read More automatically.

Note:
The blue text can be changed as your will.
--> summary_noimg =  Article's height cutoff without images
--> summary_img  Article's height cutoff with images
--> img_thumb_height = image's height to be showed on summary
--> img_thumb_width = image's width to be showed on summary

--> Read More... = can be changed READMORE HERE ...

3 Recommended Site for Parsing your HTML Code

Accordingly, there are 3 recommended site for parsing the HTML code. Here they are.

1. Centricle.com, the rule here is simple. Paste your HTML code in the box given there and then click Encode button. It will showed the parsed code that can then be pasted back in your blog. Click Decode button to return back your HTML code. Here is the screenshot.

2. Blogcrowds.com, quite same with number one's rule. Paste your HTML code in the box given there and then click red Parse button. It will showed the parsed code that can then be pasted back in your blog. Here is the screenshot.

3. Accessify.com, the last one has different name, it called quick escape (i.e; parse or decode-decode). Paste your HTML code in the box given there and then click Convert to escaped characters -> button. It will showed the parsed code that can then be pasted back in your blog. Here is the screenshot.

That's all. I hope it is useful.

How to Show HTML Code in A Post

This blog promises to provide a different way of blogging. For a moment, as a new comer, I feel down because I can not show some HTML codes that are needed to be showed. But, all I need to do is ask grandpa google and find some good articles.

For example:
I want to show this HTML code below to show you the code to make a link of my blog.

<a href="http://bloggingbydoing.blogspot.com">Tyo's Blog</a>

If I type the code and then showed as this link below (the link on your blog after paste it). But, I need to show the code, so you can copy it.
Tyo's Blog

The codes need to be parsed to be showed as a HTML codes. Manually, change <, > and " with &lt;, &gt;; and &quot;. So, we need to type this code in HTML mode:

&lt;a href=&quot;http://bloggingbydoing.blogspot.com&quot;&gt;Tyo's Blog&lt;/a&gt;

It is not an effective way if we parse a long HTML code manually. Can you imagine to parse this code below? When will you finish it?

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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(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>

 Finally, you can find how to parse or encode-decode this HTML code here.