AYYUB TECH Home Online Tutorials Earn Money Blogger Blogging YouTube

Blogger Blog Post Me Table Kaise Add Kare


हेलो दोस्तों इस पोस्ट में हम आपको बताने वाले हैं की CSS और HTML Code की सहायता से Blog Post Me Table Kaise Add Kare तो यदि आप भी जानना चाहते हैं कि Blog Me Responsive Table Kaise Use Kare तो आपके लिए यह पोस्ट Important हो सकता है

Blog post me table kaise add kare, blog me table kaise banaye, blogger blog post me responsive table kaise add kare

जैसे कि आप नीचे टेबल देख सकते हैं यह टेबल 1 responsive table आप भी इसी तरह के टेबल को अपने ब्लॉग पोस्ट में लगा सकते हैं आप चाहे तो इस टेबल में Row या कॉलम भी बढ़ा सकते हैं

Number All Topic Percentage
1. Blogging 100
2. SEO 100
3. Blogger 100
4. Web Design 100
5. Online Tutorials 100

Responsive Table किसे कहते हैं और लगाने का फायदा क्या है

Responsive Table डिवाइस के स्कीन के हिसाब से ऑटोमेटिक एडजस्ट हो जाए उसे ही Responsive Table कहते हैं

Responsive Table Blog Post Me लगाने का फायदा यह है के मोबाइल कंप्यूटर लैपटॉप पीसी के स्क्रीन के हिसाब से Responsive Table Automatic Adjust हो जाता है

तो इस पोस्ट में हम आपको Blog post me responsive table add करने के बारे में बताने वाले हैं

Blog Post Me Table Kaise Add Kare

Blog Post Me Table Add करने के लिए सबसे पहले आपको HTML और CSS Code की जरूरत पड़ेगी जो कि हम आपको हम आपको आगे बताने वाले हैं

Blogger Blog Post Me Responsible Table Add करने के लिए सबसे पहले आपको नीचे दिए हुए CSS कोड को Copy करें

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

Blogger Theme में CSS कोड कहां और कैसे Paste करें

सबसे पहले आपको ऊपर दिए हुए CSS कोड को कॉपी करे और इस CSS कोड को कॉपी करने के बाद अब इस CSS Code को Blogger में Paste करने के 2 तरीके हैं

नीचे बताएं गए दोनों तरीकों में से किसी एक तरीके से CSS कोड को अपने Blogger Theme में Paste करें

1. CSS कोड को ब्लॉगर थीम मे डालने का पहला तरीका
पहला तरीका सबसे असान है CSS कोड को Blogger Theme मे Paste करने के लिए

  1. सबसे पहले Blogger Account में Login करें 
  2. अब Theme पर click करें
  3. फिर Customize के option पर click करें
  4. अब आपको Advance पर क्लिक करना है 
  5. अब आपके सामने Add CSS के Option में एक CSS कोड डालने का बॉक्स ओपन हो जाएगा 
  6. अब आपको ऊपर दिया हुआ CSS कोड Paste है फ़िर Apply to blog पर click करें 

अब आपके Blogger Theme में CSS कोड Successfully Add हो जाएगा

2. CSS कोड को Blogger Theme मे Paste करने का दूसरा तरीका

  1. सबसे पहले अपने Blogger Account में Login करें
  2. अब Theme Option पर क्लिक करें
  3. फिर आपको EDIT HTML पर क्लिक करना है अब आपके सामने HTML का Code Box Open हो जायेगा
  4. अब आपको इस कोड को ]]></b:skin> Search करना है
  5. इस कोड को सर्च करने के बाद अब आपको ऊपर दिया हुआ CSS कोड को इस कोड के ]]></b:skin> ऊपर Paste करना है फिर Theme Save करना है

यदि आप Mobile Se Blogger Theme HTML में इस कोड को सर्च करना चाहते हैं तो इस पोस्ट को Blogger Theme HTML Mobile Se Kiase Edit Kare? इसे जरूर पढ़ें

Blogger Theme में CSS कोड Add करने के बाद अब आपको HTML की सहायता से Blog Post में टेबल को Add करना है जो कि हम आपको आगे बताने वाले हैं


Blog Post Me Table Kaise Use Kare

Blog के किसी भी Post Me Table Add करने के लिए सबसे पहले नीचे दिया हुआ HTML कोड को कॉपी करें

