How to Make Automatic Read More Button

Yeah... Finally, I've found how is the way to make our blog homepage become simple...!!! For you who is new in blogging, I'm sure that this tips is very usefull for you. This is about making an Automatic Read More button. This feature will make your blog homepage will be simple like this blog. And by this, many of your article can be exposed in the first page. Wanna know more?


Do you know about "Read-More" button? Okay. Now, remember when you visit someone's blog. Usually, in the homepage, it shows full of some articles. When you want to find more than it, right?

By using Read-More button, some of your post (1 to 10 posts) can be appeared in one page. So, they will be able to be seen by the visitor. So that, your post can be read by many people too.

Usually, in ordinary other blog you find about this, you just found how is the way to make Read-More button. But, special for you all, here I'll give you about the automatic one.


The ordinary Read-More button script should be applied in every you'll publish your post. Every you'll post an article, you should copy-and paste it's code in your article HTML. You know? It's very old-fashioned guys. Now, let me give you the hundreds more simple way how to add Read-More button in your each post in one step. Automatically, it will be appeared when you publish your post.

Here are the way:

1. First, log in to your account in Blogspot.com. Then in your Dashboard, click on Design--> Edit HTML

2. Before you modify your HTML code (template), I recomend you to Download Full Template first, so that if there's something wrong in the code, your blog appearance won't be destructed.

3. After that, give a check in Expand Templates Widget.





4. Use Ctrl+F on your keyboard to find this code: </head>

5. Then, copy and paste the following code just below the code.

<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='YOUR_BLOG_ADDRESS' type='text/javascript'/>

6. After that, find this code: <data:post.body/> or <p><data:post.body/></p>

7. Change it with the following code:

<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;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

P.S: The red text (READMORE...) can be changed by other words, such as: "Read Full Post...", "Continue Reading...", etc...

8. Finally, click Save Template


Now, check your blog homepage. You'll find some of your article will be appeared there partically and your READ-MORE button. Now, every you want to publish your post, you don't need to do anything again, because this READ-MORE button will be automatically available under your post in homepage.. :)

ENJOY...!!!

AND...NOW, I KNOW...!!!

(c) Written by: Nanda Firsta
Source: Own Experience