How To Add Table Of Contents In Blogger ?
 |
| How To Add Table Of Contents In Blogger ? |
Adding Table Of Contents Increase Your Website Ranking In The Search Engines By Showing Feature Snippet Or Jump To The Links In The Blog Page. If Your Blog Is Hosted On Blogger Owned By Google I Know You Must Be Facing Problem Regarding The SEO Of The Page. In WordPress There Are Number Of Plugins Available To Help With The SEO, In Blogger.com That Is Not The Case.
WordPress Has Plugins Like YoastSEO And Rank Math For Increasing SEO Rank (Maybe On-page Or Off-page SEO). In This Post I Will Help You To Configure Table Of Contents On Blogger In The Easiest Way.
Why Table Of Contents ?
Table Of Contents Are Beneficial For Posts Or Articles With Longer Length I.e Posts With A Lot Of Words/characters. Table Of Contents Not Only Increases Chances Of Getting A Features Snippet In The Search Result But Also Helps The User To Navigate To The Desired Topics On The Page.
Automatic Table Of Contents In Blogger
1) Head Over To Your Blogger Dashboard.
2) Then Move To Theme,Click On Customize Option.
3) Search For </head> ( Use Ctrl+F ).
4) Paste The Below Code Just Above It.
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.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>
5) Now Search For ]]></b:skin> In The Blogger Template.
6) Similarly,Paste The Below Code Above It.
.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;}
7) Now In Your Theme Search For <data:post.body/> And Replace It With <div id="post-toc"><data:post.body/></div>
8) Half Of The Work Is Done. Go To The Blog Page You Want To Add TOC. Paste The Below Code There.
<div class="mbtTOC">
<button onclick="mbtToggle()">Table Of Contents</button>
<ol id="mbtTOC"></ol>
</div>
Add At Ending
<script>mbtTOC();</script>
[Video] Add Automatic TOC In Blogger
Source : https://www.mybloggertricks.com/2017/02/automatic-table-of-contents.html
Hello bro
ReplyDeleteHow you make TOC in your blog post guide me to make TOC like you