All Ways To Add READMORE Hacks In Blogger

Allright it seems much new blogger wants to know How To Add READMORE HACKS like in wordpress to blogger powered blog. It's easy IF we know the way. Now i'm going to explain 2 hacks to add readmore hacks in blogger. Before this, somebody ask me " Is it okay to add readmore on blogger? What about SEO? Is it has no Bad effect for SEO?" Okay, first of all I'm NEWBIE too in blogging. Seconds, so far it's been six months i'm using this hacks and till now it seems no bad of it for SEO. For my experience, if you use META TAG and Auto META TAG Generators for each posts in blogger, then you NO need to worry about it.

Okay let's STEP to the WAY :

1. Readmore Hacks 1

To add readmore, we need to edit our templates. Go to Layout >> Edit HTML >> Expand Widgets Templates :

Now add script below above the </head>

Code :

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>

# Now Look for the code looks like below

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/>
<!-- clear for photos floats -->

Add the red code below inside above code or the last code will be look like below

<div class='post-body' expr:id='"post-" + data:post.id' >
<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>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Okay it's done for templates. Now go to Setting >> Formatting >> Post Template
Put code below in your post templates area. code :

Type your summary here

<span id="fullpost">


Type rest of the post here


</span>

# Save it. Now everytime you post something must be like this below.

Type your summary here. This text only appear in your homepage. put one paragraph or whatever you want. you can even put image here.

<span id="fullpost">

Type rest of the post here. This all the rest of your post. you can write everything here.

</span>


2. Add AUTO Redmore Hack in blogger.

This hacks will be useful for those who have much of post and don't have a time to edit each post manually.

# Put code below before the </head> Code

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

Done. Now # Look for the <data:post.body/> code
Replace it with code below.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><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>

Save it. Remember This.
var thumbnail_mode = "float"; (You decided how your thumbnail goes. float left of float right. you can even put no-float if you don't want it floating.)
summary_noimg = 250; (Your summary if no image)
summary_img = 250; (Your Summary If There is An Image)
img_thumb_height = 120; (Your image height Thumbnail)
img_thumb_width = 120; (Your image width Thumbnail)

Done.