JQuery: "Read More..." Button on Blogger Posts

I searched through Blogger settings to see if there was any way I could truncate posts on the home page view as my posts are generally lengthy. For visitors to this blog, it is very distracting to have to scroll through lengthy posts just to skim through material. Turns out there wasn't such a setting (at least given the time I was willing to spend searching) so I decided to inject my own jquery code to make it work.
Edit: I found the setting to do this in the layouts, but it's done through the rich text Compose editing.. which royally messes with the html I define so I'll stick with my method.

I have my own scripts saved in a customizations.js and hosted on a web server somewhere. You can insert the script as in-line code in the template but I would stick to an external file as the template in default state is already lengthy. In any case, I then added JQuery library by adding the following to the HEAD tag:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>

This "Read More.." button only needs to work in the desktop view and not on the mobile view of the blog home page hence I only insert the javascript code into the if-isn't-mobile condition. That if-else condition in the HEAD tag should looks something like:

<b:if cond='data:blog.isMobile'>
      ...
<b:else/>
      ...
      <script src='http://url/to/your/javascript/file/customization.js'/>
</b:if>

Now in my blog posts, I usually have an image at the beginning of the post (because nobody likes posts without pictures). So I have an image, some summary text and then the rest of the content. I wrap the rest of the content in DIV tags with the class name hidden-on-main-page. So it should look like the following:

 ... // Content that is displayed in home page

<div class='hidden-on-main-page'>

   ... // Content that isn't displayed on home page

</div>

This div with this class is hidden by default using a CSS style.

.hidden-on-main-page{
    display: none;
  }

Now in the javascript file, the trick is to identify whether the current page is a home page or an individual post page. Looking at the url pattern, I noticed that home pages do not have a .html suffix. So my condition to check would be to see if the url string contains the substring ".html". Whether this is the best condition to use will be determined in time if and when Google decides to change that system. So, putting that into javascript code looks like the following:

 if (window.location.href.indexOf(".html") >= 0) {
    // If this isn't the home page view, then we'll show the content
    $(".hidden-on-main-page").show();
  } else {
    // Loop through each of these elements with this class and replace them with 
    // a link with text "Read More.." and a source to the post entry page
    $(".hidden-on-main-page").each(function() {
        // Steal the link source from the post entry title
        var link = $(this).parent(".post-body.entry-content").siblings("h3.post-title.entry-title").find("a").attr("href");
        $(this).replaceWith("<b><a href='" + link + "'>Read more...</a></b>");
    });
  }

In my condition of when it is the home page, it will loop through all the div with the hidden-on-main-page class and replace itself with a link button that says "Read More...". The link source is taken from the entry title. As can be seen, what I did was I looked up into the parent DOM to look for .post-body.entry-content CSS class name selector and then look for an h3 sibling with the class name .post-title.entry-title. Finally I traverse down the DOM tree to look for an link and get the href attribute which is what I used to reconstruct a new link with the "Read More..." text. If you want some fancy background shading and hover effect using JQuery, this is where you would script it as well.

It's pleasantly surprising that Blogger gives you so much control to what you can modify.