Related Posts Slideshow Widget For Blogger

Give related posts on a post is one of webmaster condition. Before, we have similar tutorial. But that tutorial less interactive. So, on this post we have been making related posts slideshow widget for all blogger users.

Example of related posts slideshow widget

This widget has many advantages. You can set a lot of related posts without spend post area. This widget very different with other related post widget. We have made control to make this widget more interactive. So that, your visitors can search and choose related posts more easy.

Before we make this widget, we have researched about human pattern when someone want to choose related post. Where visitors are not simultaniously choose related posts. They will see one by one almost all related posts. Then they do the same way for several times, until they find the most interesting related posts. On the other side, dynamic related posts based on slideshow jquery will make your visitors like to spot this widget.

Like other tutorial from us, we have made this widget is work on all browser. So you don't have to worry if you use this widget in your blog.

Implement

To implement this widget in your blog, follow this instruction:

1. Open your blogger dashboard
2. Click your blog name
3. Click Template
4. You will see template code on lighbox, then click Proceed
5. Click Expand Widget Templates
6. Search <data:post.body/> : If you use Read More widget, then choose the last <data:post.body/>
7. Put the code below after <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'>

<h2 style='margin-top:28px;'>Related Posts</h2>

<div id='agenda'>Loading...</div>

    <script src='http://for-threelas-site.googlecode.com/files/newthreelasrelatedposts.js'/>

<script type='text/javascript'>

var trp_width=550;

var trp_totalposts=9;

</script>    

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=trpwidget&amp;max-results=10&quot;' type='text/javascript'/>

</b:if>

</b:loop>

</b:if>

After that, save your work. Where trp_width is widget width, trp_totalposts is the number of related posts, all values of these variables is interger only. And maximum number of related posts is 10 posts. Yup, you don't need to add any css code. Making this widget more easy to implement in your blog. Once again, you must put

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> in your blog before </head>. But you can change it with latest version or from <script src="http://code.jquery.com/jquery-latest.js"></script>

Basically, this widget work based on JSON API. If you like to learn JSON API, you can go to Basic Blogger JSON API on this site. Or you can learn Blogger API on this site too.

This widget is version 1, there will be another version of this widget. And we will make this widget more interactive. This widget is made by Ibnu Syuhada. And if you like with our tutorials, free widgets, then please help us with give donation. Your donation we will use to running this site, so that we can always give you the best tutorials.

Update August 28, 2012
We announce that, we have create another javascript source for related post slideshow. This new code can run even your blog has no image. Try new code below

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'>

<h2 style='margin-top:28px;'>Related Posts</h2>

<div id='agenda'>Loading...</div>

    <script src='http://plugin-codes.googlecode.com/files/threelasrelatedposts-v-1.js'/>

<script type='text/javascript'>

var trp_width=550;

var trp_totalposts=9;

</script>    

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=trpwidget&amp;max-results=10&quot;' type='text/javascript'/>

</b:if>

</b:loop>

</b:if>