logo

Blogger Me Automatic TOC Plugin Install Kaise Kare

Aaj main BlogSpot blogs ke bare me ek plugin share karne ja raha hu jiska title jQuery Table of Contents hai. Ye ek bahut hi important aur SEO friendly plugin hai jo Google search me jump to link ke roop me show hota hai. TOC plugin blogger ke lengthy posts me ek important role contribute karta hai jis se readers ko bhi long blog posts navigate karne me aasani hai.

Blogger TOC plugin techlekhak.com

Automatic table of contents install karne me keval 5 minutes ka samay lagta hai. TOC plugin H2, H3, H4, H5, aur H6 headings aur subheadings ko automatically table of contents ke roop me create karta hai. Jab bhi aap apne posts me h2 se lekar h6 tak ka koi bhi headings ya subheadings add karenge to ye TOC plugin aapke headings ko SEO friendly table of contents me convert kar deta hai.


Features of Blogger TOC Plugin

Ye plugin JavaScript aur CSS ki madad se create kiya gaya hai jo bahut hi lightweight aur SEO friendly aur mobile friendly hai. TOC plugin ke har ek heading aur subheading me automatically URL create ho jata hai jin ke last me "point1, point2, point3" etc. add ho jata hai. URL ka anchor text Google me bhi show karta hai jis se blog posts ki ranking increase ho jati hai. TOC plugin me ordered aur unordered list automatically add ho jata hai jis se readers ko long posts read aur navigate karne me aasani ho jati hai.



Blogger Me Table of Content Plugin Install Karne Ka Tarika

Chaliye shuru karte hai ki TOC plugin ko install aur active kaise kare. Maine is post me step by step guide mention kiya hai jis se aap logo ko achi tarah understand ho jayega ki table of content ko kaise add kiya jaye.


Step 1: Sabse pehle blogger me login kare aur login karne ke baad Theme par click karke Edit HTML par click kare.


Step 2: Ab theme editor me </style> tag search kare aur style tag ke neeche CSS code add kare. Agar </style> tag ke neeche </b:if> tag mila to aapko ye code b:if tag ke neeche add karna hai.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* TOC plugin by techlekhak.com
Copyright -- 2018
Version --  01.02 */
.techlekhakTOC2{border:1px solid #e6e6e6;box-shadow:1px 1px 0 #EDE396;background-color:#f9f9f9;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:Oswald, arial;display: block;width: 70%;}.techlekhakTOC2 button{background:#f9f9f9; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;padding:0 0 0 15px;}.techlekhakTOC2 button a {color:#0080ff; padding:0px 2px;cursor:pointer;}
.techlekhakTOC2 button a:hover{ text-decoration:underline; }
.techlekhakTOC2 button span {font-size:15px; margin:0px 10px; }
.techlekhakTOC2 li{margin:10px 0;  }
.techlekhakTOC2 li a {color:#0080ff; text-decoration:none; font-size:18px; text-transform:capitalize}
.techlekhakTOC2 li a:hover {text-decoration: underline;}.techlekhakTOC2 li li {margin:4px 0px}
.techlekhakTOC2 li li a{ color:#289728; font-size:15px}
.techlekhakTOC2 ol ol{counter-reset:section2}
.techlekhakTOC2 ol ol ol{counter-reset:section3}
.techlekhakTOC2 ol ol ol ol{counter-reset:section4}
.techlekhakTOC2 ol ol ol ol ol{counter-reset:section5}
.techlekhakTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.techlekhakTOC2 li li:before{content:counter(section1) &quot;.&quot; counter(section2);counter-increment:section2;font-size:14px}
.techlekhakTOC2 li li li:before{content:counter(section1) &quot;.&quot;counter(section2) &quot;.&quot; counter(section3);counter-increment:section3}
.techlekhakTOC2 li li li li:before{content:counter(section1) &quot;.&quot;counter(section2) &quot;.&quot;counter(section3) &quot;.&quot; counter(section4);counter-increment:section4}
.techlekhakTOC2 li li li li li:before{content:counter(section1) &quot;.&quot;counter(section2) &quot;.&quot;counter(section3) &quot;.&quot; counter(section4)&quot;.&quot; counter(section5);counter-increment:section5}
/*
.point2 {list-style-type:lower-alpha}
.point3 {list-style-type:lower-roman}
.point4 {list-style-type:disc}
*/
</style>
</b:if>

Step 3: CSS add karne ke baad ab bari hai JavaScript code add karne ki. Aap is code ko </bod> ke upar add kare. Agar aap JS code ko kahin aur add karenge to TOC plugin properly work nahi karega.

<script type='text/javascript'>
//<![CDATA[
//*************TOC Plugin V01.02 by techlekhak.com
function techlekhakTOC2(){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("techlekhakTOC2").innerHTML+=c}function techlekhakToggle2(){var a=document.getElementById("techlekhakTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")}
//]]>
</script>

Step 4: Is ke baad ab apne theme me Oswald font add kare kyon ki TOC plugin me Oswald family font suit karta hai is liye maine bhi is me yehi font add kiya hai. Agar aapke theme me Oswald font nahi hai to </head> ke upar ye code add kare.

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"/>

Step 5: Step number 4 follow karne ke baad ab theme save kare. Save karne ke baad ab post me TOC plugin ko activate kare. Agar aap old post me TOC plugin show karwana chahte hai post ko edit kare. But agar new post me table of content show karwana chahte hai to create new post par click kare.


Read Also:


Step 6: Plugin activation ke liye post ko HTML mode me le kar post ke starting me ye code add kare.

<div id='post-toc'>

Step 7: Post ke last me ab aapko activation code add karna hai jo ki maine neeche mention kiya hai.

<script>techlekhakTOC2();</script> </div>

Step 8: Jaha par aap TOC plugin show karwana chahte hai waha aapko ye code add karna hai. Suppose, agar aap TOC plugin first paragraph ke baad show karwana chahta hai to aapko ye code first paragraph ke baad add karna hai.

<div class="techlekhakTOC2"><button>Contents <span>[<a onclick="techlekhakToggle2()"  id="Tog">hide</a>]</span></button>  <div id="techlekhakTOC2"></div></div>

Maine pura screenshot add kiya hai. App screenshot ke according code add kare. Ab code add karne ke baad, seedha publish button par click kare. Agar aap post me compose button par click karenge to TOC plugin disturb ho jayega aur aise me ye code work nahi karega.

TOC plugin by techlekhak.com

To friends aaj maine Blogger BlogSpot ke liye post likha jis me maine Blogger table of content (TOC) plugin ke bare me code share kiya. I hope ki aapko ye post acha laga hoga. Agar aap is post ko apne friends ke sath share karna chahte hai to aap link share kare. Yadi aapko Table of contents install karne me koi problem aa rahi hai to comments me likhe.


We're Listening:

Koi bhi question ho jaise Smartphone, Laptop, camera, Internet, SEO, Battery, Softwares, Apps... Just use #TechLekhak hashtag anywhere on social media like Facebook, Twitter, Instagram, or LinkedIn.
Subcribe to Our Tech Updates

and Share on