How To Add Automatic Table Of Contents In Blogger Post

How-To-Add-Automatic-Table-Of-Contents-In-Blogger-Post

हलो भाइयों और बहेनो, कैसे हो आप सभी, उम्मीद करता हु आप सभी बढ़िया होंगे, दोस्तों आज मैं आपको बताने जा रहा हु की आप अपनी Blogger वेबसाइट में Table Of Content कैसे Add कर सकते है |

दोस्तों हमें अपनी वेबसाइट में Table Of Content Add करने के लिए कुछ HTML Codes की जरुरत पड़ेगी | तो जैसे जैसे मैं आपको बताता जाऊ आपको बस बैसा बैसा करना है |

तो दोस्तों सबसे पहले आपको अपनी वेबसाइट का html कोड ओपन करना है और फिर आपको ctrl + f दबाना है उसके बाद आपको Search Box में टाइप करना है </head> और फिर आपको मैंने जो निचे कोड दिया है इस कोड को आपको </head> कोड के ऊपर पेस्ट कर देना है |

Table Of Contents Code:

<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>

उसके बाद आपको आपको दोबारा से ctrl + f प्रेस करना है और इस बार आपको Search Box में नीचे दिए गए कोड को टाइप करना है -

]]></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;}

ऊपर के दोनों कोड पेस्ट करने के बाद आपको फिर से एक और कोड अपनी थीम में पेस्ट करना है अब आपको अपनी Theme के html कोड में नीचे दिए गए कोड को Search करना है और उसकी जगह पर दूसरा Code पेस्ट करना है

<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>

ये तीनो कोड अपने Blogger की थीम में पेस्ट करने के बाद आपको सेव थीम के बटन पर क्लिक कर देना है |

Add Table Of Contents In Blogger Post

अब दोस्तों आप अपने जिस भी पोस्ट में Table of Content Add करना चाहते है आपको उस पोस्ट के html कोड में जाना है और उसके बाद आपको अपनी Post के first heading के ऊपर निचे दिए गए कोड को पेस्ट करना है Ex. </br>Code<br>

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Table Of Contents</button> 
    <ul id="mbtTOC"></ul> 

    </div>

अब दोस्तों आपको अपनी Post के बिलकुल नीचे एक और Code पेस्ट करना है जो नीचे दिया गया है -

<script>mbtTOC();</script>

अब दोस्तों आपका काम हो गया है अब आप अपनी पोस्ट चेक करेंगे तो आपको अपनी वेबसाइट में Table of Content मिल जायेगा | जो भी अपने Apni Heading बनाई होगी बो आपको अपनी पोस्ट में दिखने लगेंगी |

Note: You Can Change those color if you want

Change background color #FFFFEO
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

How To Add Automatic Table Of Contents In Blogger Post