एक हाई क्वालिटी कंटेन्ट या आर्टिकल लिखने के लिए हमे ज्यादा से ज्यादा सरल और इन्फॉर्मटिव चीजों का इस्तेमाल करना लाजमी है। इसीलिए इस लेख मे मैं आपको बताऊँगा की आप किस प्रकार एक Responsive HTML Table अपने ब्लॉगर पोस्ट में ऐड कर सकते हैं।
अपने ब्लॉगर पोस्ट में Informative Table करने के कारण User Experience काफी अच्छा हो जाता है, क्यूंकी यूजर को जानकारी एक अच्छे फॉर्मैट में टेबल के रूप में पढ़ने को मिल जाता है और उसके समय की भी बचत होती है।
और यह आप भी जानते हैं की अच्छे User Experience का मतलब Search Engine में अच्छे पज़िशन पर अपने लेख को लाना। इसीलिए यह Responsive Blogger HTML Table SEO के लिए भी लाभदायक होता है।
तो चलिए जानते हैं की आप किस प्रकार यह टेबल अपने ब्लॉगर के वेबसाईट में ऐड कर सकते हैं।
How To Add Responsive HTML Table In Blogger Post?
यह टेबल अपने ब्लॉगर पोस्ट में ऐड करना काफी आसान है, आपको केवल कुछ कोड अपने ब्लॉगर के थीम में और पोस्ट में ऐड करना होता है जिसके बाद आप सफलता पूर्वक अपने ब्लॉगर पोस्ट में एक Stylish Table Add कर सकते हैं।
तो चलिए Step by Step जानते हैं किस कोड को अपने ब्लॉगर वेबसाईट पर कैसे अप्लाइ कर सकते हैं।
Step 1: Add CSS Code In Blogger Theme
- सबसे पहले आपको नीचे दिए गए कोड को कॉपी करना है
- अब आपको अपने ब्लॉगर Dashboard में जाना है
- इसके बाद आपको Theme Section पर क्लिक करना है
- अब आपको Coustomize के Side में Edit HTML पर क्लिक करना है
- अब आपको </html> को search करना है
- इसके बाद पूरे कोड को </html> के ऊपर paste कर देना है।
- अब Save कर दीजिए।
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<style>
/*CSS for Responsive Table By technicalarp.com*/
.restable
{border-collapse:collapse;
width:100%;
overflow: hidden;
}
.rescap{
border-left:4px solid #009879;
padding:15px;
font-family:georgia;
font-weight:bold;
font-size:20px;
background-color:#dddddd;
color:#990a00;
text-align:left;
overflow:hidden;
margin-bottom:4px;
width:100%;
}
.resth{
padding:12px 15px;
background-color:#009879;
color:#ffffff;
font-family:georgia;
font-size:20px;
font-weight:bold;
border:1px solid #dddddd;
text-align:center;
}
.restr{
border:1px solid #dddddd;}
.restd{padding:12px 15px;
font-family:arial;
font-size:20px;
text-align:center;
border:1px solid #dddddd;
}
.restr:last-of-type{
border-bottom: 2px solid #009879;
}
.restr:nth-of-type(even){
background-color: #f3f3f3;
} </style>
Step 2: Add HTML In Blogger Post
- आपको नीचे दिए गए कोड को कॉपी करना है
- अब आपको ब्लॉगर के dashboard में जाना है और New Post Create करना है या आप Existing Post में भी ऐड कर सकते हैं।
- अब आपको 🖋 Icon पर क्लिक करके HTML View पर क्लिक कर देना है
- इसके बाद पोस्ट के जिस जगह पर आप इस टेबल को ऐड करना चाहते हैं वहाँ पर इस कोड को पेस्ट कर दीजिए।
- अब आपको अपने जरूरत के हिसाब से इस टेबल के टेक्स्ट को बदल देना है और Save कर देना है।
<div> <table class="restable"> <caption class="rescap">Simple Responsive Data Table</caption> <tbody> <tr> <th class="resth">Name</th> <th class="resth">Score</th> <th class="resth">Status</th> </tr> <tr class="restr"> <td data-label="Name" class="restd">Ravi</td> <td data-label="Marks" class="restd">178</td> <td data-label="Status" class="restd">Pass</td> </tr> <tr class="restr"> <td data-label="Name" class="restd">Prem</td> <td data-label="Marks" class="restd">169</td> <td data-label="Status" class="restd">Pass</td> </tr> <tr class="restr"> <td data-label="Name" class="restd">Alex</td> <td data-label="Marks" class="restd">97</td> <td data-label="Status" class="restd">Fail</td> </tr> <tr class="restr"> <td data-label="Name" class="restd">Gale</td> <td data-label="Marks" class="restd">120</td> <td data-label="Status" class="restd">Pass</td> </tr> </tbody></table> </div>
FAQ 1 : क्या इस Responsive HTML Table को wordpress में ऐड कर सकते हैं?
इस टेबल को आप अपने वॉर्डप्रेस में भी ऐड कर सकते हैं।
FAQ 2 : क्या SEO के लिए Table लाभदायक है?
जी बिल्कुल, आप जितना ज्यादा अपने पोस्ट को एक रिच कंटेन्ट बनाएंगे, SEO के लिए उतना ज्यादा फायदा होने वाला है। इसीलिए आपको यह Table भी अपने ब्लॉगर पोस्ट में ऐड करना चाहिए।