ब्लॉग पोस्ट पर Responsive Table कैसे ऐड करें – How To Add Responsive Table in Blog Post

हेलो दोस्तो, Blog Post Mein Responsive Table Kaise Lagaye – अगर आप एक ब्लॉगर है, तो आपको अपने ब्लॉग पोस्ट में table लगाने या Add करने की आवश्यकता जरूर पड़ती होगी। अगर आप नए ब्लॉगर है, और आपको नहीं पता कि responsive table कैसे add करते हैं, तो कोई बात नहीं। आज हम इस पोस्ट में यही बता रहे हैं। Responsive Table के बारे में आपको इस पोस्ट में पूरी जानकारी मिल जाएगी।

कई बार हम अपने ब्लॉग पोस्ट पर ऐसे आर्टिकल लिखते है, जिसमें Table की आवश्यकता होती है। और नए ब्लॉगर Lack of Knowledge के कारण कोई भी टेबल अपने पोस्ट में लगा देते हैं। बहुत से ब्लॉगर तो MS Word से table बनाकर अपने पोस्ट में add कर देते हैं। जो बिल्कुल भी responsive नहीं होती है।

अगर आप भी ऐसा करते हैं, तो समझ लीजिए की आपकी पोस्ट responsive नहीं होगी। और ऐसे में आपके ब्लॉग पोस्ट की Loading Speed घट जाएगी। पोस्ट ओपन होने में समय लगेगा। जिससे SEO पर बुरा प्रभाव पढ़ता हैं। और विजीटर्स कम हो जाते हैं। तो इसलिए आप ऐसी गलती बिल्कुल ना करें। आज हम इस पोस्ट में Responsive Table अपने Blog Post में कैसे Add करते हैं। इसके बारे के बता रहे हैं।

Responsive Table क्या है?

Responsive Table का मतलब होता है, ऐसा Table जो Device Friendly हो यानी कि अगर मोबाइल में ओपन करे तो Mobile की तरह table खुले। और अगर Laptop या PC में ओपन करे तो डेस्कटॉप मोड में खुले। और Tab या Mac Notebook Tab पर ओपन करें तो Tablet Mode में खुले। इस प्रकार वो सभी Table जो Mobile Friendly या Multi Device Friendly हो, Responsive Table होते हैं।

Responsive Table की वजह से हमारा पोस्ट या आर्टिकल बहुत ही सुन्दर और आकर्षक दिखता हैं। वहीं अगर , आप normal table लगाते हैं, तो लैपटॉप या कंप्यूटर पर तो सही खुलेगी, पर मोबाइल में आपकी टेबल के कंटेंट कट जाएंगे। वो सही तरह से खुल नहीं पाएंगे। जिससे हमारे ब्लॉग पर User Experience खराब होता है। और विजीटर्स कम होने लगते है।

Blogger Blog Ke Post Mein Responsive Table Kaise Add Kare

WordPress में Responsive Table ऐड करने के लिए बहुत से plugin मौजूद है। वर्डप्रेस में बहुत ही आसानी से हम रेस्पॉन्सिव टेबल को प्लगइन की मदद से ऐड कर सकते हैं। लेकिन ब्लॉगर पर कोई plugin नहीं होती है। गूगल ब्लॉक्स्पॉट के ब्लॉक पर अगर हमें Responsive Table Add करना है, तो इसके लिए थोड़ी-बहुत HTML की बेसिक जानकारी होनी चाहिए। यहां पर हमें html की कुछ कोडिंग ऐड करने होते हैं।

अगर आपको HTML थोड़ी भी नहीं आती है, तब भी आप अपने ब्लॉग पर रेस्पॉन्सिव टेबल लगा सकते हैं। इसके लिए आप इस पोस्ट में बताए गए टुटोरिअल को स्टेप बाय स्टेप अच्छे से समझे और फॉलो करें। चलिए जानते हैं ब्लॉगर ब्लॉग के पोस्ट में Responsive Table कैसे Add करते हैं।

 Read More 
● ब्लॉगर पोस्ट में Automatic TOC कैसे लगाएं – How to Automatically Create Table of Contents in Blogger Posts
● How To Fix Structured Data Testing Tool Error in Hindi – Publisher & DateModified Field is Required Error
● How To Fix Breadcrumbs Data-Vocabulary.org Schema Deprecated Error in Hindi – Breadcrumbs Error को कैसे Fix करें।

Step – 1 

