ब्लॉगर वेबसाइट में table of content को कैसे जोड़ें?[Simple Tricks]

0
573
table of content

यह बात तो आप जानते है कि, google ब्लॉगर या ब्लॉगस्पॉट में आप वर्डप्रेस के जैसे प्लगइन्स का इस्तेमाल करके table of content नहीं लगा सकते है, लेकिन अगर आप पोस्ट में बताये गये तरीके को फॉलो करेंगे तो आप आसानी से अपने blog post में एक आकर्षक table of content लगा सकते हैं। आज हम आपको अपनी वेबलॉग पोस्ट के लिए TOC को लगाने के स्टेप टू स्टेप तकनीक बतायेगे।

ब्लॉगर वेबलॉग में कंटेंट की एक automatic table को जोड़ना अपने विजिटर और फॉलोवर के अनुभव को अनुकूल और सरल बनाता है। ब्लॉगर वेबलॉग में table of content को शामिल करना विज़िटर के लिए पोस्ट को नेविगेट करना आसान बनाती है। तो चलिए इसे सीखते है।

नमस्कार, Hindiwebbook में आपका स्वागत है, आज हम इस पोस्ट में आपको सिखाएंगे कि blogger में table of content को कैसे जोड़ा जाता है। क्योकि वर्डप्रेस में एक automatic table of content को जोड़ना कुछ प्लगइन के उपयोग से बहुत आसान हो जाता है। लेकिन blogger में एक automatic table of content को जोड़ना बहुत चुनौतीपूर्ण है क्योंकि blogger में आप प्लगइन की सहायता नहीं ले सकते है।

ब्लॉगर वेबसाइट में टेबल ऑफ़ कंटेंट को कैसे जोड़ें? How to Add Table of Contents to Blogger Website?

Table of content या TOC एक सारणीबद्ध लेआउट होता है जो आपके द्वारा लिखी सामग्री का एक छोटा सा हिस्सा है जिसे आम तौर पर एक पोस्ट या लेख के पहले भाग में पहले शामिल किया जाता है। उस टेबल में आपकी पोस्ट या आर्टिकल के सभी headings या sub-headings की सूची को क्रमबद्ध किया जाता है। इसलिए सबसे पहले समझते है table of content क्या है? 

टेबल ऑफ़ कंटेंट क्या है? What is Table of Contents?

किसी भी वेबपोस्ट की table of content हमें आपके blog post से सभी headings और sub-heading का टैग तैयार करने के लिए रुपरेखा प्रदान करती है, यह मैन्युअल रूप से heading tag को पहचान कर उसे आपके टार्गेटेड विजिटर को पोस्ट नेविगेट करने के लिए एक शानदार table में बदल देती है।

जब भी आप विकिपीडिया साईट पर जाते हैं, तो आप अपने द्वारा पढ़े जाने वाले प्रत्येक आर्टिकल पर एक TOC को पाते हैं, जो उस आर्टिकल से सम्बंधित सभी बिंदु को समझने के लिए हमे एक रुपरेखा देती है। इस तथ्य के कारण ही विकिपीडिया यांत्रिक रूप से शीर्षक लेबल का चयन करता है और उसमें एक table of content तालिका को तैयार करता है।

SEO के लिए टेबल ऑफ़ कंटेंट (TOC) के लाभ। Benefits of Table of Contents (TOC) for SEO.

Google आमतौर पर सटीक जानकारी और अच्छी तरह से संरचित वेबलॉग पोस्ट और पेज को पसंद करता है। और ब्लॉगर वेबलॉग पोस्ट में एक table of content को शामिल करने से, आप अपने वेबलॉग को अच्छी तरह से संरचित और उपयोगकर्ता के अनुकूलन के साथ प्रकाशित कर सकते हैं। इसलिए उच्च परिणाम को प्राप्त करने के लिए ब्लॉगर में table of content को अवश्य जोड़ें।

table of content

