"Related Articles" for Blogger, Advanced Edition, with paging

Script to create lists of related articles for Blogger Hoctro originally developed, then rolled out with plenty of editing. Of the "related articles" are now allowing configuration of the article shown and the article taken from each label. However, in case of need to list the large number of related articles is not yet capable script paging.In this article, I will guide you to do paging for them.

This script should suit the blogs listed a large number of relevant articles (such as files in 1 comic). If your blog does not have this need, please use the old version that you see fit.

How to install

Open your template in HTML editing mode (or download the template file to open), insert the following paragraph at the front of the card </ head> :

<Script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </ script><Style type = "text / css">.related-posts-navi a {border: 1px solid # 36c; background: #fff; color: # 36c; display: block; float: left; margin-right: 10px; padding: 2px 5px; text-decoration: none}.related-posts-navi a: hover {background: # 36c; color: #fff; text-decoration: none}.related-posts-navi .related-posts-navi-selected {background: # 36c; color: #fff}</ Style>

Then look in your template lines:

<B: widget id = 'blog1' locked = 'true' title = 'Blog Posts' type = 'Blog'>

then inserted directly behind the code in this link: http://pastebin.com/raw.php?i=jadhiYiU . Finally, find the location where you want to display relevant entries in the template and insert the following lines :

<B: include data = 'post' name = "related-posts' />

Customizing

Title of the related articles section defaults to "Related Posts". To fix it, you fix the seat back (in the code that you copied from the link http://pastebin.com/raw.php?i=jadhiYiU ):

<Div id = "related-posts"> <H3> Related Posts </ h3> <Ul id = "related-posts-list"> </ ul> </ Div>

(If you do not want displayed, can delete it) parameter customization of scripts are listed at the beginning of the code as follows:

var relatedPostsConfig = { maxPosts: 150, perLabel: 25, PerPage: 10, hiddenLabel: ['Label 1', 'Label 2', 'Label 3'] };

In particular: 
- maxPosts : only the number of posts involved (maximum) is displayed 
- perLabel : only the number of posts involved (maximum) per each label 
- PerPage : only relevant number listed article Statistics of 1 page 
- hiddenLabel : list the label is not shown, separated by commas. hiddenLabelused when your article has several labels, including one of special label that you do not want to list entries involved in it (eg 'Notification', 'Synthesis', ...). Then you only need to list the label of this type in turn hiddenLabel is finished. If you want to display all the label (not hidden label) does declare:

hiddenLabel: []

Tip : 
To make the relevant entries of the first label, configure maxPosts = perLabel

In addition, I also created one of the basic style for the page turning button, the CSS paragraph is inserted in the card head :

<Style type = "text / css">.related-posts-navi a {border: 1px solid # 36c; background: #fff; color: # 36c; display: block; float: left; margin-right: 10px; padding: 2px 5px; text-decoration: none}.related-posts-navi a: hover {background: # 36c; color: #fff; text-decoration: none}.related-posts-navi .related-posts-navi-selected {background: # 36c; color: #fff}</ Style>

The paging button on the form I of Flickr, if you prefer another style, you can customize according to their own CSS. Finally, wish you happy blogging. Any suggestions please leave comments below. 

Tweet