Responsive Autometic Table of Content in Blogger

Hello Friends kaise hai aap sab ummid hai acche hi honge aaj ke iss post mein hum baat karne wale hai Responsive Autometic Table of Content in Blogger ke bare me iss post me hum aapke sare Doubt clear karne ki koshish karenge bas aap iss post ko carefully read karte jaye jisse aapke sare sawalon ke jawab hum de sake aur aapko aapke question ke answer mil jaye to jyada time waste na karte huwe shuru karte hai aaj ka yeh topic.

Table Of Content

• What is Table of Content
• Step-1
  • Code-A
• Step-2
  • Code-B
• Step-3
  • Code-C
• Step-4
  • Code-D
  • Code-E
• Color ko change kar sakte hai
• Table of Content use karne ke Fayde
• At Last

What is Table of Content

Table of Content kya hai agar ye sawal aapke bhi mann mein hai to tention na le iska jawab hum aapko dete hai. Jab hum koi bhi post likhte hai jiski length jayada hoti hai matlab text ki sankhya ji ha hum jitne jayada word ke post likhte hai utna hi jyada post ki lambai hoti hai to aise me kisi ko bhi use scroll down karke niche tak jane mein bahut jayada time lagega to yaha par agar aapne post me Table of Content add kiya hai to jo reader hoga wo aasani se uss jagah pahuch jayega jaha jaha Table of Content writer ne use kiya hai aur ise excel, blogger, wordpress, websites, etc, mein use kar sakte hai. iss post mein hum blogger me kaise add karte hai iske bare me janege.

Step-1

Code-A

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           
<link href='https://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>

1. Code-A ko copy karle
2. Apne blogger ke dashboard me jakar Theme ke Edit HTML me jaye
3. CTRL+F dabakar </head> search kare aur iske upar code paste karde

Note:- Abhi theme ko save na kare ise aise hi rahne de aur bhi code hai use add karne ke baad save karenge aap yeh kam alag-alag tab me hi kare.

Step-2

Code-B

.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;}

1. Code-B ko copy kare
2. Apne blogger ke dashboard me jakar Theme ke Edit HTML me jaye
3. CTRL+F dabakar ]]></b:skin> search kare aur iske upar code paste karde

Step-3

Code-C

<div id="post-toc">
<data:post.body/></div>

1. Code-C ko copy kare
2. Apne blogger ke dashboard me jakar Theme ke Edit HTML me jaye
3. CTRL+F dabakar <data:post.body/> search kare aur yeh code aapke template me jitne baar aa rahe hai un sabhi ko code-c se replace karde kisi me 1 baar kisi-kisi me 3 ya 4 baar aate hai ye code aap dheyan se dekhle
4. And Final Step Theme ko save karde

Note:-1 Ye jitne bhi code uper bataye hai Code-A, B, C aapko apne template mein one time add karna hai
Note:-2 Aur jo niche ka code hai Code-D, and E, aapko apne sabhi post me add karna hai

Step-4

Code-D

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

Code-E

<script>mbtTOC();</script>

Code-D Aapke jitne bhi post hai uske HTML me jakar aap jo first heading diye ho waha add kare
Code-E Aapke post ke sabse niche </div> ke aage add kare
Post ready hone ke baad Preview karke dekhle and Publish karde

Alert:- Post write karte samay Rakhe in baato ka dheyan

• Title ko Table of Content me show karne ke liye use Heading Tag dena zaruri hai nahi to ye trick work nahi karegi
• Kisi bhi Heading Title ke aage Number, ya Symbol, na likhe

Aap sidha sa example mere iss post ka hi le sakte hai kaise likhe par copy na kare word nahi to copyright aa sakte hai aap apne style mein likhe ha dusre jagah se idea le sakte hai lekin copy na kare.

Aap chahe to inke color ko change kar sakte hai

• Change background color #FFFFEO
• Change border color #f7f0b8
• Change font color #707037
• Change Anchor link color #0080ff
• Change anchor font's font size to 15px
• Change font size to 20px for TOC title text

Code-B me jo code diya huwa hai use costomize karke color ko change karna chahte hai to iss code ko find karke apne pasand ka color code daal sakte hai jisse uski look change ho jayegi.

Table of Content use karne ke Fayde

1. website mein jitne bhi reader aate hai unhe post padhne me aasani hoti hai wo table of content dekhkar yah samajh jayega ke post me kya-kya cover kiya gaya hai jisse vo jaha se padhna chahe waha se shuru kar sake.
2. user friendly ji ha jo website user friendly hota hai uske user ka trust bana rahta hai aur wah baar-baar waha visit karta hai or google bhi aise article ko pasand karta hai.
3. seo friendly hota hai jisse google me rank karne mein aasani hoti hai.

At Last

To friends ye thi is topic se related kuch jankari ummid hai aapko hamari yah post Responsive Autometic Table of Content in Blogger zarur pasand aaya hoga. Agar is post se sambandhit kisi bhi tarah ki jankari aapke pass ho jo humse cover na huwe ho ya fir aapka koi sawal ho jo aap mujhse karna chahte hai to niche comment section mein apne word type zarur kare or sath hi is post ko apne friends aur social site pe share karna na bhule. Ab milte hai Agle post mein  kisi aur topic ke sath tab tak ke liye good bye.