how to create table of contents in blogger post: इस ब्लॉग पोस्ट में, मैं यह दिखाने जा रहा हूं कि आप अपने ब्लॉगर ब्लॉग पोस्ट में Contents की तालिका कैसे जोड़ सकते हैं। जैसा कि आप जानते हैं, ब्लॉगर plugins का support नहीं करता है जैसे कि wordpress करता है, हालांकि, यदि आपके पास थोड़ा सा technic ज्ञान है, तो आप आसानी से अपने ब्लॉग के लिए कस्टम-डिज़ाइन किए गए हल्के टो बना सकते हैं।
तो मैं इस पोस्ट मैं आपके ब्लॉग पोस्ट और पृष्ठों के लिए TOC बनाने के लिए चरण दर चरण विधि दिखाऊंगा।
Benefits of Table of Contents(TOC)
- जैसा कि आप जानते हैं कि Google को बहुत विस्तृत और अच्छी तरह से संरचित ब्लॉग पोस्ट और वेब पेज पसंद हैं। और अपने ब्लॉग पोस्ट में toc जोड़कर आप अपने ब्लॉग पोस्ट को और अधिक संरचित बना सकते हैं।
- और अगर आपकी ब्लॉग पोस्ट अच्छी तरह से संरचित होगी तो Google Search Result Page में meta description में jump से लिंक प्रदर्शित कर सकता है।
- जो एक बहुत बड़ा Blogspot SEO लाभ है!
- अब, यहां लिंक पर Google जंप का उदाहरण दिया गया है।
How to Create Table of Contents in Blogger Post
Find the tricks how to create table of contents in blogger post, table of content generator for blogger, how to add automatic table of contents in google blogger, table of contents website examples, how to add table of contents in wordpress without plugin.
Step: 1
Go to Blogger Dashboard
Click “Theme”
Click “Edit Html”
Blogger Dashboard >> Theme >> Edit Html
Step:2
Search “</head>”
<link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’/>
<script type=’text/javascript’>
//<![CDATA[
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>
Copy above Html Code & Paste above “</head>”
Step: 3
Next search ]]></b:skin>
.mbtTOC2{
border:5px solid #0008FC ;
border-radius: 10px 50px 10px 50px;
box-shadow:5px 5px 5px 5px grey;
border-style:dashed;
background-color:#ACDEFB;
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:#ACDEFB;
font-family:oswald, arial; font-size:22px;
position:relative;
outline:none;
border:none;
color:#2E2E2E;
padding:0 0 0 15px;
}
.mbtTOC2 button a {
color:#FF0313;
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:#EA1414;
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:#040404;
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} */
Copy above code & paste above in “]]></b:skin>”
Step: 4
Search for <data:post.body/> and replace it with the code below:
<div id=”post-toc”><data:post.body/></div>
Step: 5
Go to Post switch to “HTML” copy below code & paste where you want to show table of contents
<div class=”mbtTOC2″>
<button>Contents <span>[<a onclick=”mbtToggle2()” id=”Tog”>hide</a>]</span></button>
<div id=”mbtTOC2″></div>
</div>
Step: 6
Paste this code in the Html view of your post in the last.
<script>mbtTOC2();</script>
Successfully Table of Contents created.
How to Stylish TOC in Blogger Post Video in Hindi
Related Posts: