Blogger Me HTML Sitemap Page Kaise Banaye – Full Guide

जो हमारे ब्लॉग के regular reader होते है उसको तो हमारे Blog की लगभग post के बारे में पता होता है लेकिन जो new visitor होता है उसको बहुत कम post के बारे में जनकारी होती है. अगर वो हमारे सभी post को read करना चाहता भी है तो उसे बहुत दिक्कत होती है. हमलोग तो homepage में maximum 10 post दिखाते है. इसीलिए reader को बाकि post पढ़ने के लिए Next page पर जाना होता है. जब हमारे ब्लॉग का Sitemap होता है तो उसमे सभी post का title and link होता है जिससे reader को पढ़ने में आसानी होती है.

Blogger platform में mostly new blogger होते हैं. यदि आप एक old blogger हो और आपको ब्लॉग्गिंग के बारे में अच्छी knowledge है तो आपको पता ही होगा की Blogging किसी के लिए बहुत आसान है लेकिन ज्यादा तर लोगो के लिए बहुत कठिन होता है. इसीलिए अगर आपका Blog Blogger में है तो आसानी से पता चल जाता है की भी एक नए ब्लॉगर हो.

Blogger में बहुत सारे futures and options दिए गए है. कभी कभी आप भी ऐसे blog में visit किये होंगे जो की Blogger में होता है लेकिन उसका design बिल्कुल wordpress blog की तरह होता है. अगर आपको Coding की जनकारी है तो आप भी अपने Blog को इस तरह से design कर सकते हो. अगर आपको coding की जनकारी नहीं है तो यही सबसे बड़ी problem है को आप Blogger पर अपने ब्लॉग को ठीक से manage नहीं कर पा रहे हो. लेकिन अब आपको टेंशन लेने की जरुरत नहीं है क्योकि में इस ब्लॉग के Blogger से related articles share करते रहता हूँ. जिससे आप easily Blog को design और manage कर सकते हो. में आज HTML sitemap बनाने के लिए बता रहा हूँ. Sitemap page बनाने के लिए भी coding का use करना होगा. तो चलिए हम Details से Sitemap के बारे में बात करते है।

See also  Blogger Template Download Karne Ke Liye Top 10 Trusted Websites

Sitemap क्या होता है???

Sitemap में हमारे Blog के सभी posts का Link और Title होता है. इसमें एक ही page में सभी posts का list होता है. Sitemap 2 तरह का होता है.

  1. XML Sitemap – यह sitemap .xml file में होता है. इसमें search engine का preferred script use किया जाता है और इसको search engine में submit करने के लिए ही बनाया जाता है. जब .xml sitemap को search engine में submit करते हैं तो sitemap में posts list होता है और इसको Search engine bot filter करके उसे index करता है।
  2. HTML Sitemap – इसमें भी posts का URL and Title होता है. इसमें अच्छे से design किया जाता है ताकि कोई भी अच्छे से पहचान लेता है और इसमें post का title clickable होता है. यह search engine के लिए नहीं बल्कि Blog Visitors के लिए बनाया जाता है. जिससे visitors अपने मनपसंद post पढ़ सके।

तो sitemap इन्ही दो तरह के होते है और दोनों का काम अलग होता है. Blog में लिए xml और html दोनों sitemap बनाना बहुत important होता है. xml sitemap बनाने के लिए हमने पहले बता दिया है और आज हम HTML sitemap Page बनाने के बारे में बता रहे हैं।

Blog के लिए HTML Sitemap Page कैसे बनाये

Blog के लिए HTML sitemap बनाना बहुत easy है. इसमें बस आपको कुछ script add करने है Blog के page में। इसके लिए आप निचे बताये गए steps को ध्यान से follow कीजिए और आप आसानी से sitemap बना सकते हो।

See also  Blog Post Ki Heading Ko Stylish Design Kaise Kare. Without Plugin

