BlogToc v1.6.3 Guide

BlogToc Documentation ...

BlogToc v1.6.3

• Home
• Demo
• Extra
• FAQ

Options

---

Click Generate Button after finish customizing to view the change

[[renderCDN()]] google code URL

Blogspot URL

Important!

Your blogspot URL, without http:// or trailing slash e.g:
googleblog.blogspot.com

BlogToc

ID

Add custom ID to your widget, Otherwise will generate random ID

Binding

[[ binding[0] ]]

A callback function and will trigger
[[ binding[1] ]].

Try by alerting something!

Data Type

Type JSONP

The request method we're gonna using, either JSONP or JSON. In this demo the JSON method will not going to work because the request must be at the same domain of the blog url. (See Cross Domain Origin Policy)

• JSONP send asynchronous request by using <script> tag.
• JSON send request via ajax.

Date

Day

List of days. You can change the value. e.g: Sun,Mon,Tue,etc... (Days in 3 letter format) or any days name in your current language. But remember (!) the order are absolute, starting from Sunday to Saturday.

Month

List of months. Same as above, you can change the value according to your own preferences. Starting from January to December.

Render

Format how the date displayed. A callback function that requires 2 parameters ( date & option ) =>

callback( date, option ) {
// format the date...
}

option is the user options and date is JavaScript date object. The example above will likely output =>
Friday, August 30 2013

Display

Setup

The initial setup how many records will be displayed (Either a number, or string that represents to display all records).

Template

The initial template for list of records, You can change the value according to your own preference. The word "All" is marked as all records.

Extend Class

The main purpose of this option is mostly for custom styling by adding additional class to the structure of DOM that the widget generates.

[[ extend[0] | titlelize ]]

Add additional class to [[ extend[1] ]]

Feed

Append Query

Query parameter to be added when fetching the blogspot feed. e.g: &updated-min=2008-03-16T00:00:00
&updated-max=2008-03-24T23:59:59
&orderby=updated (See Blogger feed reference

).
Notes Do not use these forbidden query parameters => start-index, max-results, alt, callback. It will give unexpected response. Chunk Request

Split how many requests will be sent to fetch blogspot feed at one time.

Limit

Limit how many posts will be fetched. Set to 0 to fetch all posts.

Request Count

Set the max-results value. Maximum value is 500, and minimum value is 1.

Type default summary

The blogger feed type we're gonna using, either default or summary.

Label

Define (filter)

If it's not empty, include / exclude only the defined post label, depend on the "exception" option below.

Exception [[preModel.label.exception]]

The "define" option above must be specified. Set to true (Yes), will exclude only the defined post label. Set to false (No), will include only the defined post label.

Show Label [[preModel.label.showLabel]]

Show or Hide Post label.

Include Label All [[preModel.label.includeLabelAll]]

Include or not the "special label" that will display all posts.

Label "All Categories" text

Name of post label that will display all posts.

Label Setup

The post label that is choosen as default at the very start.

Show Label in "Cloud" mode [[preModel.label.cloudLabel]]

Show post label list in dropdown or cloud mode.

Show Alphabet Label [[preModel.label.showAlphabetLabel]]

Show or Hide Alphabet Label.

Include Alphabet Label All [[preModel.label.includeAlphabetLabelAll]]

Include or not the alphabet label that will display all posts.

Alphabet Label "All Data" text

Name of alphabet label that will display all posts.

Alphabet Label Setup

The alphabet label that is choosen as default at the very start.

Show Alphabet Label in "Cloud" mode [[preModel.label.cloudAlphabetLabel]]

Show alphabet label list in dropdown or cloud mode.

Symbolic Alphabet Filter

