Details.

A helpdesk.

---

BlogToc HTML Markup

---

Illustration markup:

Markup	Description
{{ ... }}	contain the value of the BlogToc options. e.g. if you specified { blogtocId: 'my_blogtoc' }, the 'my_blogtoc' will be applied to {{blogtocId}}
{! if ( ~condition ) !} ~statement {! endif !}	conditional statement.
{! for( ~condition ) !} ~statement {! endfor !}	looping statement.
{\ continued \}	The above html markup could be rendered more than one
<!-- ... -->	The markup could be appear or not

Use Firebug or Chrome dev tools to inspect the html (Recommended)

When BlogToc is built (with or without user's option), it will generate some HTML markup as shown below

---

<div id="{{blogtocId}}" class="{{extendClass.blogtoc_id}}">
  <div class="blogtoc_loader {{extendClass.blogtoc_loader}}">
   {{progress.render()}}
  </div>
  <div class="blogtoc_notification"></div>
  <div class="blogtoc_content {{extendClass.blogtoc_content}}">
    <div class="blogtoc_header {{extendClass.blogtoc_header}}">
      {! if ( {{label.showLabel}} is true ) !}
        {! if ( {{label.cloudLabel}} is false ) !}
        <select class="blogtoc_label {{extendClass.blogtoc_label}}">
          <option value="{{label.setup}}">{{label.setup}}</option>
          <option value="...">...</option>
          {\ continued \}
        </select> 
        {! endif !}
        {! if ( {{label.cloudLabel}} is true ) !}
        <button class="blogtoc_label {{extendClass.blogtoc_label}} {{extendClass.blogtoc_btn}}">{{label.setup}}</button> 
        <button class="blogtoc_label {{extendClass.blogtoc_label}} {{extendClass.blogtoc_btn}}">...</button> 
        {\ continued \}
        {! endif !}
      {! endif !}
      {! if ( {{label.showAlphabetLabel}} is true ) !}
        {! if ( {{label.cloudAlphabetLabel}} is false ) !}
        <select class="blogtoc_alphabet {{extendClass.blogtoc_alphabet}}">
          <option value="{{label.setupAlphabet}}">{{label.setupAlphabet}}</option>
          <option value="...">...</option>
          {\ continued \}
        </select>
        {! endif !}
        {! if ( {{label.cloudAlphabetLabel}} is true ) !}
        <button class="blogtoc_alphabet {{extendClass.blogtoc_alphabet}} {{extendClass.blogtoc_btn}}">{{label.setupAlphabet}}</button>
        <button class="blogtoc_alphabet {{extendClass.blogtoc_alphabet}} {{extendClass.blogtoc_btn}}">...</button>
        {\ continued \}
        {! endif !}
      {! endif !}
    </div>
    <div class="blogtoc_filter {{extendClass.blogtoc_filter}}">
      <div class="blogtoc_display {{extendClass.blogtoc_display}}">
        <label>
          <select></select>
          {\ continued \}
          <span>{{language.display}}</span>
        </label>
      </div>
      <div class="blogtoc_search {{extendClass.blogtoc_search}}">
        <label>
          <span>{{language.search}}</span>
          <input type="text" class="blogtoc_query {{extendClass.blogtoc_query}}">
        </label>
      </div>
    </div>
    <table class="blogtoc_table {{extendClass.blogtoc_table}}">
      {! if ( {{table.showHeader}} is true ) !}
      <thead>
        <tr>
          {! for ( data in {{table.order}} ) !}
          <th>{{language[data]}}</th>
          {! endfor !}
        </tr>
      </thead>
      {! endif !}
      <tbody>
        <tr>
          {! for ( data in {{table.order}} ) !}
          <td>...</td>
          {! endfor !}
        </tr>
        {\ continued \}
      </tbody>
    </table>
    <div class="blogtoc_footer {{extendClass.blogtoc_footer}}">
      <div class="blogtoc_result {{extendClass.blogtoc_result}}">{{language.result}}</div>
      <div class="blogtoc_pagination {{extendClass.blogtoc_pagination}}">
        <ul class="{{extendClass['blogtoc_pagination ul']}}">
          {! if ( {{pagination.showFirstPage}} is true ) !}
          <li class="blogtoc_first_page">{{language.FirstPage}}</li>
          {! endif !}
          {! if ( {{pagination.showPrevPage}} is true ) !}
          <li class="blogtoc_prev_page">{{language.PrevPage}}</li>
          {! endif !}
          <!-- <li class="{{extendClass['blogtoc_pagination disabled']}}">...</li> -->
          <!-- <li class="{{extendClass['blogtoc_pagination active']}}">...</li> -->
          <li class="blogtoc_responsive_hide">...</li>
          {\ continued \}
          {! if ( {{pagination.showNextPage}} is true ) !}
          <li class="blogtoc_next_page">{{language.NextPage}}</li>
          {! endif !}
          {! if ( {{pagination.showLastPage}} is true ) !}
          <li class="blogtoc_last_page">{{language.LastPage}}</li>
          {! endif !}
        </ul>
      </div>
    </div>
  </div>
</div>

---

Creating Theme Bundle

---

Theme bundle is javascript file contains pre-configuration setting for theming BlogToc

Basic markup

---

(function(){
  
  var loadTheme = function( BlogToc ) {
    (function(){

      BlogToc.theme( 'theme_name', 'path/or/url/to/file.css', {
        // the shorthand of extendClass options
      });

    })();
  };

  if ( typeof window !== 'undefined' && window.BlogToc ) {
    loadTheme( window.BlogToc );
  }

})();

Example :

// BlogToc theme configuration
// theme : gotham
// author : Bruce Wayne
// filename : gotham.js

(function(){
  
  var loadTheme = function( BlogToc ) {
    (function(){

      BlogToc.theme( 'gotham', 'css/gotham.css', {
        "id": "gotham", // the blogtoc_id will have class name "gotham"
        "header": "bruce" // the blogtoc_header will have class name "bruce", etc...
        "table": "alfred",
        "footer": "batman",
        "pagination": "joker"
        // All the options in extendClass can go here, 
        // make sure you declare it without using "blogtoc_" keyword, because it's already shorthanded.
      });

    })();
  };

  if ( typeof window !== 'undefined' && window.BlogToc ) {
    loadTheme( window.BlogToc );
  }

})();

And then you save the file as gotham.js, and don't forget to also write your CSS rules in css/gotham.css

Example to use it :

// load your theme bundle first
BlogToc.addJS('gotham.js');

BlogToc(element).build({
  theme: {
    setup: "gotham" // must be a theme name in your theme bundle
  }
});

The next step is you might consider to add your theme bundle to our github repository ;)

