Displaying related posts is a smart way for keeping your site visitors around and with thumbnails it is even smarter!
Check out this easy setup wizard for demos and code generation. Also, to have code copied to your Blogger blog!
Few Notes
- Code consists of 2 important parts
- Including CSS and Javascript files (jQuery library & widget in that order). Each file only needs to exists one time on a page regardless of how many widgets you have on that page. You can include the Javascript files at <head> section or by the end of the page.
- Placing the container DIV where you want widget to appear, setting class attribute as "related-posts-widget" to have widget automatically loaded! And setting widget options either in an inner HTML comment or in a HTML5 attribute 'data-options'.
- Although previous parts are all you need, You can still call widget at document-ready on a HTML element identified by some selector and pass options in the method call.
- Plugin was also tested to work with jQuery v1.3.2 and v1.2.6, Just replace jQuery Javascript source to "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
Or "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" - Post thumbnail is usually the first image you insert in the post and it is automatically extracted by Google Blogger and that image must be uploaded to PicsaWeb - directly or through Blogger post editor.
New Features
- Display related posts with/without thumbnails.
- Since, images added to Blogger posts are uploaded to PicasaWeb, you can use many custom thumbnail sizes.
- You can use one of 2 CSS styles to help you get started quickly.
- Display posts with transition effects or as a fixed list.
- Many transition options are available like opacity, width, height, font-size.
- Optional timeout technique is used to finish widget loading when one or more feed requests were not completed successfully, instead of waiting indefinitely.
- Thumbnails loading is delayed until widget has finished aggregating related posts to avoid loading extra images
- You can customize it by placing optional parameters -like custom animation- in a HTML comment or HTML5 data attribute.
- You can disable widget if current page is not a post page.
- Widget was rewritten as a jQuery plugin, use a typical jQuery call to load it or auto-load any number of div elements with "related-posts-widget" class in the same page.
Old Features
As in version 1.0, this widget..- Is easier. No need to edit your Blogger template.
- Is smarter. Posts are aggregated and sorted according to post tags that are already displayed in post page.
- Is optimal. It queries summary feeds of your blog instead of querying default feeds that return full contents.
- Can work as recent posts widget too.
- Can work with fixed list of tags instead of using current post tags.
0 comments:
Post a Comment