Fruitful Bookmarks (eng)

Showing posts with label blogspot. Show all posts

Friday, January 25, 2013

Blogspot template with Graddit widgets: mlnpics

Download template

From time to time I'm going to modify and publish free Blogspot templates witn Graddit widgets included. First example mlnpics is based on Queen template from DZignine. Main page:

Post:

Key features:

used widgets: ratings, tops, aggregator;
default "Prev" and "Next" links are replaced with posts titles;
menu contains links to static pages, those pages display top posts (each page has it's own category). Order of the posts is controlled by graddit widgets and based on average rating. This kind of things are not provided by Blogspot platform by default — something that your visitors may find interesting;
users can navigate using Ctrl + left and Ctrl + right arrows, easier navigation = better user experience.

Live demo: http://mlnpics.blogspot.com.
Template source code is not yet published, please write your comments here if you think something should/might be changed. Download links will appear here later.

Important: template does not contain Graddit copyright, but it contains a copyright of the authors of the original template, that should stay untouched, you can not remove it.

Download template

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Sunday, November 4, 2012

How to sort blogger posts by popularity

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.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Tuesday, June 5, 2012

Sunday, October 23, 2011

Integrating Fruitful Bookmarks with Blogger (blogspot.com)

    The result of such integration you can see now on the left and on the right hand sides of this page (on top). Here is the explanation of what's that and how to do that.
    With the help of the links on the left hand side (↓ и ↑) visitors can save and load the position of reading. Of course, it gives only a part of the functionality provided by a real storage and bookmarklets, but it works without a storage and users (and even site administrator) don't need to create it. To implement it you need to take the second script from this page: http://www.fruitfulbookmarks.com/#site, change it a bit (to match Blogger template requirements, you need to change all 2 "&&" entries with its HTML analog "&") and add it to the template of your blog, for example at the end of it, right before closing </body> tag.

    The controls on right hand side help your visitors to report any errors, mistakes, misspellings, etc. to the blog administrator. How to get these controls is described here: http://fruitfulbookmarks-en.blogspot.com/2011/10/how-to-track-misspellings-and-errors-on.html. Modify styles as you wish and get a useful tool which makes your blog on blogspot.com more handy.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

How to track misspellings and errors on site or blog

Visitors can help you finding errors and misspellings in the texts on your site or blog. Misspellings, mistakes, inaccuracies, punctuation, all this will be found by the users and reported to you with the help of Fruitful Bookmarks services. To inplement it on your site you need to:

go to Fruitful Bookmarks;
create a storage, you'll need an identifier (ID containing 10 characters) of this storage for the next step;
add to HTML of your pages the styles and load the related controls (see example below).

The styles examples (names should remain the same):

div.ffbs_correction_main {
    position: fixed;
    top: 40px;
    right: 1px;
    width: 240px;
    height: 33px;
    border: 1px solid #20cc20;
    z-index: 9999;
    background: #ffe0e0;
    padding-left: 2px;
    padding-right: 2px;
    overflow: auto;
    opacity: 0.8;
    -moz-border-radius: 4px;
    border-radius:      4px;
}

span.ffbs_moreless {
    border-bottom: 1px dashed black;
    font-size: 8px;
}

span.ffbs_moreless:hover {
    cursor: pointer;
}

span.ffbs_lookup {
    border-bottom: 1px dashed black;
    font-size: 10px;
}

span.ffbs_lookup:hover {
    cursor: pointer;
}

span.ffbs_highlight {
    color: red;
    background: #d0d0d0;
    border: 1px dotted #0099cc;
}

    How to load the controls:
    <script src='http://www.fruitfulbookmarks.com/correction/init/ID OF YOUR STORAGE/eng/collapse'></script>

    Some details regarding this address: http://www.fruitfulbookmarks.com/correction/init/ID OF YOUR STORAGE/eng/collapse:

ID OF YOUR STORAGE — this is the 10-chars ID of the recently created storage;
eng — language of the controls;
"collapse" means controls will appear collapsed initially (only header, without suggested corrections). The other possible option is "expand";

    To suggest a correction user should select text and press Ctrl+Enter, then put corrected text into the popped up window. After page refresh the suggested correction will be shown in the corrections "window". Being expanded this window will show the users suggestions and sites administrator could fix the error.

    An example of how it could look like you can see at the right hand side of this blog (on top).

    If you found any issues with the algorythm, please comment.

    If you found any errors in this post, please use Ctrl+Enter to report.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Wednesday, May 4, 2011

Fruitfulbookmarks. Online bookmarks saving position.

Most of the online bookmarks services offer more or less the same set of features. Although it seems to be almost impossible to offer new functionality, Fruitful Bookmarks have something unique. This service allows you to save and restore position of view of the web pages. And not only pages, it works with images as well. Standard functions are also there, currently users are able to:

save bookmarks in one click (using bookmarklets). Position of view is saved along with URL and title and may be later restored in one click as well;
manage bookmarks using AJAX interface;
share bookmarks with other users;
have more than one bookmarks storage;
websites owners can integrate service into their pages;
and all this without need of registration.

How it works. To use this service you don't have to register; you need to create bookmarks storage and drag-n-drop offered bookmarklets on the panel of your browser (if you use Internet Explorer, you must first save bookmarklets to Favorites and then drag them to panel). Next steps are even more simple: click "↓" to save bookmark (and position); when you need to restore it click "↑". There are other options and also some limitations. For details please refer to help.
About all new features and bugfixes read in this blog. We hope you'll have a fruitful experience with our service.

More interesting articles

Rate this posting:

{[['

']]}

You might like:

Friday, January 25, 2013

Blogspot template with Graddit widgets: mlnpics

Sunday, November 4, 2012

How to sort blogger posts by popularity

Tuesday, June 5, 2012

Related posts widget update

Sunday, October 23, 2011

Integrating Fruitful Bookmarks with Blogger (blogspot.com)

How to track misspellings and errors on site or blog

Wednesday, May 4, 2011

Fruitfulbookmarks. Online bookmarks saving position.