Step 1: सबसे पहले निचे दिए गए code को copy कर लीजिए.

<style>
#bp_toc {
    color: #666;
    margin:  auto;
    padding: ;
    border: 1px solid #d2d2d2;
    float: left;
    width: 100%;
}
span.toc-note {
    display: none;
}
#bp_toc tr:nth-child(2n) {
    background: #f5f5f5;
}
td.toc-entry-col1 a {
    font-weight: bold;
    font-size: 14px;
}
.toc-header-col1,
.toc-header-col2,
.toc-header-col3  {
background:#9E9E9E;
}
.toc-header-col1 {
    padding: 10px;
    width: 250px;
}
.toc-header-col2 {
    padding: 10px;
    width: 75px;
}
.toc-header-col3 {
    padding: 10px;
    width: 125px;
}
.toc-header-col1 a:link,
.toc-header-col1 a:visited,
.toc-header-col2 a:link,
.toc-header-col2 a:visited,
.toc-header-col3 a:link,
.toc-header-col3 a:visited {
    font-size: 13px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.toc-header-col1 a:hover,
.toc-header-col2 a:hover,
.toc-header-col3 a:hover {
    text-decoration: none;
}
.toc-entry-col1,
.toc-entry-col2,
.toc-entry-col3 {
    padding: 5px;
    padding-left: 5px;
    font-size: 12px;
}
.toc-entry-col1 a,
.toc-entry-col2 a,
.toc-entry-col3 a {
    color: #666;
    font-size: 13px;
    text-decoration: none
}
.toc-entry-col1 a:hover,
.toc-entry-col2 a:hover,
.toc-entry-col3 a:hover {
    text-decoration:underline;
}
#bp_toc table {
    width: 100%;
    margin:  auto;
    counter-reset: rowNumber;
}
.toc-entry-col1 {
    counter-increment: rowNumber;
}
#bp_toc table tr td.toc-entry-col1:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
       min-height: 3em;
    float: left;
    border-right: 1px solid #fff;
    text-align: center;
    padding: 0px 11px 1px 6px;
    margin-right: 15px;
}
td.toc-entry-col2 {
    text-align: center;
}
</style>
<div id="bp_toc">
</div>
<script src='http://mybloggerlab.com/js/
sitemap.js'  type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>



Note: This script is Developed by My Blogger Lab’s team. 


Step 2: Blogger में Login करके अपने Blog Dashboard में जाइये.

  1. अब Pages पर Click कीजिए.
  2. New page पर click कीजिए.

    Step 3:

    1. Title में SiteMap या All Posts लिखें.
    2. अब HTML टैब पर Click कीजिए.
    3. यहाँ पर Copy किये हुए code को paste कीजिए.
    4. अब Publish बटन पर Click कीजिए.

      अब आप Page पर visit करके देखे!! आपका Sitemap page ready हो गया होगा. इस तरह से Blogger में आप Sitemap Page बना सकते हो. अगर आप WordPress में Sitemap page बनाना चाहते हो तो इसके लिए Hierarchical HTML Sitemap प्लगइन का use करे. HTML sitemap पेज बनाने के बाद अब Menu में या Footer में उसका Link add कर दीजिए।


      में उम्मीद करता हूँ की आपको यह post अच्छा लगा होगा. अगर आपको इस post से सम्बंधित कोई सवाल पूछना है तो comment के through आप हमें बता सकते हो। पोस्ट अच्छा लगे तो इसको social media में शेयर कीजिए।

      See also  Blogspot Blog Ko Puri Tarah Se Mobile Friendly Kaise Banaye

      Like the post?

      Also read more related articles on BloggingHindi.com Sharing Is Caring.. ♥️

      Sharing Is Caring...

      10 thoughts on “Blogger Me HTML Sitemap Page Kaise Banaye – Full Guide”

      Leave a Comment

      This site uses Akismet to reduce spam. Learn how your comment data is processed.

      ×