November 2012

Blogger offers 2 options to sort your posts: sort by newest and sort by oldest. With Graddit widgets you can sort posts by their popularity. Look at this page: http://fruitfulbookmarks-en.blogspot.com/p/top-posts.html. It displays 5 top articles from this blog. And this one: http://fruitfulbookmarks-en.blogspot.com/p/top-posts-about-blogspot.html shows best posts announcements tagged with "blogspot".
These aren't regular posts, these are Bloggers static pages. If you'll open their source code you'll see that there are no actual posts, only some javascript code. To create your own pages like those you'll need:

create an account if you still don't have it;
create a desired top here;

add graddit-extras.js into <head> section of your template:

<script src='http://static.graddit.com/js/graddit-extras.js' type='text/javascript'/>

create static HTML page, switch to HTML edit mode and add jQuery, if you don't have it already in your template:
```
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
```

add JS function that will process your posts:

<script type='text/javascript'>
function gradditLoadTopPosts(id) {
    var element = $("#" + id);
    if (element.length > 0) {
      var wrapperDiv = $("#top5");
      if (wrapperDiv.length == 1) {
        element.find("a").each(function(i, a) {
          var host = a.hostname;
          var blogHost = "fruitfulbookmarks-en.blogspot";
          if (host.indexOf(blogHost) >= 0) {
            var docHost = document.location.host + "";
            var level1Doc = docHost.substring(blogHost.length, docHost.length);
            var level1Post = host.substring(blogHost.length, host.length);
            var link = a.href;
            if (level1Doc != level1Post) {
              link = link.replace(blogHost + level1Post, blogHost + level1Doc);
            }
            var containerId = "top_posts_" + i;
            wrapperDiv.append("<div id='" + containerId + "' style='display: none;'></div>");
            var container = $("#" + containerId);
            container.load(link);
            setTimeout(function() {
              var post = container.find("div[class='post hentry']");
              if (post.length > 0) {
                var newText = "";
                if (i > 0) {
                  newText = "<hr style='width: 100%; clear: both;'/>"
                }
                newText += gradditCutText(post.html(), 900, 2) + "<" + "br /><" + "br/>";
                var startIdx = newText.indexOf("<h3 class=\"post-title entry-title\">");
                var endIdx = newText.indexOf("</h3>");
                newText = newText.substr(0, startIdx) + "<a href='" + link + "'>" + newText.substr(startIdx, endIdx - startIdx + 5) + "</a>" + newText.substr(endIdx, newText.length);
                container.html(newText);
                container.show();
              }
            }, 2000 * (i + 1));
          }
        });
      } 
    }
}
</script>

Couple of words about changes you might need to make to this function in order to make it working with your blog:

#top5 - this is id if the container element, you'll see it below; depending on the template you might need to change the names of the classes;
in line var blogHost = "fruitfulbookmarks-en.blogspot"; replace blog URL with your own; do not include country domain (.com, .co.uk, etc.)!
when calling function gradditCutText to cut text of your posts there are few parameters you might want to change: second parameter is max length of text, third one allows you to control how to cut it (0 - do nothing, 1 - cut to word, 2 - expand to word). If you don't want to cut text then pass both parameters equal to 0;

add HTML elements and tops script call with callback function:

<div id="top5"></div>
<div id="graddit_top_wrapper" style="visibility: hidden; display: none;"></div><script type="text/javascript" src="http://www.graddit.com/showtop/eng/33?id=graddit_top_wrapper&callback=gradditLoadTopPosts"></script>

Make sure to change top id (33 here) to your own that should be taken from administer page (when you create/manage tops).

It should be ready now. Besides that tops got new parameter: labels. Now you can specify which posts (with what tags) should be displayed in tops widgets. So (if you're familiar with JS) on a page you can display top posts filtered by categories. Try it, let me know what you think.

Fruitful Bookmarks (eng)

Sunday, November 4, 2012

How to sort blogger posts by popularity