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

अगर आप अपने Blog को Search Engine Result Page ( SERP ) पर देखना चाहते हैं तो सबसे पहले अपने blog ke liye xml sitemap बनाये तथा उसके बाद sitemap ko google search console par submit करदे | जिससे की आपका blog जल्दी से जल्दी google के database पर index हो सके |

परन्तु Google के SEO head Matt cutts के अनुसार Google SERP पर उस blog को ज्यादा मान्यता देता है जो user के liye ज्यादा friendly हो तथा जिसको आसानी से navigate किया जा सके | Navigate को simple शब्दों में समझे तो इसका मतलब है की user को हमारे किसी भी articles तथा post को खोजने में कोई मुश्किल न हो | और ऐसा हम अपने blog के liye html sitemap page बनाकर कर सकते हैं | जहाँ पर हमारी सभी post के लिंक होते हैं और हमारे readers अपने मनपसन्द के किसी भी article को एक ही जगह से access करके पढ़ पाएंगे |

.XML Or .HTML Sitemap Me Kya Difference Hai

.XML sitemap को मुख्य रूप से search engine के liye इस्तेमाल करते हैं | इसी sitemap का प्रयोग करके search engine जैसे google ,yahoo तथा bing हमारे blog को अपने database पर index करते हैं |

वही दूसरी तरफ .HTML sitemap हमारे readers के liye बहुत उपयोगी होता है | HTML sitemap को blog के footer में रख कर हम अपने blog की visibility बढ़ा सकते हैं | आपको हर popular blog के footer में sitemap का लिंक जरुर दिखाई देगा | जहाँ से आप उनके प्रत्येक page तथा post को पढ़ सकते हैं और इसके साथ ही आप ये भी देख सकते हैं की हाल ही में कौनसी post update हुई है |

यदि अब आपको लगता है की  html sitemap page को blog पर रखने से फायदा होगा तो आप निचे दिए गये step को follow कर सकते हैं --

NOTE :- आप अपने BlogSpot blog के साथ custom domain name add करके ही इस trick का इस्तेमाल कर सकते हैं | यह trick blogspot subdomain name जैसे -www.example.blogspot.com के साथ काम नही करेगी |

BlogSpot Blog Ke Liye HTML Sitemap Page Kaise Banaye

STEP 1.  अपने BlogSpot blog के Dashboard में जाएँ | और वहां से Page>>New Page पर क्लिक करें |

STEP 2. New page पर click करने के बाद जो page editor open होगा उसके ऊपर आपको दो option दिखाई देंगे
compose और html  वहा से html को select करें |

STEP 3. HTML को select करने के बाद जो दो code लाइन आपको दिखाई देंगी उनको delete करके निचे दिया गया code paste कर दें | तथा page title में sitemap लिखे |


<div id="tabbed-toc">
<span class="loading">Loading, please wait for a moment</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://www.blogplushindi.com", // Enter your blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Default thumbnail size
    noThumb: "", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window. `false` to open in same window
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts or
//define how many recent posts are to be marked by changing the number
    newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>New!</em>" // HTML/CSS for
//the "New!" text
};
</script>
<script src="http://yourjavascript.com/51107864021/tabbed-toc-defaults.js" type="text/javascript"></script>
<style>
/*Sitemap  */
#tabbed-toc {
 width: 99%;
 margin: 0 auto;
 overflow: hidden !important;
 position: relative;
 color: #222;
 border: 0;
 border-top: 5px solid #FC0204;
 background-color: #1D1D1D;
 -webkit-transition: all 0.4s ease-in-out;
}
#tabbed-toc .loading {
 display:block;
 padding:5px 15px;
 font:normal bold 11px Arial,Sans-Serif;
 color:#FFF;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
 margin:0;
 padding:0;
 list-style:none;
 }
#tabbed-toc .toc-tabs {
 width: 24.8%;
 float: left !important;
}
#tabbed-toc .toc-tabs li a {
 display:block;
 font:normal bold 10px/28px Arial,Sans-Serif;
 height:28px;
 overflow:hidden;
 text-overflow:ellipsis;
 color:#ccc;
 text-transform:uppercase;
 text-decoration:none;
 padding:0 12px;
 cursor:pointer;
  -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .toc-tabs li a:hover {
 background-color: #515050;
 color: #FFF;
 }
#tabbed-toc .toc-tabs li a.active-tab {
 background-color:#FFFC03;
 color: #222;
 position: relative;
 z-index: 5;
 margin: 0 -2px 0 0;
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
 width: 75%;
 float: right !important;
 background-color: #F5F5F5;
 border-left: 5px solid #FFFC03;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .divider-layer {
 float:none;
 display:block;
 position:absolute;
 top:0; right:0; bottom:0;
}
#tabbed-toc .panel {
 position:relative;
 z-index:5;
 font:normal normal 10px Arial,Sans-Serif;
}
#tabbed-toc .panel li a {
 display: block;
 position: relative;
 font-weight: bold;
 font-size: 11px;
 color: #222;
 line-height: 2.8em;
 height: 30px;
 padding: 0 10px;
 text-decoration: none;
 outline: none;
 overflow: hidden;
 -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li time {
 display:block;
 font-style:italic;
 font-weight:400;
 font-size:10px;
 color:#666;
 float:right;
}
#tabbed-toc .panel li .summary {
 display:block;
 padding:10px 12px;
 font-style:italic;
 border-bottom:4px solid #275827;
 overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
 float:left;
 display:block;
 margin:0 8px 0 0;
 padding:4px;
 width:72px;
 height:72px;
 border:1px solid #dcdcdc;
 background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
 background-color: #DBDBDB;
 font-size: 10px;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
 background-color:#222;
 color:#FFF;
 outline:none;
 -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
 background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
 background-color:#fff;
 border:0 solid #888;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
 overflow:hidden;
 width:auto;
 float:none !important;
 display:block;
}
#tabbed-toc .toc-tabs li {
 display:inline;
 float:left !important;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
 background-color:#222;
 color:#ccc;
}
#tabbed-toc .toc-tabs li a.active-tab {
 color:#000;
}
#tabbed-toc .toc-content {
 border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
 display:none;
}
}
</style>


STEP 4. Code paste करने के बाद  page को  publish करने से पहले कुछ change जरुर करले जिनको मैंने नीले color में highlight किया हुआ |

1. Loading , please wait for a moment  की जगह पर आप अपना कोई भी message डाल सकते हैं जो आपके blog के  html sitemap page के upload होने से पहले दिखाई देगा |

2. http://blogplushindi.com की जगह पर अपना domain name डाले |

3. Blog के लिए  sitemap page बनाने के बाद जब भी हम किसी label पर click करेंगे तो उसका color yellow हो जाएगा | यदि आप yellow की जगह दूसरा color show करना चाहते हैं तो इस #FFFC03 color code की जगह अपने मनपसन्द का color इस्तेमाल कर सकते हैं | 

finally अब आप अपने blog के html sitemap page को open करके देखिए , i hope की आपको आपकी इच्छा के अनुकूल result मिलेगा , अब आप चाहे तो इस page को footer में रख सकते हैं या फिर blog के menu bar में show कर सकते हैं |

यदि अब भी आपको कोई समस्या आ रही है तो मुझे comment section में बताए मै जल्द से जल्द आपकी समस्या को सुलझाने का प्रयास करूंगा | धन्यवाद !

निचे दिए गए social sharing button पर क्लिक करके इस article को share जरुर करें |