A callback function that return Regular Expression Object to filter symbolic character. Symbolic Character will be stored in "#" (hashtag) alphabet label.
The Example above will be parse to /^[0-9$-\/:-?{-~!"^_`\[\]]/i, means find character that not begin with alphabet.

Alphabet Member

Array of alphabet characters. So why this option included?
Not all country used standard alphabet (A to Z) which represent phonemes of their spoken language.

Language

Setup

The default language you're gonna using.

Custom
Overriding the current language based on your preferences. Checkout the language library for more detail. Leave the field empty if you want to use the default setting.

[[ custom[0] | titlelize ]]

Overriding the language for [[ custom[1] ]].

Result

Overriding the language for result. There's some language parsing which is described :
{begin} will be parsing to the first index number of the current visible records.
{end} will be parsing to the last index number of the current visible records.
{total} will be parsing to the total records (means total posts).
e.g Showing {begin} to {end} out of {total}.
will be parsing to
Showing 1 to 10 out of 120.

Error Message

Overriding the language for error message.

Link Target

[[ link[0] | titlelize ]]

[[ link[1] ]]

New Badge

Setup

The initial setup how many New badges will be glued to the newest published post (Must be a number).

Render

Format how the New badge displayed. A callback function that requires 1 parameter ( language ) =>

callback( language ) {
// display the label
}

language is the language you set in language section option, refer to this.

Notification

Enabled Notification [[preModel.notification.enabled]]

Enabled of disabled notification (Useful when you want to show notification to user if there's new published/updated post).

Interval

Interval time the widget check on the server whether there's new / updated post or not (Must be in miliseconds).

Number

Render

Format the number in index column, pagination, and page report. A callback function with 1 parameter ( idx ) =>

callback( idx ) {
// format the number
}

idx is the number.

Pagination

Adjacents

The pagination adjacents (Must be a number).

[[ pagination[0] ]] [[ preModel.pagination[ pagination[0] ] ]]

Show the [[ pagination[1] ]] pagination.

Post Label

Separator

The post label separator

Render

Wrapping each post label with custom html. A callback function that requires 1 parameter ( label ) =>

callback( label ) {
// wrap each label
}

label is post label name.

Progress

Render Need JavaScript knowledge

Customize the waiting progress animation. A callback function that requires 2 parameters ( elem & progress ) =>

callback( elem, progress ) {
// animate your waiting progress
}

elem is the element which the progress will be apended and progress is percentage value of the progress (the text of current loading).

Right To Left (RTL)

Right to Left Mode [[preModel.rightToLeft]]

Make the direction Right to Left.

Search

Marker Render

Marking the the string result that match with searching query. A callback function that requires 1 parameter ( match ) =>

callback( match ) {
// marking the matching query
}

match is the matching query string. The example above will bold the matching query text.

Sorting

Key

The initialization of sorting.

Order

The sorting order based on sorting key above, either ascending or descending.

Summary

Word Limit

Limit the text summary of your blog post (Must be a number).

Table

Order

The order of data that will be displayed in table

[[ order ]] width point

Calculate the width of [[ order ]] <thead> by point.

Theme

Use Built in Theme [[builtInMode]]

Choose between using the built-in theme, or your own custom theme.

Setup

At the current state, this widget only provides Twitter Bootstrap as the basic theme.
If you use your custom theme. You might be have to write your own CSS for customing.
You might consider to add your own custom theme to become one of our built-in theme by contributing on github page. More information about custom theme example and how to create theme bundle

Thumbnail

Blank

URL for transparent blank image, use for lazyload.

Not Found

URL for not found image, a fallback if thumbnail is not found.

Sample

URL for sample image, use for test the image on the fly service.

Blogpost Thumbnail Size

The thumbnail dimension size that was found in the blog post.

Author Thumbnail Size

The thumbnail dimension size for the author who publishes the post.

Show Author Thumbnail [[preModel.thumbnail.authorThumbnail]]

Show or Hide the author thumbnail.

Result

---

• Display
• How to use in your blog

Before you use it, please read LICENSE file
Place this code somewhere in the <head></head> section

optional You might consider to add setImmediate polyfill

Then add these codes below in your blog page or post (these are just a pre-built example. You can change these codes manually).

[[modelOneRender()]]

---

Coded by Cluster Amaryllis.