ब्लॉगर के अंदर रेस्पॉन्सिव टेबल (Responsive Table) कैसे बनाये ?

Stay Safe Wear Mask, Protect Your Self from COVID-19 Thanks For Visit My Website

ब्लॉगर के अंदर रेस्पॉन्सिव टेबल (Responsive Table) कैसे बनाये ?

How to Make Responsive Table inside Blogger Post?

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

Responsive Table क्या होती है और ये कैसे काम करती है ?

वो टेबल जो डिवाइस (device) की स्क्रीन की साइज के अनुसार आटोमेटिक अपनी साइज को बदल सकती है उसे Responsive Table कहते है। टेबल का साइज स्क्रीन के साइज के अनुसार Adjust होता है और वो भी स्वतः , अपने आप Colmn , एंड Row का साइज बदलता जाता है। Responsive Table अलग अलग साइज की डिवाइस में अलग अलग दिखाई देती है जैसे की यदि आप उसे मोबाइल में खोलोगे तो वो मोबाइल के साइज की दिखाई देगी और यदि टेबलेट में खोलोगे तो उसकी साइज की दिखाई देगी और यदि कंप्यूटर में खोलोगे तो कंप्यूटर की साइज की दिखाई देगी। तो इस तरह से Responsive Table काम करती है।

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

ब्लॉगर के अंदर Responsive Table कैसे बनाते है ?

ब्लॉगर के पेज पर आप जैसे पोस्ट लिखते है वैसे Table नहीं बना सकते क्युकि पोस्ट लिखने के लिए जो टूल है उन टूलो में टेबल टूल का ऑप्शन नहीं है इस कारण टेबल बनाने के लिए आपको HTML Code की जरुरत पड़ेगी और इसके साथ ही आप responsive टेबल बनाना चाहते है तो आपको CSS Code की, ब्लॉगर के अंदर HTML और CSS कोड की सहायता से आप आसानी से एक Responsive Table बना सकते हो। ब्लॉगर में Responsive Table बनाने के लिए जिन HTML और CSS कोड की जरुरत आपको होगी वो दोनों कोड निचे दिए गए है और साथ में ये भी बताया गया है की उन कोड को कहा लगाना है और किस तरह से लगाना है। तो आप निचे दिए गए सभी स्टेप को अच्छे से पढ़िए और उनमे जैसे बोला गया है उसी तरह से उन कोड को अपने ब्लॉगर में ऐड करे।

इस पोस्ट में सबसे पहले हम Table बनाना जानेगे

ब्लॉगर में Table कैसे बनाये?

How to insert Table inside Blogger Post

1. निचे दिए गए कोड को कॉपी करे

<table border=1>
<tr>
<th>No.</th>
<th>Social Media</th>
</tr>
<tr>
<td>1.</td>
<td>YouTube</td>
</tr>
<tr>
<td>2.</td>
<td>Facebook</td>
</tr>
<tr>
<td>3.</td>
<td>Twitter</td>
</tr>
<tr>
<td>4.</td>
<td>Instagram</td>
</tr>
 </table>

2. अपने ब्लॉगर का dashboard के होम पेज जाये
3. पोस्ट ऑप्शन को क्लिक करे और यहाँ पर आपको अपनी पोस्ट दिखेगी आप जिस पोस्ट में भी Table बनाना चाहते है उस पोस्ट के Edit पर जाकर पोस्ट edit मोड में खोले , यदि आप किसी नयी पोस्ट में टेबल बनाना चाहते है तो NEW Post पर क्लिक करे।
4. अब पोस्ट के Left Side दो ऑप्शन दिख रहे होंगे Compose  और HTML, HTML पर क्लिक करें
5. अब आपको जिस भी जगह पर टेबल बनानी है उस जगह जाकर यह कोड Paste करें। Code को Paste करते समय ध्यान रखे कि इस Code को HTML के दूसरे Tag के अंदर ना paste करें जहा पर उस कोड समाप्त हो वहाँ पर पेस्ट करें।
6. अब आप Compose पर क्लिक करें आपको जिस जगह टेबल बनानी थी उस जगह टेबल बन गयी होगी ऊपर टेबल के लिए जो HTML कोड दिया गया है उसके अंदर 4 Row और 2 Column बनाये गए है आप चाहे तो इनको कम या ज्यादा भी कर सकते हो।
7. और आप यदि Color full टेबल बनाना चाहते है तो इसके लिए में एक पोस्ट में बताऊगा।
8. और यदि टेबल में Colmn एंड Row बढ़ाना या घटना चाहते है तो Row बढ़ाने के लिए

