Responsive table कैसे बनाये blogger ke page par?

 Responsive table कैसे बनाये blogger ke page par?

अक्सर हमे अपने ब्लॉगर के ब्लॉग पर (Table) की आवश्यकता पड़ती है, लेकिन ब्लॉगर के Gedget मे Table बनाने की कोई व्यवस्था नहीं की गयी है, कुछ महीनो पेहले Table बनाने के लिए page के अंदर table का option आया करता था पर अब वो बंद हो गया है| कारण है Responsivness, 

मगर हम HTML तथा CSS केआई सहायता से एक Responsive Table Create करेंगे, और ये Table हर तरह के Device पर कम करेगा

CSS Code को अपने ब्लॉगर के them मे update कैसे करे?

1. सबसे पहले नीचे दिये हुए CSS Code को Download करे- नीचे Download का button दिया गया हे उसपर click करके Download करलें - एक 15 Second का timer आयेगा और फिर डौन्लोड हो जाएगा|

/* CSS Post Table by https://hindisahityashastra.blogspot.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:#4FB8A6;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 Post Table by https://hindisahityashastra.blogspot.com */

Direct Download:
You can download the file: Click here to download

2. अपने  ब्लॉगर के Them मे जाकर => 

Then Edit HTM => 

CTRL + F and type </ head> => 

</ head> के ठीक उपर Download किया हुआ CSS Code Copy करके Pest करना होगा| 

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

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

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

सबसे पहले ब्लॉगर के अंदर Theme ऑप्शन पर क्लिक करे।

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

उसके बाद आपके सामने Blogger Theme Designer खुल जायेगा। अब आपको “Advanced” के नाम से एक ऑप्शन मिलेगा आपको उस पर क्लिक कर देना है।

Advanced ऑप्शन पर क्लिक करने के बाद आपको “Add CSS” के नाम से एक ऑप्शन दिखाई देगा उस पर क्लिक करे।

Add CSS ऑप्शन पर क्लिक करने के बाद आपके सामने Custom CSS का बॉक्स खुल जायेगा। इस बॉक्स के अंदर आप ब्लॉगर के अंदर जो भी CSS कोड ऐड करना चाहते हो वो ऐड कर सकते हो। अब आपको ऊपर दिए गए CSS कोड को कॉपी करना है और उसे इस Custom CSS बॉक्स में पेस्ट कर देना है।

उसके बाद “Apply to Blog” ऑप्शन पर क्लिक कर देना है। इतना करने पर CSS कोड आपके ब्लॉगर में ऐड हो जायेगा।

ब्लॉगर में 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>

1. उसके बाद “New post” ऑप्शन पर क्लिक करना है।
2. उसके बाद आपको HTML ऑप्शन पर क्लिक करना है।
3. HTML ऑप्शन पर क्लिक करने के बाद आपके सामने पोस्ट का HTML खुल जायेगा। अब आप पोस्ट के अंदर जहा पर Responsive Table लगाना चाहते हो वहा पर ऊपर दिया गया HTML कोड पेस्ट कर दीजिये।
4. इतना करने पर आपके ब्लॉगर की पोस्ट या पेज के अंदर एक Responsive Table बन जाएगी। ऊपर टेबल के लिए जो HTML कोड दिया गया है उसके अंदर 4 Row और 2 Column बनाये गए है आप चाहे तो इनको कम या ज्यादा भी कर सकते हो।