Hello friends aaj ke iss article me janege ki kaise aap apne blog me table of contents lagate hai . Lekin isse pahle jante hai ki blog me table of contents lagana kyu jaruri hai .
Har blogger ka sapna hota hai ki uska article Google par first me rank kare jiske liye apko apne article par seo karna hota hai.Aur Seo karne ke liye table of contents apne article me add karna jaruri hai sath hi table of contents users ko apke article ko padne me madad karta hai aur users ko pata bhi chalta hai ki apke article me kya content hai.
Agar apka website WordPress me hai to plugin ka istemal kar easily apne article me table of contents laga sakte hai.wahi blogger me apka website hai to apko manually apne website table of contents
lagana hoga . Uske baad apke article me automatic table of contents add ho jayega.
To chaliye jante hai ki Kaise blogger par apne article me table of contents lagate hai.
How To Add Table of Contents in Blogger
To Sabse Pahle apko blogger me jana hai .
Uske baad theme par jaye edit html par click kare.
Step 1:
Niche diye code ko copy kar <head> ke niche paste kar save kar de.
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> <script type='text/javascript'> //<![CDATA[ //*************TOC Plugin V2.0 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>
Step 2;
Niche diye code ko apko ]]</b:skin> ke uppar paste kar theme save karde.
/*####TOC Plugin V2.0*/ .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:14px 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} */
Step 3:
<data:post.body/> code ko niche diye gaye codes se replace kare.
<div id="post-toc"><data:post.body/></div>
Step 4:
Jis article me table of contents lagana chahte hai uss article ko open kar edit html par jaye . uske baad bottom upper me niche diye code ko paste kare.
<div class="mbtTOC2"> <button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button> <div id="mbtTOC2"></div> </div>
Uske baad footer yani niche jaye aur niche diye code ko paste kar post ko save kar de
<script>mbtTOC2();</script>
Example:-
<div class="mbtTOC2"> <button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button> <div id="mbtTOC2"></div> </div>
---Article Code--
<script>mbtTOC2();</script>
Agar apko table of contents lagane me problem ho raha hai to niche diye gaye YouTube video ko dekh sakte hai
Comments
Post a Comment