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 += ' '; 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;">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.
</div>
<div id="toc">
</div>
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