Blogger Mein Responsive Table Kaise Banaye? ब्लॉगर में Responsive Table कैसे बनाये ?

 आज के इस Blogging Article में हम आपको Blogger Mein Responsive Table Kaise Banaye जाते हैं बताने जा रहे हैं, यदि आप Blogger में HTML और CSS Code की सहायता से एक Responsive Table कैसे बनाए जाते हैं सीखना चाहते हैं तो आप इस पोस्ट को पूरा पढ़ सकते हैं।

जब आप WordPress Use करते हैं तो उसमें By Default Table Add करने का Option होता है या आप Tablepress जैसे Plugin को Use कर लेते हैं लेकिन बात जब Blogger की आती है तो इसमें आपको बहुत सारे Coding Knowledge की जरूरत होती है लेकिन यदि आपको Knowledge नहीं है फिर भी आप इस पोस्ट के द्वारा अपनी समस्या का समाधान पा सकते हैं।

• Top 3 Best Seo & AdSense Friendly Blogger Templates for Free
• How to fix Blogger ?m=1 Problem in Hindi 2020 Complete Guide
• 10 Tarike Google Se Paise Kaise Kamaye Best New Guide

Blogger Mein Responsive Table Kaise Banaye जाते हैं यह सीखने से पहले मैं आपको यह बताऊंगा की Responsive Table क्या होता है और यह कैसे काम करता है।

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

Responsive Table वह टेबल होती है जिसे आप अलग-अलग Device जैसे मोबाइल, कंप्यूटर या टेबलेट पर Open करते हैं तो यह Table उस Screen के Size के हिसाब से Automatically Fit हो जाती है इसी को हम Responsive Table का नाम देते हैं।

Responsive Table अलग-अलग Display Size पर अलग अलग दिखाई देती है और यदि आप का टेबल Device के Display के साइज के हिसाब से Adjust नहीं होती है तो आपका table responsive नहीं है।

• 5 Verified Apps To Earn Paytm Cash By Watching Videos
• Blogger Blog Mein Contact Us Page Kaise Create Kare

Responsive Table का उपयोग न करने से आपको बहुत सारे समस्याओं से गुजरना पड़ सकता है जैसे मान लीजिए आप अपने ब्लॉग पर एक Responsive Theme का उपयोग कर रहे हैं लेकिन table-responsive ना होने के कारण आपका Theme तो डिस्प्ले के हिसाब से Adjust हो जाता है लेकिन आपका Table Display से Wide चला जाता है जो SEO के हिसाब से बिल्कुल गलत है इससे आपका रैंकिंग में काफी नुकसान होगा इसलिए आपको हमेशा Responsive Table का ही उपयोग करना चाहिए।

HTML और CSS Code से Blogger Mein Responsive Table Kaise Banaye?

Blogger में वर्डप्रेस की तरह By Default या Plugin की सहायता से Responsive Table बनाने का Option नहीं दिया रहता है इसलिए हमें HTML और CSS कोड की सहायता से Responsive टेबल बनाना पड़ेगा।

Responsive टेबल बनाने के लिए सबसे पहले आपको CSS Code को अपने Blog के अंदर Add करना होगा और उसके बाद Post लिखते Time जहां भी आपको Responsive टेबल बनाना हो वहां पर एक HTML कोड को Add करना होगा।

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

ब्लॉगर में Responsive टेबल बनाने के लिए सबसे पहले आपको मैं नीचे CSS Code दे रहा हूं जिसको आप अपने ब्लॉग में Add करेंगे।

• Blog Post Article Copy होने से कैसे बचाये -100% Working Way
• Sitemap Kaise Banaye & Console में Add करे (Rank #1 Google)

CSS Code For Responsive Table

/* CSS Post Table by www.njtechnicalhindi.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 Above CSS Code

कोडिंग में कोई भी काम आप करने जा रहे हैं तो सबसे पहले आप अपने Blog Theme का Backup और Content का Backup जरूर ले ताकि कोई भी समस्या होने पर आप Simply अपने बैकअप से अपने Blog को Restore कर पाएंगे।

ब्लॉगर में CSS Code Add करने के लिए नीचे दिए गए Steps को Follow करें, फिर आप सीख पाएंगे की Blogger Mein Responsive Table Kaise Banaye जाते हैं।

1. सबसे पहले Blogger के अंदर Theme Option पर क्लिक करें।
2. उसके बाद आपको Edit HTML का Option दिखेगा जिस पर आपको Click करना है।
3. फिर आपके सामने Blogger का HTML Code खुल जाएगा। अब आपको HTML के अंदर एक बार क्लिक करना है और उसके बाद कीबोर्ड से CTRL+F दबाना है। CTRL+F दबाने के बाद एक Search Box खुल जाएगा जिसमें आपको दिए गए दो Code में से कोई भी एक कोड Searchकर लेना है (1) ]]></b:template-skin> (2) </b:template-skin> जैसे ही Code आप सर्च करेंगे यह कोड Highlight हो जाएगा जिससे आप इसको आसानी से देख पाएंगे।
4. अब आपको ऊपर दिया गया CSS Code Copy करना है और Just Code ]]></b:template-skin> के ऊपर Paste कर देना है।
5. Paste करने के बाद आपको Save Theme पर क्लिक कर देना है और आपका Theme जो है Save हो जाएगा।

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

ऊपर दिया गया CSS Code को Blogger में Add करने के बाद अब बारी आती है HTML Code को अपने पोस्ट में Add करके Table बनाने की जो काफी आसान Task है।

• Backlinks Kya Hai And High Quality Backlinks Kaise Banaye
• How to add meta tags description in blogger – Easy Method

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

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

Download Above HTML Code

HTML कोड को पोस्ट के अंदर Use करने के लिए नीचे दिए गए Steps को Follow करें फिर आप सीख पाएंगे की Blogger Mein Responsive Table Kaise Banaye जाते हैं।

1. नया पोस्ट लिखने के लिए New Post पर Click करें।
2. उसके बाद HTML Option पर क्लिक करना है।
3. HTML पर जैसे ही आप क्लिक करेंगे आपके सामने पोस्ट का HTML Look दिख जाएगा अब आप जहां पर भी Responsive Table लगाना चाहते हैं वहां पर ऊपर दिया गया HTML Code Paste कर दीजिए।
4. इतना करने पर आपके ब्लॉगर के पोस्ट के अंदर एक Responsive Table बन जाएगा और एक बात का ध्यान दें यह जो html कोड दिया गया है इसमें चार Row और दो Column बनाए गए हैं यदि आप इसे कम ज्यादा करना चाहते हैं तो Easily आप कर सकते हैं।

अंतिम शब्द

दोस्तों इस आर्टिकल के माध्यम से मैंने यह बताने की कोशिश की है कि आप CSS और HTML कोड के जरिए Blogger Mein Responsive Table Kaise Banaye जा सकते हैं और मुझे पूरा उम्मीद है यह आर्टिकल आपको पसंद आया होगा।

• Blogger templates se footer credit kaise remove kare
• How To Add Social Media Button In Blog – 2020 Best Method

मेरे द्वारा लिखे गए पोस्ट यदि आपको पसंद आते हैं तो आप से एक Request करना चाहूंगा नीचे दिए गए Social Sharing Button का Use करके आप हमारे Article को जरुर Share करें और साथ ही साथ हमारे इस वेबसाइट पर Subscribe Button दिया गया है इस पर क्लिक करके आप Subscribe करें ताकि New Post का Notification आपको सबसे पहले मिल जाए धन्यवाद।