How To Add Table in Google Blogger blog with Bootstrap

0
389

आज के यह fresh article मे, आज हम एक खास topic पे बात करने वाले है और वह है, how to show a table in google blogger blog post

सबसे पहले हम बात करते है एसा क्यो होता है की आपके ब्लॉग मे table show नही होता, इसका एक ही कारण है और वह है, आपका ब्लॉगर का template बहुत पुराना है यातो आपके ब्लॉगर मे bootstrap का integration नही है, तो अगर आप bootstrap का table अपने ब्लॉग मे show करवाना चाहते हो तो आपको निचे के step follow करना पड़ेगा।

Bootstrap CDN

सबसे पहले अगर आपको bootstrap का यूज करना है तो आपको अपने ब्लॉगर मे bootstrap को add करना पडेगा with cdn निचे आपको एक link है इसको copy करके आपको अपने ब्लॉगर के head पे paste करना है।

  1. ब्लॉगर का dashboard open किजिए
  2. dashboard मे थीम का option होगा वहा click किजिए
  3. click करके आपको Edit HTML पे click किजिए
  4. बाद मे अपने keyboard मे से Ctrl + F दबाए और head search किजिए
  5. Simple head के अन्दर निचे जो link है इसको paste कर दिजिये
  6. HTML code को save कर लीजिए।
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

Simple Table

यह एक simple table का code है, आपको इस code को copy करके अपने ब्लॉग post मे paste करना है, अगर आपने उपर की link अपने head मे add किया होगा तो एक beatutiful table show होगा आपके blog post मे।


<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Final Word

तो दोस्तो मै finaly आशा रखता हो कि आपको यह आर्टिकल पसंद आया होगा, अगर आया तो देर किस बात कि share कर दिजिये ताकि आपके friend भी कुछ नया सिखले।

LEAVE A REPLY

Please enter your comment!
Please enter your name here