How To Add A Related Post Widget

There is a reader of this blog who asked Kang Rohman on how to make a Related Post Widget in blogger. Well…can we make it? Don't worry because I can make it for you and it is easy.

There are some advantages by adding related post widget in our blog; the readers will be able to find the articles that relate to the article they reading and it also gives an advantage for the blow owner because the readers can stay in the blog longer.

If you are interested in adding that widget, just read the guide below;

1. Log in into blogger with your ID
2. Click Layout
3. Click EDIT HTML tab
4. Click Download Full template. Please back up your template first
5. Please download the script first
6. Give a mark next to Expand Widget Templates and wait for a few seconds until the process is over.
   
7. Find the code below (focus on red code):

   <div class='post-body entry-content'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
   

8. Copy and paste the script you have downloaded right under the code <data:post.body/>
9. Click SAVE TEMPLATE
10. Finish and check the result

The above steps are for those who still the original template and does not use read more feature. If you use a template that has been modified with Read More system just like Kang Rohman Blog, just follow the steps below;

1. Log in into blogger with your ID
2. Click Layout
3. Click EDIT HTML tab
4. Click Download Full template. Please back up your template first
5. Please download the script first
6. Give a mark next to Expand Widget Templates and wait for a few seconds until the process is over.
   
7. Find the code below (focus on red code): :

   <b:if cond='data:blog.pageType == "item"'>
   <style>.fullpost{display:inline;}</style>
   <p><data:post.body/></p>
   <b:else/>
   <style>.fullpost{display:none;}</style>
   <p><data:post.body/>
   <a expr:href='data:post.url'><strong>Read more...</strong></a></p> 
   </b:if>
   

8. Copy the script you have downloaded, then paste you see below :

   <b:if cond='data:blog.pageType == "item"'>
   <style>.fullpost{display:inline;}</style>
   <p><data:post.body/></p>
   Paste Your Script here!
   <b:else/>
   <style>.fullpost{display:none;}</style>
   <p><data:post.body/>
   <a expr:href='data:post.url'><strong>Read more...</strong></a></p> 
   </b:if>
   

9. Click SAVE TEMPLATE
10. Finish and check the result

Good Luck!!!