और यदि आप अपने वेबलॉग पोस्ट में एक TOC जोड़ते हैं, तो यह संरचित और पाठको के अनुकूल होगा। google खोज परिणाम पृष्ठ में हाइपरलिंक के लिए छलांग भी दिखा सकता है, यह साइट मालिकों के लिए वास्तव में बहुत उपयोगी है और यह आपके सीटीआर को बड़ा कर सकता है।

जब आप एक से अधिक headings और sub-headings के साथ 2000 से 3000 शब्दों के आसपास कंटेंट को लिख रहे हैं, तो व्यक्ति के लिए लेख के आकार को बेहतर ढंग से पहचानना कठिन होता है।

जैसा कि आप जानते हैं कि पाठकों की रुचि अवधि बहुत कम होती है और यदि वे एक लंबे-चौड़े लेख को देखते हैं तो वे पोस्ट के निचले हिस्से में ही जायेगे और आर्टिकल के शार्ट-रूप पर अपना निर्णय लेंगे जहां उत्तर सटीक रूप से दिया गया है। लेकिन अगर आप वेबलॉग पोस्ट में table of content को जोड़ देते हैं, तो वे उस क्षेत्र में जायेगे जहाँ उन्हें आवश्यक कंटेंट प्राप्त होंगे।

वेबसाइट पर सामग्री की एक table of content होने से सर्च इंजन अनुकूलन में इसका लाभ मिलता हैं। यह खोज इंजन बॉट्स को लेख को बेहतर ढंग से समझने में मदद करता है और यह खोज परिणामों में समृद्ध परिणाम दिखाएगा।

  • उपयोगकर्ताओ के अनुभव में सुधार

एनएन ग्रुप के माध्यम से खोज के अनुसार, कुल वेब पाठकों में से 79% से अधिक केवल स्कैनर होते हैं जो केवल एक वेबपेज के आवश्यक कारकों की ही जांच करते हैं। और केवल 21% ही विस्तृत लेखों का अध्ययन करना पसंद करते हैं।

SERP (खोज परिणाम पृष्ठ) में अधिक रैंकिंग प्राप्त करने के लिए उपयोगकर्ता के अनुभव एक बहुत ही आवश्यक कारक है। उपयोगकर्ता के अनुभव तेजी से रैंक करने के लिए एक वेबलॉग का एक बहुत ही आवश्यक भाग है। और table of content आपके ब्लॉग की विज़िटर दर को बढ़ाने में आपकी सहायता करेगा।

टेबल ऑफ़ कंटेंट को जोड़ने के लाभ। Benefits of adding a Table of Contents.

जैसा कि आप समझते हैं कि TOC पहले पैरा के ठीक बाद आपकी पोस्ट की शुरुआत के ठीक ऊपर लगता है। जो आपके कुल पोस्ट के शिखर वेब पेज पर कुछ अंश को ले सकता हैं।

इसलिए, वेब कंटेंट की एक सुनियोजित तालिका प्रतिकूल रूप से सहायता कर सकती है:

  • किसी विशेषज्ञ की तरह आपके लेख को सबमिट करना फायदेमंद प्रतीत होता है।
  • अपने प्रकाशन या लेख के कारकों को व्यवस्थित तरीके से व्यवस्थित करना।
  • अपने दर्शकों की अपेक्षाओं को प्रबंधित करना, जो आपकी पोस्ट या लेख का उच्च-स्तरीय दृश्य प्रस्तुत करता है।
  • अपने लक्षित दर्शकों के लिए अपने संपूर्ण सबमिट या लेख को सहजता से नेविगेट करने के लिए एक रोडमैप प्रदान करना। 

ब्लॉगर में ऑटोमेटिक टेबल ऑफ़ कंटेंट के स्टेप टू स्टेप तकनीक।Step by Step Technique of Automatic Table of Contents in Blogger.

स्टेप 1: पहले एहतियात के तौर पर अपनी थीम का बैकअप जरूर लें, कुछ भी गलत होने पर, बैकअप को पुनर्स्थापित किया जा सकता है।

table of contentस्टेप 2: ब्लॉगर> थीम> Edit HTML पर जाएं।

