Roorkeeknowledge
Roorkeeknowledge Subscribe our Youtube Channel
Subscribe

BLOGGER में Responsive TABLE कैसे बनाएं


ब्लॉग के अंदर ( Responsive tableकैसे बनाएं  जाने हिंदी में  










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


तो आज हम जानेगे की ब्लॉग के अंदर टेबल कैसे बनाते है 

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

CSS Code   को ब्लॉगर में कैसे Add करें 


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

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

Code CSS इसे कॉपी कर लें। 


ब्लॉगर में CSS कोड का ऐड करने का  ( first method ) हैं

 
1. सबसे पहले ब्लॉगर के अंदर theme को एडिट करें। 

2. उसके बाद एडिट html  क्लिक करें 

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

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

5. इसके बाद आप सेव theme पर click कर दें। 


CSS   कोड add करने का दूसरा Method हैं 

1. सबसे पहले ब्लॉगर theme के ऑप्शन पर क्लिक करें उसके बाद एक new पेज ओपन होगा 
उसके बाद आपको customize के नाम से एक ऑप्शन मिलेगा उस पर क्लिक कर दें। 

2. उसके बाद ब्लॉग थीम डिज़ाइनर ओपन होगा अभी आपको advance के नाम से एक ऑप्शन मिलेगा उस पर क्लिक करें। 

3. अब आपको Add CSS  के नाम से एक ऑप्शन दिखाई देगा उस पर क्लिक करें। 

4. उसके बाद आपके सामने Custom CSS का box खुल जायेगा अब आपको ऊपर दिए गए CSS कोड को कॉपी करना है और उसे इस Custom CSS बॉक्स में पेस्ट कर देना है। 

5. उसके बाद अप्लाई करदे इतना करने पर आपका कोड ऐड हो जयेगा। 

Blogger में रेस्पॉन्सिव टेबलब नाने के लिए 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>


1. तो आप सभी को पता की जब हम किसी पोस्ट को लिखतें हैं तो हम  New Post पर क्लिक करते हैं तो उसी प्रकार हमें नई पोस्ट ओपन करके अपने पोस्ट लिखने हैं। 

2. उसके बाद HTML ऑप्शन पर क्लिक करना हैं उसके ओपन होने के बाद आपको अपनी पोस्ट में जहाँ पर रेस्पॉन्सिव टेबल ऐड करना उस कोड यहाँ पर पेस्ट कर दीजिये। 

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


Summary in Hindi - संक्षेप में :-


उम्मीद करता हूँ की मेरे द्वारा दी गयी जानकारी आपको पसंद आयी होगी अगर आपको यह पोस्ट पसंद आयी होगी। 

तो आप इसे सोशल मीडिया अकाउंट पर भी शेयर कर सकते सकते हैं फेसबुक इंस्टाग्राम ट्विटर पर जरूर शेयर करें धन्यवाद।

ALL THE BEST 

Post a Comment

3 Comments