Learn More

Wednesday, May 2, 2012

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.

Related posts slideshow widget
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>

  1. Terimakasih atas informasi tentang widget barunya Sobat.

    ReplyDelete
  2. kalo lebih dari satu labelnya? yg ke ambil yg terakhir ya?
    good good, ty ty

    ReplyDelete
    Replies
    1. Pada dasarnya dari Google Data API, seharusnya bisa menggunakan lebih dari satu label, namun untuk blogger hal itu tidak bisa, jadi saat ini hanya bisa satu label akhir

      Delete
    2. Kalau mau lebih dari satu label hapus saja labelnya:

      /feeds/posts/default?alt=json-in-script&callback=trpwidget&max-results=10

      Tapi kalau begini jadinya lebih mirip seperti recent-post dibandingkan related post.

      Delete
    3. Jangan gunakan feed itu, karena anda akan mendapatkan posting-posting terbaru, bukan posting terkait. Tunggu saja informasi dari kami, kami akan konfirmasi ke pihak blogger bahwa format feed blogger ada yang tidak sesuai dengan Google Data API.

      Delete
  3. Sip ba putri. Ba ternyata berubah tata letak juga ya "jaga-jaga Google pinguin" harus bersih-bersih :)

    ReplyDelete
  4. Aku sekarang ini masih nyaman gunain LinkWithin :)

    ReplyDelete
  5. hmm..nice tips.
    thanks, however i'm still confident to use wp.

    ReplyDelete
  6. Very good info. Thanks
    http://filehomes.com

    ReplyDelete