I have been looking for a way to insert a table of contents to my blogger blog posts that is built automatically.
This is the solution I have found.
Thanks to
MyBloggerTricks (MBT) for sharing this one.
It seems there is an issue if you have line breaks in the heading html source.For this I use this AHK script to clean-up:
sHtml := StrReplace(sHtml,"<h2>`r`n","<h2>")
sHtml := StrReplace(sHtml,"<h3>`r`n","<h3>")
This is my tailoring of the TOC so it looks simple (white) and left-aligned/ not centered:
/*####TOC Plugin V2.0 by MyBloggerTricks####*/
.mbtTOC2 button{background-color: #FFF; font-family:oswald, arial; font-size:22px; outline:none;border:none; margin:0; padding:0}
.mbtTOC2 button a {cursor:pointer;}
.mbtTOC2 button a:hover{ text-decoration:underline; }
.mbtTOC2 button span {font-size:15px; margin:0px 10px; }
.mbtTOC2 li{margin:10px 0; }
.mbtTOC2 li a {text-decoration:none; font-size:18px; text-transform:capitalize;}
.mbtTOC2 li a:hover {text-decoration: underline;}.mbtTOC2 li li {margin:4px 0px;}
.mbtTOC2 li li a{ font-size:15px;}
.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}
/* END ####TOC Plugin V2.0 by MyBloggerTricks####*/
In case the resource page get downs here the
copied documentation how it is setup.
Installation Guide
TOC Plugin can easily be installed on any platform. Whether it is a wordpress site, blogspot blog or a simple HTML page. The installation guide consists of three main steps:
- Add the JS script and CSS code above </head> tag
- Enclose the content section with ID "post-toc"
- Add the container Div and the calling function to the page where you wish to display the TOC.
For simplicity, I will discuss the installation steps for blogger blogs only. You can get an idea from these steps in order to integrate the plugin on your 3rd-party CMS platforms.
Add a 'Table Of Contents' In Blogger Posts & Pages
Most blogspot users refer to this plugin as a Table Of Contents widget while in fact it is just a script that needs to be added inside the template and post editor. So using the word widget would be incorrect here, so lets just call it a TOC plugin in short.
Follow these easy steps:
- Sign in Blogger > Template
- Backup your template
- Click "Edit HTML"
- Just above
</head> tag paste the following source links:<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC Plugin V2.0 by MyBloggerTricks.com
function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")}
//]]>
</script>
- Next search
]]></b:skin> and just above it paste the following CSS code:/*####TOC Plugin V2.0 by MyBloggerTricks####*/
.mbtTOC2{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:Oswald, arial;display: block;width: 70%;}.mbtTOC2 button{background:#FFFFE0; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;padding:0 0 0 15px;}.mbtTOC2 button a {color:#0080ff; padding:0px 2px;cursor:pointer;}
.mbtTOC2 button a:hover{ text-decoration:underline; }
.mbtTOC2 button span {font-size:15px; margin:0px 10px; }
.mbtTOC2 li{margin:10px 0; }
.mbtTOC2 li a {color:#0080ff; text-decoration:none; font-size:18px; text-transform:capitalize;}
.mbtTOC2 li a:hover {text-decoration: underline;}.mbtTOC2 li li {margin:4px 0px;}
.mbtTOC2 li li a{ color:#289728; font-size:15px;}
.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}
/*
.point2 {list-style-type:lower-alpha}
.point3 {list-style-type:lower-roman}
.point4 {list-style-type:disc}
*/
Make these custom changes if you want:
- To change background color of container box edit #FFFFE0
- To change border color of the box edit #f7f0b8
- To change font color of the headline text edit #707037
- To change anchor link color edit #0080ff
- To change link hover color edit #289728
- If you would like to show the alpha-numeric & roman list style then delete the green highlighted chunk of code and also the two yellow highlighted lines. This will remove the nested numbered list and replace it with alpha-numeric.
- Finally search for
<data:post.body/> and replace it with the code below:Note: You will find this code two or more times inside your template, so replace all its instances with the code below especially the second occurrence. TOC Plugin will not work if you replace <data:post.body/> just once.
<div id="post-toc"><data:post.body/></div>
- Save your template and you are all done!
How To Show TOC Inside a Post or Page?
Add TOC to only those blog posts which are long and lengthy in length with several subheadings. Adding it to a blog post with just three or less headings does not make sense.
You can add a dynamic TOC inside a blog post in two easy steps.
Step #1 Mention Location Of TOC Container
It is best to display TOC right after your starting paragraph or show it before the first heading on your blog post.
To do this, switch to "HTML" mode of blogger editor and then paste the following HTML code just before the first heading.
<div class="mbtTOC2">
<button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div>
Step #2 Call The TOC Function
Finally, its time to invoke the plugin so that it could auto-generate a TOC on page load,
To do this, paste the following JS code at the bottom of your blogger editor where your post ends:
<script>mbtTOC2();</script>
No comments:
Post a Comment