Qbuk - Quality Based Universal Knowledge

एडवांस्ड टेबल ऑफ़ कंटेंट (TOC) जनरेटर

अपनी वेबसाइट के लिए बनाएं आकर्षक, कस्टम और SEO फ्रेंडली TOC

मिनटों में बनाएं शानदार TOC!

Blogger, WordPress या किसी भी वेबसाइट के लिए आसानी से कस्टमाइज़ेबल टेबल ऑफ़ कंटेंट बनाएं और अपने पाठकों को बेहतर अनुभव दें।

अभी टूल आज़माएं!

अपनी वेबसाइट/ब्लॉग के लिए बनाएं आकर्षक और एडवांस्ड टेबल ऑफ़ कंटेंट (TOC) - बिलकुल फ्री!

क्या आप अपनी लम्बी ब्लॉग पोस्ट्स या वेब पेजों को नेविगेट करने में पाठकों की मदद करना चाहते हैं? क्या आप चाहते हैं कि आपकी साईट SEO फ्रेंडली बने और गूगल सर्च रिजल्ट्स में बेहतर दिखे? अगर हाँ, तो एक अच्छा टेबल ऑफ़ कंटेंट (TOC) आपकी बहुत मदद कर सकता है।

आज हम आपके लिए लेकर आये हैं एक बेहतरीन ऑनलाइन टूल - एडवांस्ड टेबल ऑफ़ कंटेंट (TOC) जनरेटर और कस्टमाइज़र, जिसकी मदद से आप कुछ ही मिनटों में अपनी Blogger, WordPress या किसी भी वेबसाइट के लिए एक सुन्दर, फंक्शनल और पूरी तरह से कस्टमाइज़ेबल TOC बना सकते हैं। सबसे अच्छी बात? यह बिलकुल फ्री है!

यह टेबल ऑफ़ कंटेंट जनरेटर टूल क्या है?

यह एक वेब-आधारित टूल है जो आपको अपनी वेबसाइट के कंटेंट के आधार पर स्वचालित रूप से एक टेबल ऑफ़ कंटेंट बनाने की सुविधा देता है। यह न केवल TOC बनाता है, बल्कि आपको इसे अपनी वेबसाइट की डिज़ाइन के अनुसार स्टाइल करने के लिए ढेरों कस्टमाइज़ेशन विकल्प भी प्रदान करता है। आप रंग, आइकॉन, बॉर्डर, बैकग्राउंड, फॉन्ट स्टाइल, कॉलम और बहुत कुछ बदल सकते हैं। अंत में, यह आपको रेडी-टू-यूज़ CSS और JavaScript कोड देता है जिसे आप आसानी से अपनी वेबसाइट में जोड़ सकते हैं।

टूल का उपयोग कैसे करें? (स्टेप-बाय-स्टेप गाइड)

इस टूल का उपयोग करना बहुत आसान है। नीचे दिए गए स्टेप्स को फॉलो करें:

स्टेप 1: टूल को एक्सेस करें

आप नीचे दिए गए बटन पर क्लिक करके टूल को एक नए टैब में खोल सकते हैं या सीधे इसी पेज पर एम्बेडेड iframe में इसका उपयोग कर सकते हैं।

नोट: iframe में लाइव प्रीव्यू काम करेगा, लेकिन कोड जनरेशन और कॉपी करने जैसी कुछ सुविधाएँ ठीक से काम नहीं कर सकती हैं। बेहतर अनुभव के लिए, नीचे दिए गए बटन का उपयोग करके टूल को सीधे खोलें।

टेबल ऑफ़ कंटेंट जनरेटर टूल खोलें

एम्बेडेड टूल:

स्टेप 2: बेसिक कॉन्फ़िगरेशन (Basic Configuration)

टूल खुलने पर, आपको बाईं ओर कंट्रोल पैनल दिखेगा। सबसे पहले स्लाइड (Slide 1: Basic Configuration) में कुछ बुनियादी सेटिंग्स करें:

