Skip to main content

ब्लॉगर के अंदर रेस्पॉन्सिव टेबल कैसे डालें? How to add Responsive Table into Blogger?

दोस्तों नमस्कार, हमारी वेबसाइट/Website LSHOMETECH पर आपका स्वागत है, हम अपने इस Portal पर Technology और Education से सम्बंधित आर्टिकल लिखते हैं, जो आपके लिए ज्ञान और जानकारी के प्रयाय होते है, आज की इस पोस्ट में हम सीखेंगे की ब्लॉगर के अंदर HTMLऔर CSS कोड की सहायता से एक Responsive Table कैसे बनाते है, और साथ में ब्लॉग्गिंग से सम्बंधित और जानकारी भी देंगे। जिसके बारे में आगे हम विस्तार से पढ़ेंगे। कृपया पूरी जानकारी के लिए पूरी पोस्ट को पढ़ें, साथ ही टेक्नोलॉजी से जुडी किसी अन्य जानकारी के लिए आप हमारे वेबसाइट के बाईं/Left और दिए गए दूसरे आर्टिकल भी पढ़ सकते हैं।
ब्लॉगर के अंदर रेस्पॉन्सिव टेबल कैसे डालें? How to add Responsive Table into Blogger?

How to add Responsive Table into Blogger?
पोस्ट के शुरू में हम जान लेते हैं की Responsive Table क्या होती है, और ये कैसे काम करती है? Responsive Table वो टेबल होती है जो किसी भी डिजिटल डिवाइस की स्क्रीन के हिसाब से ऑटोमेटिक अपना साइज बदल सकती है। उदहारण के लिए अगर इसे आप मोबाइल में खोलेंगे तो यह आपको मोबाइल के साइज की दिखाई देगी और अगर आप इसे कंप्यूटर पर खोलेंगे तो ये कंप्यूटर के हिसाब से आपको दिखाई देगी। असल में किसी भी डिवाइस के अनुरूप ढल जाना ही रेस्पॉन्सिव होता है। बिलकुल इसी तरह से आपके वेबसाइट की थीम आप लगा सकते हैं, अगर आपकी थीम रेस्पॉन्सिव होगी तो वो आपको कंप्यूटर और मोबाइल पर डिवाइस के हिसाब से ही दिखाई देगी।

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

आइये अब जान लेते हैं कि ब्लॉगर के अंदर Responsive Table कैसे डालते हैं?
अगर आप भी ब्लॉगर में रेस्पॉन्सिव टेबल डालना चाहते हैं तो आपको ये तरीका अपनाना होगा जो हम आगे दे रहे हैं। ब्लॉगर के अंदर HTML/Hyper Text Markup Language और CSS/Cascading Style Sheet कोड की मदद से आप आसानी से एक Responsive Table बना सकते हैं। ब्लॉगर में रेस्पॉन्सिव टेबल बनाने के लिए आपको जिन HTML और CSS कोड की जरुरत होगी वो दोनों कोड हम निचे दे रहे हैं। इनके साथ में आपको ये भी बताया गया है कि उन कोड को कैसे और कहाँ पर लगाना है। निचे दिए गए सभी Step/स्टेप को अच्छे से पढ़िए और उनमे जैसे आपको बताया गया है बिलकुल उसी तरह से उन सभी कोड को अपने ब्लॉगर में ऐड कीजिये। जानकारी के लिए ये वीडियो देखें। Link 