<td>यहाँ नंबर </td>
<td>Yaha New Topic Likhe</td>
</tr>

को </table> से पहले लगाए और यहाँ नंबर दे उस जगह पर आप अपना रनिंग नंबर दे सकते है , और yaha New Topic को चेंज करके आपको जो लिखना है और जितने चाहे Row Add कर सकते है। और यदि आप डिटेल में टेबल एडिट करना शिखना चाहते है तो दूसरी पोस्ट बना देंगे।

CSS कोड को ब्लॉगर में कैसे ऐड करे ?

ब्लॉगर में Responsive Table बनाने के लिए सबसे पहले आपको निचे दिए गए CSS कोड को अपने ब्लॉगर में ऐड करना होगा।

CSS Code For Responsive Table-

 /* CSS Post Table Created by www.paridigitalmarketing.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%} 

CSS कोड को ब्लॉगर में ऐड करने के दो तरीके है।

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

1. ब्लॉगर में  Theme में  CSS कोड ऐड करें 

1. सबसे पहले ब्लॉगर के अंदर Theme ऑप्शन पर क्लिक करे।
2. उसके बाद Edit HTML ऑप्शन पर क्लिक करे।
3. उसके बाद आपके सामने ब्लॉगर का HTML खुल जायेगा। अब आपको एक बार HTML के अंदर क्लिक करना है और उसके बाद कीबोर्ड से Ctrl+F दबाना है। Ctrl+F दबाने पर HTML में दाई तरफ ऊपर कॉर्नर में एक सर्च बॉक्स खुल जायेगा।
4. उस सर्च बॉक्स में आपको ]]></b:template-skin> लिख कर सर्च करना है। यदि इस कोड से आपको कुछ भी नहीं मिलता है तो आप </b:template-skin> लिख कर सर्च करे। जैसे ही आप ये कोड लिख कर सर्च करोगे तो ये कोड HTML के अंदर जहा पर भी होगा वहा हाईलाइट हो जायेगा।
5. अब आपको ऊपर दिया गया CSS कोड को कॉपी करना है और ]]></b:template-skin> कोड के ऊपर पेस्ट कर देना है। ध्यान रहे आपको ]]> से पहले CSS कोड को पेस्ट करना है।
6. इतना करने के बाद Save theme पर क्लिक कर के थीम को सेव करे।

ब्लॉगर में Customize में  CSS कोड ऐड करें 

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

1. सबसे पहले ब्लॉगर के अंदर Theme ऑप्शन पर क्लिक करे।
2. उसके बाद एक नया पेज खुलेगा उसके अंदर आपको “Customize” के नाम से एक ऑप्शन मिलेगा उस पर क्लिक करे।

3. उसके बाद आपके सामने Blogger Theme Designer खुल जायेगा। अब आपको “Advanced” के नाम से एक ऑप्शन मिलेगा आपको उस पर क्लिक कर देना है।
4. Advanced ऑप्शन पर क्लिक करने के बाद आपको “Add CSS” के नाम से एक ऑप्शन दिखाई देगा उस पर क्लिक करे।
5. Add CSS ऑप्शन पर क्लिक करने के बाद आपके सामने Custom CSS का बॉक्स खुल जायेगा। इस बॉक्स के अंदर आप ब्लॉगर के अंदर जो भी CSS कोड ऐड करना चाहते हो वो ऐड कर सकते हो। अब आपको ऊपर दिए गए CSS कोड को कॉपी करना है और उसे इस Custom CSS बॉक्स में पेस्ट कर देना है।
6. उसके बाद “Apply to Blog” ऑप्शन पर क्लिक कर देना है। इतना करने पर CSS कोड आपके ब्लॉगर में ऐड हो जायेगा।