ब्लॉगर के अंदर रेस्पॉन्सिव टेबल कैसे डालें? How to add Responsive Table into Blogger?

दोस्तों नमस्कार, हमारी वेबसाइट/Website LSHOMETECH पर आपका स्वागत है, हम अपने इस Portal पर Technology और Education से सम्बंधित आर्टिकल लिखते हैं, जो आपके लिए ज्ञान और जानकारी के प्रयाय होते है, आज की इस पोस्ट में हम सीखेंगे की ब्लॉगर के अंदर HTMLऔर CSS कोड की सहायता से एक Responsive Table कैसे बनाते है, और साथ में ब्लॉग्गिंग से सम्बंधित और जानकारी भी देंगे। जिसके बारे में आगे हम विस्तार से पढ़ेंगे। कृपया पूरी जानकारी के लिए पूरी पोस्ट को पढ़ें, साथ ही टेक्नोलॉजी से जुडी किसी अन्य जानकारी के लिए आप हमारे वेबसाइट के बाईं/Left और दिए गए दूसरे आर्टिकल भी पढ़ सकते हैं।

How to add Responsive Table into Blogger?
पोस्ट के शुरू में हम जान लेते हैं की Responsive Table क्या होती है, और ये कैसे काम करती है? Responsive Table वो टेबल होती है जो किसी भी डिजिटल डिवाइस की स्क्रीन के हिसाब से ऑटोमेटिक अपना साइज बदल सकती है। उदहारण के लिए अगर इसे आप मोबाइल में खोलेंगे तो यह आपको मोबाइल के साइज की दिखाई देगी और अगर आप इसे कंप्यूटर पर खोलेंगे तो ये कंप्यूटर के हिसाब से आपको दिखाई देगी। असल में किसी भी डिवाइस के अनुरूप ढल जाना ही रेस्पॉन्सिव होता है। बिलकुल इसी तरह से आपके वेबसाइट की थीम आप लगा सकते हैं, अगर आपकी थीम रेस्पॉन्सिव होगी तो वो आपको कंप्यूटर और मोबाइल पर डिवाइस के हिसाब से ही दिखाई देगी।

इसी तरह से आपके वेबसाइट पर अगर आप टेबल डालना चाहते हैं तो आपको Responsive टेबल ही डालनी चाहिए ताकि वो आपके डिवाइस के हिसाब से काम कर सके। अगर आप अपने पेज पर Responsive Theme के अंदर Responsive Table का इस्तमाल नहीं करते है, तो ऐसे में जब कोई आपकी वेबसाइट या ब्लॉग को मोबाइल में खोलेगा तो आपकी टेबल उसमे पूरी तरह से दिखाई नहीं देगी। इससे आपकी वेबसाइट या वेब पेज पर बहुत ही बुरा असर पड़ सकता है, इसलिए आपको हमेशा एक Responsive Theme के अंदर एक Responsive Table का ही इस्तमाल करना चाहिए।

आइये अब जान लेते हैं कि ब्लॉगर के अंदर Responsive Table कैसे डालते हैं?
अगर आप भी ब्लॉगर में रेस्पॉन्सिव टेबल डालना चाहते हैं तो आपको ये तरीका अपनाना होगा जो हम आगे दे रहे हैं। ब्लॉगर के अंदर HTML/Hyper Text Markup Language और CSS/Cascading Style Sheet कोड की मदद से आप आसानी से एक Responsive Table बना सकते हैं। ब्लॉगर में रेस्पॉन्सिव टेबल बनाने के लिए आपको जिन HTML और CSS कोड की जरुरत होगी वो दोनों कोड हम निचे दे रहे हैं। इनके साथ में आपको ये भी बताया गया है कि उन कोड को कैसे और कहाँ पर लगाना है। निचे दिए गए सभी Step/स्टेप को अच्छे से पढ़िए और उनमे जैसे आपको बताया गया है बिलकुल उसी तरह से उन सभी कोड को अपने ब्लॉगर में ऐड कीजिये। जानकारी के लिए ये वीडियो देखें। Link

सबसे पहले इस CSS कोड को कॉपी करें। CSS code for responsive table

/* CSS Post Table by www.onlinesahayata.com*/

.post-body table th, .post-body table td, .post-body table caption{border:1px solid #2E2E2E;padding:.2em .5em;text-align:left;vertical-align:top;}

.post-body table.tr-caption-container {border:1px solid #2E2E2E;}

.post-body th{font-weight:600;}

.post-body table caption{border:none;font-style:Arial;}

.post-body table{}

.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;border:1px solid #010101;}

.post-body th{background:#007874;color:#ffff;}

.post-body table.tr-caption-container td {border:none;padding:8px;}

.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}

.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}

img {max-width:100%;height:auto;border:none;}

table {max-width:100%;width:100%;margin:1.5em auto;}

table.section-columns td.first.columns-cell{border-left:none}

table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}

table.columns-2 td.columns-cell{width:50%}

table.columns-3 td.columns-cell{width:33.33%}

table.columns-4 td.columns-cell{width:25%}

table.section-columns td.columns-cell{vertical-align:top}

table.tr-caption-container{padding:4px;margin-bottom:.5em}

td.tr-caption{font-size:80%}

👉 Download Code Here