---

Creating Translation Bundle

---

Translation bundle is javascript file contains pre-configuration setting for translate BlogToc to another language

Basic markup

---

(function(){
  
  var loadLang = function( BlogToc ) {
    (function(){

      BlogToc.language( 'language_code', {
        // the custom language options
      });

    })();
  };

  if ( typeof window !== 'undefined' && window.BlogToc ) {
    loadLang( window.BlogToc );
  }

})();

Example :

// BlogToc language configuration
// language : Bahasa Jawa
// author : Ki Joko Bodo
// filename : jv.js

(function( window, undefined ){
  
  var loadLang = function( BlogToc ) {
    (function(){

      BlogToc.language( 'jv', {
        labelAll: 'Kabeh',
        newLabel: 'Anyar',
        index: '#',
        thumbnail: 'Piguran',
        title: 'Irah-irahan',
        author: 'Empu',
        comment: 'Unen-unen'
        // All the options in language.custom can go here, 
    })();
  };

  if ( typeof window !== 'undefined' && window.BlogToc ) {
    loadLang( window.BlogToc );
  }

})( window );

And then you save the file as jv.js

Example to use it :

// load your translation bundle first
BlogToc.addJS('jv.js');

BlogToc(element).build({
  language: {
    setup: "jv" // must be a language code in your translation bundle
  }
});

The next step is you might consider to add your translation bundle to our github repository ;)