<table border="1">
<tbody>
<tr>
<th>Number</th>
<th>All Topic</th>
<th>Percentage</th>
</tr>
<tr>
<td>1.</td>
<td>Blogging</td>
<td>100</td>
</tr>
<tr>
<td>2.</td>
<td>SEO</td>
<td>100</td>
</tr>
<tr>
<td>3.</td>
<td>Blogger</td>
<td>100</td>
</tr>
<tr>
<td>4.</td>
<td>Web Design</td>
<td>100</td>
</tr>
<tr>
<td>5.</td>
<td>Online Tutorials</td>
<td>100</td>
</tr>
</tbody>
</table>

ऊपर दिया हुए HTML कोड को कॉपी करने के बाद

  1. सबसे पहले Blogger Account में Login करें
  2. अब जिस भी Post में Table Add करना है उस पोस्ट को Edit पर Click करके ओपन करें
  3. अब Left Side में Top पर HTML Option पर Click करें
  4. अब आपके सामने पोस्ट की HTML कोडिंग आ जाएगी अब आपको पोस्ट में जहां भी Table Add करना है वहां पर ऊपर दिया हुआ HTML कोड को पोस्ट में Paste करना है
  5. फिर पोस्ट को Save या Update कर दे 
  6. अब आपके Blog Post Me Responsive Table Add हो जाएगा

आप इस प्रकार से Blogger Blog Post Me Responsive Table Add कर सकते हैं

Blog Post Me Table Edit Kaise Kare

Blog Post Me Table Add करने के बाद अब Blog Post Me Table Edit करने के लिए या Table बनाने के लिए जैसे कि -

टेबल में कोल्लम बढ़ाना या टेबल के कोई से भी कॉलम में कलर लाना या टेबल को डिजाइन करना इसके लिए आपको नीचे दिए हुए Tags को समझना होगा

Html Tag शुरू और बंद करने का का तारिका Full Form कैसे Use होता है
<tr>.........</tr> Table Row इस कोड को इस्तेमाल करके आप टेबल की Landscape बॉक्स बना सकते हैं
<th>.........</th> Table Header इस कोड को इस्तेमाल करके आप Table Row मे एक बॉक्स और Background Color ला सकते हैं
<td>.........</td> Table Division इस कोड को इस्तेमाल करके आप Table Row में एक बॉक्स बना सकते हैं
Html Tag को शुरू करने के बाद उस Tag को हमेशा बंद करना होता है

चलिए आप जानते हैं कि इन सभी Tags का इस्तेमाल करके Table Kaise Banaye

Table Kaise Banaye

Table Create करने के लिए यहां पर निचे 3 तरह के Example दिया गया है आप Example कि सहायता से  Blog Post Me Table बना सकते हैं

Example : 1

<table border="1">
<tbody>
<tr>
<th>Number</th>
<td>All Topic</td>
<td>Percentage</td>
<tr>
</tbody>
</table>

Number All Topic Percentage

Example : 2

<table border="1">
<tbody>
<tr>
<td>Number</td>
<td>All Topic</td>
<td>Percentage</td>
<tr>

<tr>
<td>Number</td>
<th>All Topic</th>
<td>Percentage</td>
<tr>

</tbody>
</table>

Number All Topic Percentage
Number All Topic Percentage

Example : 3

<table border="1">
<tbody>
<tr>
<th>Number</th>
<th>All Topic</th>
<th>Percentage</th>
<th>Star</th>
<tr>

<tr>
<td>1.</td>
<td>Blogging</td>
<td>100</td>
<td>10</td>
<tr>

<tr>
<td>2.</td>
<td>SEO</td>
<td>90</td>
<td>11</td>
<tr>

<tr>
<td>3.</td>
<td>Web Design</td>
<td>80</td>
<td>12</td>
<tr>

<tr>
<td>4.</td>
<td>Online Tutorials</td>
<td>70</td>
<td>13</td>
<tr>

</tbody>
</table>

Number All Topic Percentage Star
1. Blogging 100 10
2. SEO 90 11
3. Web Design 80 12
4. Online Tutorials 70 13

तो ऊपर बताए गए Example को समझ कर Blog Post में जैसा चाहे वैसा Table Create कर सकते हैं यदि आपको कुछ पूछना है तो आप हमें नीचे कमेंट करके बता सकते हैं

मैं आशा करता हूं कि आपको यह पोस्ट अच्छा लगा होगा और आपके काम आया होगा यदि हां तो हमें कमेंट करके जरूर बताएं और इस Post आगे शेयर करें

Related Posts
Share Post



Comment Instructure
आपके Comment का Reply जल्द ही मिल जाएगा आप दोबारा इस पोस्ट पर Visit करके अपने कमेंट का Reply देख सकते हैं