● सबसे पहले ब्लॉगर में लॉगइन करें।
● उसके बाद Theme पर जाएं।
● Theme पर जाने के बाद “Edit HTML” पर क्लिक करें।
● अब आपके सामने HTML Editor Box ओपन हो जाएगी। जिसमें आपको नीचे दिए गए कोड को ऐड करना है।
● अब इस Code को Copy कर लें।

/* Responsive Table for Post By TechHindiGyan.com<br /> *************************************************/<br /> .post table {<br /> border-collapse: collapse;<br /> width: 100%;<br /> }<br /> .post table td, th {<br /> border: 1px solid #ccc;<br /> padding: 8px;<br /> text-align: center<br /> }<br /> .post table tr:hover {background-color: #eee;}</p> <p>.post table th {<br /> padding-top: 15px;<br /> padding-bottom: 15px;<br /> font-size: .95em;<br /> letter-spacing: .1em;<br /> text-transform: uppercase;<br /> text-align: center;<br /> background-color: #eee;<br /> color: black;<br /> }

Steps – 2

● उसके बाद आपको HTML Editor Box के अंदर क्लिक करना है, और कीबोर्ड से [Ctrl+F] press करना है।
● अब Search Box में आपको ]]></b:skin> सर्च करना है।
● उसके बाद ऊपर कॉपी किए गए कोड को ]]></b:skin> इसके ठीक ऊपर Paste कर देना है।
● उसके बाद Save Theme पर क्लिक करें। और ब्लॉगर के Dashboard पर आ जाएं।

Steps – 3

● अब आपको जिस पोस्ट में Table Add करना है। उस पोस्ट को ओपन करें।
● उसके बाद पोस्ट के HTML Section में जाए। और पोस्ट में जिस स्थान पर आपको टेबल लगाना है, वहां पर नीचे वाले कोड को Paste कर दें।
● उसके लिए पहले आपको इस कोड को Copy करना है।

</p> <table> <tbody> <tr> <th>FIRST COLUMN</th> <th>SECOND COLUMN</th> </tr> <tr> <td>ROW</td> <td>ROW</td> </tr> <tr> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> </tr> </tbody> </table> <p>

● उसके बाद ब्लॉगर पोस्ट के HTML Section में, जिस स्थान में आप Table Add करना चाहते हैं वहां पर इस कोड को Paste कर देना हैं।
● निचे Screenshot को देखकर आप समझ सकते हैं। 

● इस HTML कोड में 2 Columns और 5 Rows हैं। आप अपने पोस्ट के अनुसार Columns और Rows बढ़ा या घटा भी सकते हैं।
● उसके लिए आपको इस HTML Code में थोड़ी Editing करनी होगी।
● अगर आप Columns बढ़ाना चाहते हैं, तो <th>COLUMN</th> इस कोड को कॉपी करके जितने Columns बढ़ाना चाहते हैं, उतने बार इसे Second Column वाले कोड के निचे Paste करना हैं।
● और अगर Rows बढ़ाना चाहते हैं, तो <td>5</td> इस कोड को कॉपी करके जितने Rows ऐड करना हैं, उतने बार इसे पेस्ट करें। 

 Read More 
● Blogger Custom Robots Header Tags Setting Kaise Kare – Blog Ki Best SEO Settings
● Custom Robots.txt File Kya Hai? Blog Mein Implement Kaise Kare

तो इस तरह से आप आसानी से अपने ब्लॉगर ब्लॉग की किसी भी पोस्ट में Responsive Table Add कर सकते हैं। बहुत ही आसान प्रक्रिया है। ब्लॉगर थीम की HTML Editor Box में आपको केवल एक बार CSS कोड पेस्ट करनी है। जो इस पोस्ट में ऊपर बताई गई हैं। उसके बाद आप जिस भी पोस्ट में टेबल लगाना चाहते हैं, उस पोस्ट के html section में आपको table की coding add करना रह जाता है। जो इस पोस्ट में 2nd html coding बताई गई है, यही table की html कोडिंग हैं।

Conclusion

तो दोस्तों, अब आप जान गए होंगे कि Responsive Table Blogger Blog के Post में कैसे Add करते हैं। उम्मीद करता हूँ की आपको पोस्ट पसंद आई होगी। और मेरे बताये गए सभी बाते आपको समझ में भी आ गयी होंगी। अगर आपके मन में अभी भी कोई सवाल है, तो आप हमें कमेंट करके पूछ सकते है। पोस्ट पसंद आई हो तो प्लीज इस पोस्ट को अपने सभी दोस्तों के साथ सोशल मीडिया में जरूर शेयर करें। इसके अलावा THG को Follow करके सभी नए पोस्ट की जानकारी लगातार प्राप्त कर सकते है। 

Thanks / धन्यवाद