Skip to main content

Decorate the Blogspot Item Page TOC with Font Awesome Icons


In one of my Blogger post Blogspot Single Post TOC(zh-hans), I've shared how one put a Table of Content DIV ahead of an Blogger main text. Here shows the way that we decorate the TOC anchors with Font Awesome Icons. Belows are how:

Install Item Page TOC Javascript


Edit HTML of your Blogger template.

Copy this block of javascript code below, and paste them before / devant the html tag /body to your blogger theme:

<script>
//<![CDATA[
/* Generate TOC
*
* :param classname: Class to which all TOC items belong.
* :param tocID: ID of the TOC element, should be <div></div>.
*/

function gen_toc(classname, tocID) {
var alltags = document.getElementsByClassName(classname); // all TOC items
var toc_content = "<h3>Table of Contents</h3><ol>"; // inner HTML content of TOC element
var toc_link = ' <a href="#' + tocID + '" class="tooltip" data-toggle="tooltip" data-placement="left" title="Jump back to the Table of Content"><i class="fa fa-table"></i></a>'; // link to TOC element for each TOC item
for (var i = 0; i < alltags.length; i++) {
var toc_item = alltags[i].innerText; // just the inner text from the TOC item's element, ie: no links
var toc_item_enc = encodeURIComponent(toc_item).replace(" ", "-").toLowerCase(); // make URL safe ID string
alltags[i].setAttribute("id", toc_item_enc); // set ID of TOC item
alltags[i].innerHTML += toc_link; // add back link to TOC from TOC item
toc_content += '<li><a href="#';
toc_content += toc_item_enc;
toc_content += '">';
toc_content += toc_item;
toc_content += '&nbsp';
toc_content += '<i class="fa fa-link"></i></a></li>';
};
toc_content += '</ol>';
console.log(toc_content);
var toc = document.getElementById(tocID); // TOC element
toc.innerHTML = toc_content;
};
document.body.onload = gen_toc("toc_item", "toc");
$(document).ready(function(){
$(this).tooltip();
});
//]]>
</script>

Then click save theme.

Post for TOC in your Blogger Blog


Input HTML code 
<div style="clear: both;">
</div>
<div id="toc">
</div>
at the beginning of your writing panel of a new post , which must be  the HTML edit mode. This would be the Table of Content block.

Then, on each of your subtitle of the Blogger post, input <h3 class="toc_item"> ahead of the subtitle and to the end. It should be similar like this on HTML edit mode:

<h3 class="toc_item">I am a charming subtitle</h3>

Prettify the Table of Content with CSS with Font Awesome Icons


To beutify the Blogspot TOC of a single post, you should include the Font Awesome JS file, by following Wayne Fu's guide. Before the /head> tag, add an outer link to the font awesome css file:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"></link>

Fill in the Blogger theme also with a CSS to express the TOC style:

.toc {
display: block;
}

Once again, remember saving your theme.

Now, go to visit your own post after you publish it.

Comments

TOP