Please need help if any somebody here know how to make Read More link at blogger beta?

I hope step by step with example code.

Thank

I posted this a while back, here, for the "old school" blogger...but the principle is the same. You'll probably have to edit the Blogger tags, since I'm sure they have changed since they switched to widgets.

1) Add this javascript code to your template's header (line just above </head>):

<script type="text/javascript" language="JavaScript">
	<!--
	function showMore(postId, postLink)
	{
		postBodyId = "postbody" + postId;
		showExtLink = "showlink" + postId;
		hideExtLink = "hidelink" + postId;
		if (document.getElementById)
		{
			var postElement = document.getElementById(postBodyId);
			var fullPostElement = null;
			var showExtLinkElement = document.getElementById(showExtLink);
			var hideExtLinkElement = document.getElementById(hideExtLink);
			// find fullpost div
			if (postElement)
			{
				for (var j = 0; j <postElement.childNodes.length; j++)
				{
					if (postElement.childNodes.item(j).className == "fullpost")
					{
						fullPostElement = postElement.childNodes.item(j);
						break;
					}
				}
				if (fullPostElement)
				{
					// show
					if (postLink != 0)
					{
						fullPostElement.style.display = "block";
						showExtLinkElement.style.display = "none";
						hideExtLinkElement.style.display = "block";
					}
					// hide
				else
					{
						fullPostElement.style.display = "none";
						showExtLinkElement.style.display = "block";
						hideExtLinkElement.style.display = "none";
						location.href = '#'+postId;
					}
					return false;
				}
			else
				{
					location.href = postLink;
					return true;
				}
			}
		else
			{
				location.href = postLink;
				return true;
			}
		}
	else
		{
			location.href = postLink;
			return true;
		}
	}
	function initShowLink (postId)
	{
		postBodyId = "postbody" + postId;
		showExtLink = "showlink" + postId;
		hideExtLink = "hidelink" + postId;
		if (document.getElementById)
		{
			var postElement = document.getElementById(postBodyId);
			var foundFullPostElement = 0;
			var showExtLinkElement = document.getElementById(showExtLink);
			var hideExtLinkElement = document.getElementById(hideExtLink);
			// find fullpost div
			if (postElement)
			{
				for (var j = 0; j <postElement.childNodes.length; j++)
				{
					if (postElement.childNodes.item(j).className == "fullpost")
					{
						foundFullPostElement = 1;
						break;
					}
				}
				if (foundFullPostElement == 1)
				{
					showExtLinkElement.style.display = "block";
					hideExtLinkElement.style.display = "none";
				}
			else
				{
					showExtLinkElement.style.display = "none";
					hideExtLinkElement.style.display = "none";
				}
			}
		}
	}
	//-->
</script>

2) in your stylesheet (just above </style>) add this:

.fullpost { 
	<MainOrArchivePage>
		display: none;
	</MainOrArchivePage>
	<ItemPage>
		display: block;
	</ItemPage>
}

3) Find the tag <$BlogItemBody$>. This is the tag that displays your post text. This tag might be between <p></p> or <div></div> tags.

4) Add this code to the opening <p> or <div> tag before the <$BlogItemBody$> tag:

 id="postbody<$BlogItemNumber$>"

So it looks like this:

<div id="postbody<$BlogItemNumber$>">

5) Add this code below those <p> or <div> tags surrounding the <$BlogItemBody$> tag:

<!--  START SHOW/HIDE MORE BLOCK  -->
<MainOrArchivePage>
<div style="display:block;" id="showlink<$BlogItemNumber$>"><a href="<$BlogItemPermalinkURL$>" onclick="showMore('<$BlogItemNumber$>', '<$BlogItemPermalinkURL$>');return false;">Read More &raquo;</a></div>
<div style="display:none;" id="hidelink<$BlogItemNumber$>"><a href="#" onclick="showMore('<$BlogItemNumber$>','');return false;">&laquo; Hide Post</a></div>
<script type="text/javascript" language="JavaScript">
	<!--
	initShowLink('<$BlogItemNumber$>');
	//-->
</script>
</MainOrArchivePage>
<!--  END SHOW/HIDE MORE BLOCK  -->

6) Save template.

7) Now, go to Settings >> Formatting, scroll down to the bottom and add this in the Post Template box and save:

<div class="fullpost"> </div>

7) Republish entire blog.

8) Now, any text you put above the <div></div> tags will show up on your main page, anything you but between the <div></div> tags will only show up on the main page when you click the read more (the read more link doesn't show on permalink pages, btw).

NOTE: You WILL have to edit each post indivitually to include these <div></div> tags where you want to hide the expanded post!!!

If you just want to write a short post, delete the div tags, and no read more link will display.

sounds complicated lol

Yeah. The only advantage blogger has, is its ease to use. If things start getting complicated like this, its better to switch over to Good ol' Wordpress. Blogger lacks a lot of powerful features and the code is inefficient. It also lacks flexibility.