So to install JDK, you’d first need to download the installer to your PC. To do that:

• Go to the Oracle SDN’s Java downloads page.
• Click on the appropriate package you want to download. If you’re a beginner, you’d want to download the basic package (see image below). 

Just click on the JDK link.

• In the new page that loads, select your appropriate Operating System and click on the red download button. You will be prompted to sign-in or register. You could do so if interested. If not just click on the close sign (on the top-right of the box).
• You will now be redirected to a page, and your download should start automatically.
• After the file has downloaded (its an executable), double-click on the file to begin installation. Continue on like a normal installation. There will be a download taking place at the 4th window, and may take some time on computers with slower internet connection.
• When the “Complete” screen appears, click on the “Finish” button.

Thats it, you’re good to go!

You could also refer to this video tutorial for help:

You can view the video tutorial here. For an image only tutorial follow on below. You can get the code’s shown in the video from below:

OK. So the installation goes as this:

• First login to your blogger account and under the blog in which you want to implement the related posts, click onLayout. Next click on Edit HTML.
• Now check the Expand Widget Templates check-box (as shown below). This check-box is found on the top-right of the box containing your template’s code. 
• Now press Ctrl+F to bring about your ‘Find Box’ in your browser, and search for the following code.

  </head>

  Now replace it with the following code (Code Listing 1.1):

  <!--Related Posts Scripts and Styles Start-->
   <!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
  <style type="text/css">
  #related-posts {
  float:center;
  text-transform:none;
  height:100%;
  min-height:100%;
  padding-top:5px;
  padding-left:5px;
  }
  #related-posts .widget{
  padding-left:6px;
  margin-bottom:10px;
  
  }
  #related-posts .widget h2, #related-posts h2{
  font-size: 1.6em;
  font-weight: bold;
  color: black;
  font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
  margin-bottom: 0.75em;
  margin-top: 0em;
  padding-top: 0em;
  }
  #related-posts a{
  color:blue;
  }
  #related-posts a:hover{
  color:blue;
  }
  #related-posts ul{
  list-style-type:none;
  margin:0 0 0px 0;
  padding:0px;
  text-decoration:bold;
  font-size:15px;
  text-color:#000000
  }
  #related-posts ul li{
  background:transparent url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) no-repeat ;
  display:block;
  list-style-type:none;
  margin-bottom: 13px;
  padding-left: 30px;
  padding-top:0px;}
  </style>
  
  <script type='text/javascript'>
  var relatedpoststitle="Related Posts";
  </script>
  <script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/>
  
  <!--Remove--></b:if>
  <!--Related Posts Scripts and Styles End-->
  </head>

  To change how title of the related posts widget appears, edit the text in green. To change the green tick-mark appearing beside your related posts edit the url marked in blue.

• Now search for

  <div class='post-footer-line post-footer-line-1'>

  or

  <p class='post-footer-line post-footer-line-1'>

  and immediately after any of these lines(whichever you could find) place the code below (Code Listing 1.2):

  <!-- Related Posts Code Start-->
  
  <!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-posts'>
  <b:loop values='data:post.labels' var='label'>
  
  <b:if cond='data:label.isLast != &quot;true&quot;'>
  </b:if>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  
  <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
  
  <script type='text/javascript'>
  var maxresults=5;
  removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
  </script>
  </div>
  
  <!--Remove--></b:if>
  <!-- Related Posts Code End-->

  You can change the number of related posts to be displayed by editing the number in pink.

• To show related posts on all pages, just delete the text in red from both of the code listings.

Thats it, your done! Have any troubles? Comment, I’m right here to help!

• Login to your Blogger Dashboard.
• Now search for the following tag:
  

  <body>

• Now replace this with the following code:
  

  <body onLoad=’init()’>
  <span id=’loading’ style=’font-weight:bold;position:absolute;font-size:13px; text-align: center; margin-left:auto;top:1px; background-color:#FFD363;’>Loading Page…</span>
  <script>
  var ld=(document.all);

  var ns4=document.layers;
  var ns6=document.getElementById&amp;&amp;!document.all;
  var ie4=document.all;

  if (ns4) ld=document.loading;
  else if (ns6)
  ld=document.getElementById(&quot;loading&quot;).style;
  else if (ie4)
  ld=document.all.loading.style;

  function init() {
  if(ns4){ld.visibility=&quot;hidden&quot;;}
  else if (ns6||ie4) ld.display=&quot;none&quot;;
  }
  </script>

This would give the following effect:

For further customization you could replace the line in the red with the url of an image (eg. Inserting the link ‘http://media.techwithric.com/img/ajax-loader.gif’ would replace the yellowish loading text with the following image)

Have further queries? Please do comment!