ऐसे ऐड करें CSS कोड को अपने ब्लॉगर में।
Responsive टेबल ऐड करने के लिए ब्लॉगर में CSS कोड को दो तरीकों से प्रयोग कर। निचे हम दोनों तरीकों के माध्यम से आपको बता रहे हैं। इनमे से आपको जो भी तरीका अच्छा लगे आप उसका इस्तेमाल कर सकते हैं। अगर फिर भी समझ नहीं आये तो आप हमारा ये वीडियो देख सकते हैं - Video Link

पहला तरीका ब्लॉगर में CSS कोड ऐड करने के लिए।
सबसे पहले आपको अपने ब्लॉगर को खोलना होगा उसके बाद इसके अंदर Theme ऑप्शन पर क्लिक करे।
Theme खुलने के बाद Edit HTML ऑप्शन पर क्लिक करते ही आपके सामने ब्लॉगर का HTML खुल जायेगा। अब आपको एक बार फिर HTML के अंदर क्लिक करना है, जैसे ही आपके Blogger Code की फाइल खुल जाये तो उसमे आपको कीबोर्ड से Ctrl+F बटन दबाना है। Ctrl+F दबाने पर HTML में दाई तरफ ऊपरी कॉर्नर में एक सर्च बॉक्स/Search Box खुल जायेगा। उस सर्च बॉक्स में आपको ]]></b:template-skin> (इस कोड को कॉपी कर पेस्ट कर दें ) या लिख कर सर्च करना है। अगर इस कोड को लिखने से आपको कुछ भी नहीं मिलता तो आप </b:template-skin> (इस कोड को कॉपी कर पेस्ट कर दें ) या लिख कर सर्च कर लें। जैसे ही आप ये कोड लिख कर सर्च करोगे तो ये कोड HTML के अंदर जहाँ पर भी ये कोड होगा वहां पर आपको हाईलाइट होकर मिल जायेगा। इसके बाद आपको ऊपर दिया हुआ CSS कोड कॉपी करना है और इसे ]]></b:template-skin> कोड से ऊपर पेस्ट कर देना है। यहाँ ये ध्यान रखें की आप इस कोड को ]]> से पहले पेस्ट करना है। इसके बाद आपको Save Theme पर क्लिक कर के थीम को सेव कर देना है।

दूसरा तरीका ब्लॉगर में CSS कोड को ऐड करने के लिए।
अगर पहला तरीका समझ नहीं आये तो आप ये दूसरा तरीका आजमा सकते है क्यूंकि ये तरीका पहले से और भी ज्यादा आसान है।

इसके लिए भी सबसे पहले आपको ब्लॉगर को खोलना है उसके बाद ब्लोग्गर के अंदर Theme ऑप्शन पर क्लिक करना है, इसपे क्लीक करते ही आपका नया पेज खुलेगा, उसके अंदर आपको HTML के पास ही Customize के नाम से एक ऑप्शन मिलेगा जिस पर आपको क्लीक करना है। जैसे ही आप इस पर क्लीक करेंगे आपके सामने Blogger Theme Designer खुल जायेगा। अब आपको इसके अंदर लिस्ट में सबसे निचे Advanced के नाम से एक ऑप्शन मिलेगा जिस पर आपको क्लीक करना है। जैसे ही आप Advanced ऑप्शन पर क्लिक करेंगे उसके बाद आपको Add CSS के नाम से एक ऑप्शन दिखाई देगी। अब आपको Add CSS पर क्लिक करना है। इस पर क्लीक करते ही आपके सामने Custom CSS का बॉक्स खुल जायेगा। इस बॉक्स में आपको ऊपर दिया गया CSS कोड पेस्ट कर देना है। कोड को पेस्ट करने के बाद Apply to Blog ऑप्शन पर क्लिक कर देना है। ये प्रक्रिया पूरी होते ही आपका CSS कोड आपके ब्लॉगर में ऐड हो जायेगा।

अब आपका एक काम तो हो गया है। इसके बाद आप ब्लॉग पेज पर निचे दिया गया Responsive HTML Code पेस्ट कर सकते हैं। इस कोड को पेस्ट करने का तरीका भी हम आपको बता रहे हैं।

सबसे पहले अपना ब्लॉगर ओपन करें, उसके बाद आपको New Post पर क्लीक करना है। इसके बाद पेज की बाईं और दिए गए Compose और HTML में से HTML पर क्लीक करना है। जैसे ही आपका HTML खुल जाता है तो उसके अंदर निचे दिया गया Responsive HTML Table कोड पेस्ट कर देना है। इसके बाद आपके पेज पर एक Responsive Table बन जाएगी। इस टेबल में हमने 5 Row और 3 Column बनाये हैं। अगर आप चाहें तो इनको कम या ज्यादा कर सकते हैं।

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

👉 Download Code Here

तो दोस्तो आपको हमारी ये पोस्ट कैसी लगी हमें जरूर लिखे, आप पोस्ट के नीचे Comment Box में अपनी प्रतिक्रियाएं ओर अगर कोई सुझाव है तो वो भी लिख कर भेज सकते हैं। साथ ही आप हमें हमारे द्वारा प्रकाशित नए लेख पढ़ने के लिए Subscribe भी कर सकते हैं।

Join us :

My Facebook : Lee.Sharma

My YouTube : Home Design !deas