How To Add jQuery Related Posts Widget for Blogger

Guest Post - By 24work



>>> Related Posts Widget For Blogger / Blogspot with jQuery








How To Add jQuery Related Posts Widget for Blogger

Typical Usage #1

To display related links at the end of every post. copy this code into a new HTML/Javascript widget and place at the bottom of the post or at the footer in the page elements section. Widget uses jQuery v1.3.2, If you already included jQuery into your blog. no need to do it again.

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.


Now find (CTRL+F) this code in the template:

<data:post.body/>

And immediately after it, paste this code:

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>


<script src="http://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-widget-1.0-24work.js" type="text/javascript"></script>



<script type="text/javascript">

relatedPostsWidget({

'containerSelector':'div.post-body'

,'loadingText':'loading...'

});</script>

And now click Save Template




Typical Usage #2

To show related links at the side column. copy this code into a new HTML/Javascript widget and place at the side in the page elements section.Again, If you already included jQuery into your blog. no need to do it again.

How to Install Related Posts Widget related links at the side column


I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..



Step 1:



If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-widget-1.0-24work.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'loadingText':'loading...'
});</script>

And now click Save