सबसे पहले इस CSS कोड को कॉपी करें। CSS code for responsive table
 /* CSS Post Table by www.onlinesahayata.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%}
👉 Download Code Here

ऐसे ऐड करें CSS कोड को अपने ब्लॉगर में। 
Responsive टेबल ऐड करने के लिए ब्लॉगर में CSS कोड को दो तरीकों से प्रयोग कर।  निचे हम दोनों तरीकों के माध्यम से आपको बता रहे हैं। इनमे से आपको जो भी तरीका अच्छा लगे आप उसका इस्तेमाल कर सकते हैं। अगर फिर भी समझ नहीं आये तो आप हमारा ये वीडियो देख सकते हैं - Video Link  

पहला तरीका ब्लॉगर में CSS कोड ऐड करने के लिए। 
सबसे पहले आपको अपने ब्लॉगर को खोलना होगा उसके बाद इसके अंदर Theme ऑप्शन पर क्लिक करे।
Theme खुलने के बाद Edit HTML ऑप्शन पर क्लिक करते ही आपके सामने ब्लॉगर का HTML खुल जायेगा। अब आपको एक बार फिर HTML के अंदर क्लिक करना है, जैसे ही आपके Blogger Code की फाइल खुल जाये तो उसमे आपको कीबोर्ड से Ctrl+F बटन दबाना है। Ctrl+F दबाने पर HTML में दाई तरफ ऊपरी कॉर्नर में एक सर्च बॉक्स/Search Box खुल जायेगा। उस सर्च बॉक्स में आपको ]]></b:template-skin> (इस कोड को कॉपी कर पेस्ट कर दें ) या लिख कर सर्च करना है। अगर इस कोड को लिखने से आपको कुछ भी नहीं मिलता तो आप </b:template-skin> (इस कोड को कॉपी कर पेस्ट कर दें ) या लिख कर सर्च कर लें। जैसे ही आप ये कोड लिख कर सर्च करोगे तो ये कोड HTML के अंदर जहाँ पर भी ये कोड होगा वहां पर आपको हाईलाइट होकर मिल जायेगा। इसके बाद आपको ऊपर दिया हुआ CSS कोड कॉपी करना है और इसे ]]></b:template-skin> कोड से ऊपर पेस्ट कर देना है। यहाँ ये ध्यान रखें की आप इस कोड को ]]> से पहले पेस्ट करना है। इसके बाद आपको Save Theme पर क्लिक कर के थीम को सेव कर देना है। 

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

इसके लिए भी सबसे पहले आपको ब्लॉगर को खोलना है उसके बाद ब्लोग्गर के अंदर Theme ऑप्शन पर क्लिक करना है, इसपे क्लीक करते ही आपका नया पेज खुलेगा, उसके अंदर आपको HTML के पास ही Customize के नाम से एक ऑप्शन मिलेगा जिस पर आपको क्लीक करना है। जैसे ही आप इस पर क्लीक करेंगे आपके सामने Blogger Theme Designer खुल जायेगा। अब आपको इसके अंदर लिस्ट में सबसे निचे Advanced के नाम से एक ऑप्शन मिलेगा जिस पर आपको क्लीक करना है। जैसे ही आप Advanced ऑप्शन पर क्लिक करेंगे उसके बाद आपको Add CSS के नाम से एक ऑप्शन दिखाई देगी।  अब आपको Add CSS पर क्लिक करना है। इस पर क्लीक करते ही आपके सामने Custom CSS का बॉक्स खुल जायेगा। इस बॉक्स में आपको ऊपर दिया गया CSS कोड पेस्ट कर देना है। कोड को पेस्ट करने के बाद Apply to Blog ऑप्शन पर क्लिक कर देना है। ये प्रक्रिया पूरी होते ही आपका CSS कोड आपके ब्लॉगर में ऐड हो जायेगा।

अब आपका एक काम तो हो गया है। इसके बाद आप ब्लॉग पेज पर निचे दिया गया Responsive HTML Code पेस्ट कर सकते हैं। इस कोड को पेस्ट करने का तरीका भी हम आपको बता रहे हैं।  

सबसे पहले अपना ब्लॉगर ओपन करें, उसके बाद आपको New Post पर क्लीक करना है। इसके बाद पेज की बाईं और दिए गए Compose और HTML में से HTML पर क्लीक करना है। जैसे ही आपका HTML खुल जाता है तो उसके अंदर निचे दिया गया Responsive HTML Table कोड पेस्ट कर देना है। इसके बाद आपके पेज पर एक Responsive Table बन जाएगी। इस टेबल में हमने 5 Row और 3 Column बनाये हैं। अगर आप चाहें तो इनको कम या ज्यादा कर सकते हैं। 


<table border=1>
<tr>
<th>No.</th>
<th>Type Here</th> <th>Type Here</th>
</tr>
<tr>
<td>1.</td>
<td>Type Here</td> <th>Type Here</th>
</tr>
<tr>
<td>2.</td>
<td>Type Here</td> <th>Type Here</th>
</tr>
<tr>
<td>3.</td>
<td>Type Here</td> <th>Type Here</th>
</tr>
<tr>
<td>4.</td>
<td>Type Here</td> <th>Type Here</th>
</tr>
<tr>
<td>5.</td>
<td>Type Here</td> <th>Type Here</th>
</tr>
 </table>
👉 Download Code Here

तो दोस्तो आपको हमारी ये पोस्ट कैसी लगी हमें जरूर लिखे, आप पोस्ट के नीचे Comment Box  में अपनी प्रतिक्रियाएं ओर अगर कोई सुझाव है तो वो भी लिख कर भेज सकते हैं। साथ ही आप हमें हमारे द्वारा प्रकाशित नए लेख पढ़ने के लिए Subscribe भी कर सकते हैं।


Join us :
My Facebook :  Lee.Sharma
My YouTube : Home Design !deas


Comments

Popular posts from this blog

आर्मी ऑफिसर कैसे बने। how to become Indian Army officer, what is NDA?

प्यारे बच्चो नमस्कार
में हमारी इस ब्लॉग वेबसाइट पर टेक्नोलॉजी ओर एजुकेशन से संबंधित आर्टिकल लिखता हूँ, ऐसे आर्टिकल जो बच्चों के आने वाले भविष्य में काम आ सकें। हमारे आर्टिकल आपको किसी भी जॉब की पूर्ण जानकारी देने वाले होते हैं। हमारी इस जानकारी के माध्यम से बच्चे सही दिशा का चुनाव कर अपने भविष्य को सफल बना सकते हैं।

आज के इस आर्टिकल में हम बात करने वाले हैं कि आप भारतीय सेना में एक ऑफिसर कैसे बन सकते हैं, बेशक वो थल सेना, वायु सेना या जल सेना ही क्यों न हो। अगर आपमे देश सेवा करने का जज्बा है तो आप इस क्षेत्र का चुनाव कर सकते हैं, ऐसा नही की आपमे देश सेवा का जज्बा हो और आप इसमें जा सकते हैं, इसके लिए आपको बहुत मेहनत भी करनी पड़ेगी। अगर आप पढ़ाई में बहुत अच्छे हैं तभी आप इसमें सेलेक्ट हो सकते हैं। आइये जान लेते हैं NDA क्या है?
NDA यानी "National Defense Academy" ओर हिंदी में इसे "राष्ट्रीय रक्षा अकादमी" कहा जाता है, NDA दुनिया की पहली ऐसी अकादमी है जिसमे तीनो विंगों के लिए प्रशिक्षण दिया जाता है।
आर्मी अफसर कैसे बने!
भारतीय सेना की तीन विंग हैं, army, air force and navel, अ…

Architecture क्या है ? Architect कैसे बने!

दोस्तों नमस्कार, हमारी वेबसाइट/Website LSHOMETECH पर आपका स्वागत है, हम अपने इस Portal पर Technology और Education से सम्बंधित आर्टिकल लिखते हैं, जो आपके लिए ज्ञान और जानकारी के प्रयाय होते है, आज की इस पोस्ट में हम जानेंगे की Architect क्या होता है? कृपया पूरी जानकारी के लिए पूरी पोस्ट को पढ़ें, साथ ही टेक्नोलॉजी से जुडी किसी अन्य जानकारी के लिए आप हमारे वेबसाइट के बाईं/Left और दिए गए दूसरे आर्टिकल भी पढ़ सकते हैं।

आज का जो हमारा विषय है वो है आर्किटेक्ट कैसे बने और आर्किटेक्चर है क्या?  सबसे पहले इन दोनों शब्दों का हिंदी में अगर अनुवाद करे तो  आर्किटेक्चर का मतलब है - वास्तुकला
और  आर्किटेक्ट का मतलब है - वास्तुकार
यदि आपकी भी रुचि आर्किटेक्ट बनने की है, या फिर आपको भी नए-नए प्रारूप /डिजाइन बनाने का शौक है या फिर आप नई-नई इमारतों के बारे में प्लान या नक्शे बनाने का शौक रखते हैं तो आर्किटेक्चर इंजीनियरिंग आपके लिए सबसे बढ़िया रास्ता है जो आपको आपकी मनचाही मंजिल तक ले जाने में आपकी सहायता करेगा।
पहले जान लेते हैं आर्किटेक्चर या वास्तुकला क्या है?
दोस्तो वास्तुकला ललितकला की ही एक शाखा है, व…

DPC क्या होती है? What is DPC?

दोस्तों नमस्कार
                        आज के इस लेख में हम बात करेंगे की डीपीसी क्या होती है? और इसकी घर बनाते वक्त क्या जरूरत है यानी दीवारों के ऊपर डीपीसी लगाने की हमें क्या जरूरत पड़ती है किस कारण या किस चीज़ की रोकथाम के लिए हम डीपीसी लगाते हैं। साधारण दीवार के ऊपर भी आप इसको लगा सकते हैं।
डीपीसी क्या होती है?
दोस्तों आइए पहले जान लेते हैं कि डीपीसी का मतलब क्या होता है डीपीसी का मतलब होता है "Dump Proofing Course" यानी नीवं ओर ऊपरी दीवार के बीच  का जुड़ाव कहे  या व्यवधान कह सकते हैं जो कि आप के घर की सीलन या नमि को दीवारों में ऊपर चढ़ने से रोकता है और आपकी जो दीवारें हैं सदैव अच्छी बनी रहती है। सीलन नहीं होगी तो आप जो प्लास्टर करते हैं पेंट करते हैं वह कभी नहीं झडेगा या उखड़ेगा,वह बिल्कुल सही रहता है हमेशा हमेशा लंबे समय तक टिकाऊ बना रहता है। 
डीपीसी की जरूरत क्या है हमें!
प्यारे मित्रों जो डीपीसी होती है वह दो प्रकार की आप यूज़ कर सकते हैं दोनों डीपीसी के प्रकार में आपको बताऊंगा कि कौन-कौन से प्रकार होते हैं देखिए सबसे पहले जब भी हम हमारे घर की नींव का निर्माण करते हैं उ…