table of contentस्टेप 3: क्लोजिंग हेड टैग = </head> . से पहले html कोड नीचे जोड़ें

table of contentEdit html पर क्लिक करें और > CTRL + F दबाएं और खोजें </head> और इस HTML कोड को इसके ठीक ऊपर चिपकाएँ जैसा कि चित्र में दिखाया गया है।

<script type='text/javascript'> //<![CDATA[ //*************TOC plugin by MyBloggerTricks.com 
            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>

स्टेप 4: इस टैग से पहले html कोड को जोड़ें ]]> </ b: skin>

table of contentEdit html पर क्लिक करें> CTRL + F दबाएं और यह कोड खोजें ]]> </ b: skin> और इस HTML कोड को इसके ठीक ऊपर चिपकाएँ जैसा कि चित्र में दिखाया गया है।

/*####Automatic TOC Plugin by MyBloggerTricks designed by Saroj-Tech####*/
        .mbtTOC {
            border: 3px solid #A2A9B1;
            box-shadow: 1px 1px 0 #EDE396;
            background-color: #F8F9FA;
            color: #830000;
            line-height: 1.4em;
            margin: 30px auto;
            padding: 20px 30px 20px 10px;
            font-family: Open Sans, arial;
            display: block;
            width: 70%;
            border-radius: 5px;
        }
        .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: none;
            font-family: Open Sans, arial;
            font-size: 20px;
            position: relative;
            outline: none;
            cursor: pointer;
            border: none;
            color: #707037;
            padding: 0 0 0 15px;
        }
        .mbtTOC button:after {
            content: "f022";
            font-family: FontAwesome;
            position: relative;
            left: 10px;
            font-size: 20px;
        } 

स्टेप 5: अब <data: post.body /> कोड को ढूंढें और इस कोड को नीचे दिए गए कोड से बदलें।

table of content

यह कोड आपको अपने ब्लॉगर html में 2 या 3 बार मिलेगा, यह थीम की कोडिंग पर डिपेन्ड करता है। प्रत्येक कोड को उपरोक्त कोड से बदलें जैसा कि नीचे दी गई छवि में दिखाया गया है।

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

अब ब्लॉगर HTML संपादक के साथ किए गए सभी कार्य समाप्त हो चुके है, अगला चरण प्रत्येक पोस्ट के साथ इन दो छोटे HTML कोड को मैन्युअल रूप से एक शीर्ष पर और दूसरा पोस्ट के नीचे जोड़ना है।

स्टेप 6: इस संक्षिप्त कोड को ब्लॉगर पोस्ट के html view में जोड़ना।

table of contentआप अपनी पसंद के अनुसार पोस्ट पेज के शीर्ष पर / पहले शीर्षक से पहले / किसी भी पैराग्राफ से पहले नीचे कोड को जोड़ें।

<div class="mbtTOC">
 <button onclick="mbtToggle()">Contents</button>
 <ol id="mbtTOC"></ol>
 </div>

स्टेप 7: इस html कोड को पोस्ट के अंत में पेस्ट करें।

table of content

<script>mbtTOC();</script>

Note: स्टेप 6 और 7 आपको अपनी हर पोस्ट के साथ अप्लाई करना होगा तभी table of content आपकी पोस्ट पैर प्रकाशित होगा। 

अब आपके ब्लॉगर वेबसाइट में automatic table of content तालिका जोड़ने से संबंधित सभी कार्य कम्पलीट हो चुके हैं।

अंत में 

इस लेख के माध्यम से हमने आपको “ब्लॉगर वेबसाइट में table of content को कैसे जोड़ें?” के बारे में पूरी जानकारी देने का प्रयास किया है, हमें पूरी उम्मीद है कि अगर आपके पास इस लेख से संबंधित कोई जानकारी है तो यह जानकारी आपके लिए बहुत उपयोगी साबित होगी। अगर कोई सुझाव है तो आप कमेंट बॉक्स के जरिए हम तक पहुंच सकते हैं। आप इस जानकारी को अपने दोस्तों और सोशल मीडिया पर जरूर शेयर करें। धन्यवाद!

Read More