Blogger Post में "Table Of Contents" [TOC] कैसे बनाते हैं ? - PkvTechnical

Breaking

Wednesday, October 14, 2020

Blogger Post में "Table Of Contents" [TOC] कैसे बनाते हैं ?

Blogger Post में  "Table Of Contents" [TOC] कैसे बनाते हैं ?

Blogger पोस्ट में TOC का SEO Point of view से एक बहुत  हि महत्वपूर्ण बात है , अगर आपकी पोस्ट काफी लम्बी है तो visitor जो आपका ब्लॉग पढता है उसे काफी दिक्क्त होती है। जिससे आपके blog पे bounce rate काफी बढ़ सकता है। इसके ठीक उल्टा अगर आपके blog post में TOC है तो reader को पोस्ट पढ़ने में काफी आसानी हो जाती है। 

Table of contents होने से मुख्य headings  highlight हो जाती है जिससे visitors अपने मतलब का जो भी पढ़ना चाहता है उसे click करके direct पढ़ सकता है।   



For Example:
Blogger Post में  "Table Of Contents" [TOC] कैसे बनाते हैं ?

 "Table Of Contents" [TOC] होता हैं ?


TOC या टेबल ऑफ़ कंटेंट को हम आसान भाषा में index या विवरणीका भी कह सकते है। जिस प्रकार से किताबो में शुरुआत में Index दिया होता है जिसे हमें किसी भी lession को ढूंढने में आसानी होती है। ठीक उसी प्रकार से ये भी काम करता है।  


Table of Contents (TOC) क्यों लगाते है ?


आप अगर विकिपीडिया के वेबसाइट पर कभी गए होंगे तो जरूर देखा होगा की सभी बड़े व लम्बे Article पे एक विवरणिका box बना होता है , जिसपे आप click करके किसी भी heading पर जा सकते है। 
१- टेबल ऑफ़ कंटेंट्स बनाने से रीडर को आपकी पोस्ट पढ़ने में आसानी होती हे, जिससे SEO में कभी मदद मिलती है। 
२- Google का Search Engine आपके blog  post के अलावा heading और subheading को भी Rank करता है, जिसे traffic बढ़ने के chance बढ़ जाता है।  
३- आपका content कभी Attractive हो जाता है। 
४- Visitors को आपके post पढ़ने में सुबिधा हो जाती है।  

Blog Post में Table of Contents (TOC) Add कैसे करते हैं ?
तो आईये हम जानते है की अपने ब्लॉग पोस्ट में toc कैसे जोड़ते है; बिलकुल आसान तरीके से। 
आप निचे दिए गए निर्देशों को बहुत ही ध्यान पूर्वक से follow करे। 


पहला चरण :


1st step :

  1. अपने Blogger Account में  Sign In हो जाये।  
  2. Theme option को क्लिक करिये। 
  3. सबसे पहले आप Template का Backup लें कर रख लीजिये , यदि किसी भी प्रकार की कोई गड़बड़ी भी अगर होती है, तो आप दुबारा से अपने Template को Re-Upload कर सकेंगे।
  4. "Edit HTML" पर  क्लिक करे। 
  5. अब इस Edit HTML Section में कहीं भी क्लिक करके Ctrl + F बटन press करे, आपको एक [Search Box] दिखेगा, यहाँ पर आप Type करे </head> फिर Enter बटन press करें।
  6. </head> closing tag के बिलकुल ऊपर निचे दिए गए Code को Copy करे और Paste करें।
 

Code For Past in </head> 


<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>

//<![CDATA[

//*************TOC Plugin V1.0 by www.pkvtechnical.com

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>


  

2nd step:


उसके बाद आपको theme के  html Search Box में  ]]></b:skin>    Find  करना है। और फिर निचे दिए गए Code को copy करे और ]]></b:skin> के ठीक ऊपर paste कर देंना है।


/*####TOC Plugin V1.0 by pkvtechnical.com/####*/

.mbtTOC2{border:1px solid;   ##f7f0b8;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 10px 20px 10px; font-family:Oswald, arial;display:   block;width: 80%;}

.mbtTOC2 button{background:#FFFFE0; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;padding:0 0 0 15px;}

.mbtTOC2 button a {color:#0080ff; 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:#0080ff; text-decoration:none; font-size:18px;}

.mbtTOC2 li a:hover {text-decoration: underline;}          

.mbtTOC2 li li {margin:4px 0px;}

.mbtTOC2 li li a{ color:#289728; font-size:15px;}

.mbtTOC2 ol{counter-reset:section1;list-style:none}

.mbtTOC2 ol ol{counter-reset:section2}

.mbtTOC2 ol ol ol{counter-reset:section3;margin: 10px 0px;}

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

 


3rd step:

<data:post.body/>  अंत में इस code को find करें और इस code से replace कर देना है 
<div id="post-toc"><data:post.body/></div> अगर <data:post.body/>
यह code एक से अधिक बार है तो सबको ही बारी-बारी से replace करदेना है। और save theme पे click करना है। 

दूसरा चरण :


1st Step: 
आप अपने blog Post के HTML view  पर  जाये और जहाँ भी Table Of Contents लगाना चाहते है वहाँ पर निचे दिए गए Code को Copy  paste कर देना है। ज्यादा तर Bloggers  पोस्ट के पहले heading के ठीक ऊपर लगाना पसंद करते है , ताकि आपके Readers post  के शुरुआत में ही जान जाए की  यह पोस्ट उनकी मतलब  की है या नहीं।


<div class="mbtTOC2">

<button>Table of Contents <span>[<a

onclick="mbtToggle2()"  id="Tog">hide</a>]

</span></button>

<div id="mbtTOC2"></div>

</div>

 

2nd Step: 

अब  finely निचे दिए गए कोड को पोस्ट के सबसे निचे जहां post खत्म हो रहा हो उस जगह पर past कर देना है। 

इन दोनों  कोड को प्र्तेक बार आपको अपनी पोस्ट में पास्ट करने होगा इस लिए इसे अपने notepad में रख ले। 

 

<script>mbtTOC2();</script>

 

 

Final Line :

इस प्रकार से आपका "Table Of Contents" लगाने का काम ख़त्म होता है , आपको पहले चरण में जो कोड दिए गए है वे सिर्फ एक ही बार लगनी है बाकी दूसरे चरण में जो कोड दिए गए है उसे प्र्तेक post में जिसमे आप चाहे लगाना होगा। 



No comments:

Post a Comment

Navratri colours 2020: List of 9 colours and their Importance

  नवरात्रि(नव दुर्गा) रंग 2020: 9 रंगों की सूची और उनका महत्व पहला दिन अक्टूबर 17 - लाल (Red) इस दिन को माता पार्वती के अवतार शैलपुत्री रूप ...

More