How To Make an Editable Auto "Read More" with a Moving Shadowed Image Effect

Hello... last couple days, I started blogging again, and I forgot everything about how to make my blog looks good. I only use the standard template and I don't like it because it's too simple (of course it is!).  I want to make my home page filled with lots of my posts, but Blogger does not support that thing. So, I Google it and I actually found a trick on how to do it by shortening my post with an auto "read more" things.

After applying that trick, and I think it's amazing and also important for a new user of  Blogger, so, In this post,  I will explain about how to make a "Read More" in your blog's homepage and a little extra with a shadowed Image Effect which make it more beautiful. This "Read More" things is used to make post in the homepage minimalist. It's like a synopsis or a small quotes from your posts. 

In the standard template of Blogger, when you go into your Blog URL, it shows all your post and every words on it long way down until the end of the page and it makes the reader "exhausted" (lol), Now, in this Tutorial, I will tell you how to make your posts "shortened" in your homepage and if the reader want to read it just click "read more" and it will lead you the link the post. It makes the reader easy to read your blog.

To make this auto "read more", is so simple. You can do it in less the 5 minutes if you have good eyes and capability of reading script ( well, I'm not that good, it takes me more than that actually).

If you are a new blogger, you don't need to do anything before you start BUT if you an old blogger and you have used this kind of script before, then you might be have to delete your previous script. In this script you can edit the height and width of the script depends on how you want it to be. The previous or other scripts actually does not support this Editing on the script. Please remember that this is A NEW AUTO READ MORE SCRIPT. Ok, let's skip it to the case.

1. Log in to your Blogger account
2. Go to your Template and back it up by clicking "Back up/ Restore"
3. Click Edit HTML
4. Click anywhere inside the template box.
5. Press CTRL + F (for finding a code)
6.  Write and then find this code </head> using the search box by clicking Enter button
7. Copy all the HTML Script Below and Paste it above the </head> Code
   

<!--Auto Read More Mulai-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:280px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 280;
</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(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

<!--Auto Read More Akhir-->

8. Blue Code = Numbers of words you want to be showed (Change the number if you want)
9. Green Code = Size of the Image you wanted to be showed Change the size if you want)
10. Find <data:post.body/> code using the search box. There are more than one of this code, and you choose the second code by clicking 2 times the ENTER button.
11. Delete<data:post.body/> and change it with the code below:
    

    <!-- Auto read more Mulai -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <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>
          <div class='read-more'>
          <a expr:href='data:post.url'>Read More &#187;</a>
          </div>
    </b:if>
    </b:if>
    <!-- Auto read more Akhir -->

After you changed all the codes, click preview template, if you like the save the template. Now, go to your blog URL, and see what happen in your homescreen page. Here is my Screenshot of my blog after using this script.

Now, I think that's all for this tutorials, I hope you like it and Good luck! :)