Blogger में Table कैसे बनाएं या Blogger में Responsive Table कैसे बनाएं

इस पोस्ट में आप सीखोगे की ब्लॉगर (Blogger) में Responsive Table कैसे बनाते है। और साथ में आप यह सीखोगे की Responsive Table क्या होती है और यह काम कैसे करती है।

इस पोस्ट में आप पढ़ेंगे :-

❑ Responsive Table क्या है और यह काम करती है ?

❑ Blogger के अंदर Responsive Table कैसे बनाते है ?

❑ CSS Code को Blogger में कैसे Add करे ?

❑ Blogger में Responsive Table बनाने के लिए HTML Code का इस्तमाल कैसे करे ?

 ❑ Responsive Table क्या है और यह काम करती है ?

यह एक ऐसा टेबल (Table ) जो डिवाइस (device) की स्क्रीन की साइज के अनुसार Automatic अपनी साइज को बदल सकती है इसे Responsive Table कहते है।

Responsive Table अलग अलग साइज की डिवाइस में अलग अलग दिखाई देती है जैसे की यदि आप उसे Mobile में खोलोगे तो वो Mobile के साइज की दिखाई देगी और यदि टेबलेट (Tablet) में खोलोगे तो Tablet की साइज की दिखाई देगी और यदि कंप्यूटर(Computer) में खोलोगे तो Computer की साइज की दिखाई देगी। तो Responsive Table इस तरह काम करती है।

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

  ❑ Blogger के अंदर Responsive Table कैसे बनाते है ?

ब्लॉगर के अंदर HTML और CSS कोड की सहायता से आप आसानी से एक Responsive Table बना सकते हो। ब्लॉगर में Responsive Table बनाने के लिए जिन HTML और CSS Code की जरुरत पड़ेंगी आपको वो दोनों Code निचे दिए गए है और साथ में ये भी बताया गया है की उन कोड को कहा लगाना है और किस तरह से लगाना है। तो आप निचे दिए गए सभी Step को अच्छे से पढ़िए और उनमे जैसे बोला गया है उसी तरह से उन कोड को अपने ब्लॉगर में Add करे।

  ❑ CSS कोड को Blogger में कैसे Add करे ?

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

CSS Code For Responsive Table-

 /* CSS Post Table by Jitendra Official Tips */

.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%} 

Step :- CSS कोड को ब्लॉगर(Blogger) में Add करने के दो तरीके है। आप दोनों में से किसी भी तरीके से CSS Code को ब्लॉगर में Add कर सकते हो। यदि पहला तरीका काम नहीं करता है तो आप दूसरे तरीके का प्रयोग कर सकते है।

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

  ♦ पहला तरीका 

Step 1 :- सबसे पहले ब्लॉगर के अंदर Theme पर Click करे।

Step 2 :-उसके बाद Edit HTML पर Click करे।

Step 3 :- उसके बाद आपके सामने ब्लॉगर का HTML खुल जायेगा।

Step 4:- अब आपको एक बार HTML के अंदर Click करना है

Step 5:- उसके बाद Keyboard से Ctrl F दबाना है।

Step 6 :- Ctrl F दबाने पर HTML में दाई तरफ ऊपर कॉर्नर में एक सर्च बॉक्स खुल जायेगा।

Step 7 :- उस सर्च बॉक्स में आपको ]]></b:template-skin> लिख कर सर्च करना है। यदि इस कोड से आपको कुछ भी नहीं मिलता है तो आप </b:template-skin> लिख कर सर्च करे। जैसे ही आप ये कोड लिख कर सर्च करोगे तो ये कोड HTML के अंदर जहा पर भी होगा वहा हाईलाइट हो जायेगा।

Step 8 :- अब आपको ऊपर दिया गया CSS कोड को कॉपी करना है और ]]></b:template-skin> कोड के ऊपर पेस्ट कर देना है। ध्यान रहे आपको ]]> से पहले CSS कोड को पेस्ट करना है।

इतना करने के बाद Save theme पर क्लिक कर के थीम को सेव करे।

   ♦ दूसरा तरीका

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

Step 1 :- सबसे पहले ब्लॉगर के अंदर Theme पर Click करे।

Step 2 :- उसके बाद एक New पेज खुलेगा उसके अंदर आपको “Customize” के नाम से एक Option मिलेगा उस पर Click करे।

Step 3 :- उसके बाद आपके सामने Blogger Theme Designer खुल जायेगा। अब आपको “Advanced” के नाम से एक Option मिलेगा आपको उस पर Click कर देना है।

Step 4 :- Advanced ऑप्शन पर Click करने के बाद आपको “Add CSS” के नाम से एक Option दिखाई देगा उस पर Click करे।

Step 5 :- Add CSS Option पर Click करने के बाद आपके सामने Custom CSS का Box खुल जायेगा। इस Box के अंदर आप ब्लॉगर के अंदर जो भी CSS कोड ऐड करना चाहते हो वो ऐड कर सकते हो।

Step 6 :- अब आपको ऊपर दिए गए CSS कोड को Copy करना है और उसे इस Custom CSS बॉक्स में paste कर देना है।

Step 7 :- उसके बाद “Apply to Blog” Option पर Click कर देना है। इतना करने पर CSS कोड आपके ब्लॉगर में Add हो जायेगा।

  ❑ Blogger में Responsive Table बनाने के लिए HTML कोड का प्रयोग कैसे करे ?

ऊपर दिया गया CSS कोड को अपने ब्लॉगर में ऐड कर लेने के बाद अब आप HTML कोड की सहायता से आसानी से Responsive Table बना सकते हो। अब देखिये आप जिस पेज या पोस्ट के अंदर Responsive Table बनाना चाहते हो उस पेज या पोस्ट के अंदर आपको निचे दिया गया HTML कोड ऐड करना होगा। HTML कोड को पोस्ट या पेज में किस तरह से ऐड करना है उसका तरीका भी निचे बताया गया है।

<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>

Step 1 :- उसके बाद “New post” Option पर Click करना है।

Step 2 :- उसके बाद आपको HTML Option पर Click करना है। HTML Option पर Click करने के बाद आपके सामने पोस्ट का HTML खुल जायेगा। अब आप पोस्ट के अंदर जहा पर Responsive Table लगाना चाहते हो वहा पर ऊपर दिया गया HTML कोड paste कर दीजिये।

Step 3 :- इतना करने पर आपके Blogger की पोस्ट या पेज के अंदर एक Responsive Table बन जाएगी। ऊपर टेबल के लिए जो HTML कोड दिया गया है उसके अंदर 4 Row और 2 Column बनाये गए है आप चाहे तो इनको कम या ज्यादा भी कर सकते हो।

इस तरह से Blogger में Table बना सकते हैं अब यदि आपको यह आर्टिकल पसंद आया है तो Follow करें यदि आपको कोई सवाल पूछना है तो Comments के माध्यम से पूछ सकते हैं