How to Add a Table of Content for your Blogger working in Automatically in Tamil

add a table of content in blog post working in automatically in tamil

How to add a table of content in blogpost working in automatically

How to Add a Table of Content In Blogger  working in Automatically in Tamil


first code. 1
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>


<script type='text/javascript'>            

//<![CDATA[                      

function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)            

{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
//]]>              
</script>
Second code. 2
]]></b:skin>
.mbtTOC{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%;}           
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}           
.mbtTOC ul {list-style:none;}           
.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}           
.mbtTOC a{color:#0080ff;text-decoration:none;}           
.mbtTOC a:hover{text-decoration:underline; }

        
.mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}           

.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}
Third code. 3
<data:post.body/> 
Note: If you will find more than one <data:post.body/> so replace all by this code below.
<div id="post-toc"><data:post.body/></div>
Fourth code. 4
<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Table Of Contents</button> 
    <ul id="mbtTOC"></ul> 

    </div>
<script>mbtTOC();</script>
Note: If you want to Change those colour 

Change background color O#FFFFE
Change border color #f7f0b8
Change font color #707037
Change Anchor link color #0080FF
Change the font size of anchor Links 15px  

Change the font size of TOC heading text 20px


COMMENTS

BLOGGER: 5

பெயர்

code,17,G knowledge,4,Indian government jobs vacancy,2,News,22,sco,10,social medias,3,TECHNICALLY,24,themes,13,
ltr
item
ROCKER MIX TEACH : How to Add a Table of Content for your Blogger working in Automatically in Tamil
How to Add a Table of Content for your Blogger working in Automatically in Tamil
add a table of content in blog post working in automatically in tamil
https://1.bp.blogspot.com/-kuPIs0GXO28/YAaCGzp39eI/AAAAAAAAGDg/b5Dv1QlZehMxv3drgSOW5MBwALNGk2vYACLcBGAsYHQ/w640-h360/blogger%2Btimer%2Bscript.jpg
https://1.bp.blogspot.com/-kuPIs0GXO28/YAaCGzp39eI/AAAAAAAAGDg/b5Dv1QlZehMxv3drgSOW5MBwALNGk2vYACLcBGAsYHQ/s72-w640-c-h360/blogger%2Btimer%2Bscript.jpg
ROCKER MIX TEACH
https://www.technologymixed.com/2020/04/How-to-add-blogger-table-of-content-working-automatically.html
https://www.technologymixed.com/
https://www.technologymixed.com/
https://www.technologymixed.com/2020/04/How-to-add-blogger-table-of-content-working-automatically.html
true
5937162308637394203
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content