1. Post Container: यह सबसे महत्वपूर्ण सेटिंग है। आपको यहाँ अपनी वेबसाइट के उस हिस्से का CSS सिलेक्टर डालना है जहाँ आपका मुख्य कंटेंट (ब्लॉग पोस्ट या पेज का टेक्स्ट) होता है।
   • Blogger के लिए: आम तौर पर .post-body या .post-body.entry-content काम करता है।
   • WordPress के लिए: अक्सर .entry-content या .post-content होता है।
   • ड्रॉपडाउन में कई सामान्य विकल्प दिए गए हैं। यदि आपको सही सिलेक्टर नहीं पता है, तो अपनी वेबसाइट पर जाकर कंटेंट एरिया पर राइट-क्लिक करें और "Inspect" या "Inspect Element" चुनें। डेवलपर कंसोल में, कंटेंट को घेरने वाले div या article टैग का क्लास (.) या आईडी (#) ढूंढें। यदि आवश्यक हो तो 'Custom Selector...' चुनें और अपना सिलेक्टर डालें।
2. Headings: चुनें कि TOC में कौन-कौन से हेडिंग टैग्स (जैसे h2, h3) शामिल करने हैं।
3. Min Headings: TOC दिखने के लिए कम से कम कितने हेडिंग्स पेज पर होने चाहिए।
4. TOC Title: टेबल ऑफ़ कंटेंट बॉक्स का शीर्षक क्या होगा (जैसे "Table of Contents", "विषय सूची")।
5. Show Text: TOC दिखाने वाले बटन पर क्या टेक्स्ट लिखा होगा (जैसे "Table of Contents")।
6. Hide Text: TOC छिपाने वाले बटन पर क्या टेक्स्ट लिखा होगा (जैसे "Hide Contents")।

स्टेप 3: स्टाइल और आइकॉन कस्टमाइज़ करें (Slider का उपयोग करके)

अब, कंट्रोल पैनल में "Next" और "Previous" बटन का उपयोग करके अलग-अलग स्लाइड्स पर जाएँ और अपनी पसंद के अनुसार TOC को स्टाइल करें। आप बटन/लिस्ट आइकॉन, बॉक्स स्टाइल, टाइटल स्टाइल, लिस्ट स्टाइल, सबहेडिंग स्टाइल, हाईलाइट इफ़ेक्ट और बटन अपीयरेंस को कस्टमाइज़ कर सकते हैं।

स्टेप 4: लाइव प्रीव्यू देखें (Live Preview)

जैसे-जैसे आप सेटिंग्स बदलते हैं, दाईं ओर Live Preview सेक्शन में आपको तुरंत उसका असर दिखेगा। इससे आपको यह अंदाज़ा लग जायेगा कि आपकी वेबसाइट पर TOC कैसा दिखेगा।

स्टेप 5: कोड जनरेट करें (Generate Code)

जब आप सभी कस्टमाइज़ेशन से संतुष्ट हों, तो कंट्रोल पैनल के नीचे स्क्रॉल करें। आपको दो बॉक्स दिखेंगे: Generated CSS Code और Generated JavaScript Code। दोनों बॉक्स के ऊपर Copy बटन दिए गए हैं।

स्टेप 6: कोड को अपनी वेबसाइट में जोड़ें

1. CSS कोड:
   • Blogger: ब्लॉगर डैशबोर्ड > Theme > Customize > Advanced > Add CSS (या Theme > Edit HTML पर जाएँ और के ठीक *पहले* CSS कोड पेस्ट करें)।
   • WordPress: Appearance > Customize > Additional CSS में जाएँ और CSS कोड पेस्ट करें।
   • अन्य वेबसाइट: अपनी वेबसाइट की मुख्य CSS फ़ाइल में या सेक्शन के अंदर

. Distributed by Tech4era