You dont have javascript enabled! Please enable it!

Blogger Website या blog में Html Sitemap Page कैसे बनाएं

क्या आप अपनी Blogger Website या blog में Html Sitemap Page बनाना चाहते हैं तो आप बिल्कुल सही article पढ़ रहे हैं क्योंकि यहां पर हम आपको बताने वाले हैं कि आप किस प्रकार से बिल्कुल आसानी से ब्लॉगर वेबसाइट पर Html Sitemap Page बना सकते हैं।

यदि आप एक blog शुरू करना चाहते हैं, तो आपने blogger.com के बारे में सुना होगा। ब्लॉगर एक free blogging,platform है जिस पर ब्लॉग बनाना और मैनेज करना बहुत ही आसान है जो आपको मिनटों में ब्लॉग बनाने की अनुमति देता है। 

Blogger.com को आप फ्री में इस्तेमाल कर सकते हैं  इस पर आप आसानी से बहुत से features add कर सकते हैं जैसे social media integration और email subscriptions इत्यादि। साथ ही, blogger.com पर वेबसाइट बनाने के लिए आपको अधिक,तकनीकी अनुभव की भी आवश्यकता नहीं है!

अगर आप अपना ब्लॉग blogger.com पर बनाना चाहते हैं लेकिन यह नहीं जानते कि How to create a blog in Blogger तो अधिक जानकारी के लिए यहां पढ़ें। 

Blogger Website में Html Sitemap Page क्यों बनाएं?

Blogger Website में Html Sitemap Page बनाना साइड SEO के लिए बहुत ही मददगार है। यह आपकी वेबसाइट पर आने वाले user के लिए भी बहुत ही उपयोगी है, क्योंकि user Html Sitemap Page के द्वारा आसानी से आपकी वेबसाइट पर post content को देख सकता है।

अब आप सोच रहे होंगे कि हमारी वेबसाइट पर by default XML Sitemap है तो हम क्यों Html  साइटमैप page बनाएं। तो हम आपको बता देना चाहते हैं कि जो डिफॉल्ट साइटमैप होता है वह केवल search engine bot के लिए होता है। उसे एक आम व्यक्ति के लिए समझ पाना बहुत ही मुश्किल होता है। 

दूसरा कारण यह है कि आज के समय में किसी व्यक्ति के पास इतना समय नहीं है कि वह आपकी वेबसाइट पर आए और content सर्च करें। लोग त्वरित और प्रभावी विकल्प चाहते हैं। इसलिए आपको अपने ब्लॉगर वेबसाइट में Html Sitemap Page अवश्य बनाना चाहिए, ताकि कोई भी व्यक्ति अगर आपकी वेबसाइट पर आए तो आपकी वेबसाइट के कंटेंट को आसानी से देख सके।

ALSO READ :-   Blogger post के permalink या url से date और .html कैसे हटाए?

Add Author box in Generatepress theme without plugin

Html Sitemap Page क्या है?

Html Sitemap Page ब्लॉगर वेबसाइट पर एक पेज के रूप में होता है। जहां पर आपकी वेबसाइट की सभी पोस्ट के link और Heading title दिखाई देते हैं। यहां पर सभी पोस्ट को अलग-अलग कैटेगरी वाइज डिवाइड करके दिखाया जाता है।

जिससे आपकी वेबसाइट पर आने वाले user को content  ढूंढने में आसानी रहती है और यूजर Html Sitemap Page में जाकर Heading title पर क्लिक करने के बाद content read कर सकता है।

Html Sitemap Page बनाने का मुख्य उद्देश्य यह है कि ब्लॉग पर आने वाले यूजर को पूरी वेबसाइट का कंटेंट एक ही पेज पर मिल जाए। जिससे user को आपकी वेबसाइट पर content search करने की आवश्यकता ना पड़े।

एचटीएमएल साइटमैप पेज पर latest post को सबसे पहले दिखाया जाता है और उसके बाद में दूसरे  posts को दिखाया जाता है।

अगर आप भी अपने blogger blog पर एचटीएमएल साइटमैप पेज बनाना चाहते हैं तो लेख को ध्यान से पूरा पढ़े।

How to Create An HTML Sitemap Page in Blogger? (Blogger Website में Html Sitemap Page कैसे बनाएं)

Blogger Website या blog में Html Sitemap Page बनाना बहुत ही आसान है इसके लिए आप नीचे दिए गए स्टेप्स को फॉलो करें।

Step 1 :- सबसे पहले Blogger.com पर जाएं और अपने blogger अकाउंट में login करें।

blogger create new page

Step 2 :- अब लेफ्ट साइड में Pages के ऑप्शन पर क्लिक करने के बाद New Page पर क्लिक करें।

Step 3 :- अब आपके सामने एक blogger page editor खुल जाएगा यहां पर सबसे पहले ऊपर आपको page का title दे देना है, जैसे हम Sitemap पेज बना रहे हैं तो हम यहां पर टाइटल sitemap दे देंगे।

blogger html editor

Step 4 :- इसके बाद आपको टाइटल के नीचे pencil का icon दिखाई देगा उस पर क्लिक करने के बाद HTML View पर क्लिक कर दे।

paste html code in blogger html editor

Step 5 :- अब नीचे दिए गए html code को copy करे और html editor में पेस्ट कर दें।

HTML Code Style 1


* Sitemap page */

<style type="text/css">

#sitemap{

width:100%;

margin:5px auto;

border:1px solid #05a0ff;

-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

}

.labl{

color:#FF5F00;

font-weight:bold;

margin:0 -5px;

padding:1px 0 2px 11px;

background:-moz-linear-gradient(right,#c2eafe 0%,#05a0ff 40%);

background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#05a0ff),color-stop(1,#c2eafe));

border:1px solid #37c2dd;

border-radius:4px;-moz-border-radius:4px;

-webkit-border-radius:4px;box-shadow:3px 3px 1px #a0a0a0;

-moz-box-shadow:3px 3px 1px #a0a0a0;-webkit-box-shadow:3px 3px 1px #a0a0a0;display:block;

}

.labl a{color:#fff;

}

.labl:first-letter{text-transform:uppercase;

}

.new{color:#FF5F00;

font-weight:bold;

font-style:italic;

}

.postname{font-weight:normal;

background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);

background:-webkit-gradient(linear,left 80,right 10,color-stop(0.50,#fff),color-stop(1,#C2EAFE));

}

.postname li{border-bottom: #ddd 1px dotted;

margin-right:5px

}

</style>

<br />

<div id="sitemap">

<script src="https://amanbhattarai4400.github.io/csshosting/sitemap.js" type="text/javascript"></script>

<script src="https://example.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>

</div>

Note:- ऊपर दिए गए code में example.com की जगह पर आपको अपने डोमेन का URL डाल देना है।

ALSO READ :-   Blogger Blog Post में Code Box Add कैसे करें

HTML Code Style 2

<style scoped="" type="text/css">
#bp_toc {background:#008CDB;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;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:#aaa;font-family:'Trebuchet MS';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 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 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;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
#comments {display:none;}
</style>
<div id="bp_toc" style="max-height:1200px;overflow:scroll;overflow-x:auto;">
</div>
<script src='https://cdn.rawgit.com/BloggerSpice/Sitemap/master/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>

HTML Code Style 3

<style>

#bp_toc {

    color: #757;

    margin:  auto;

    padding: ;

    border: 1px solid #6E1907;

    float: left;

    width: 100%;

}

span.toc-note {

    display: none;

}

#bp_toc tr:nth-child(2n) {

    background: #ffffff;

}

td.toc-entry-col1 a {

    font-weight: bold;

    font-size: 14px;

    

}

.toc-header-col1,

.toc-header-col2,

.toc-header-col3  {

background:#28fafa;

}

.toc-header-col1 {

    padding: 10px;

    width: 250px;

  text-align: center;

}

.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: bold;

    color: #000000;

    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: #000000;

    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&max-results=9999&callback=loadtoc" type
Do not allow hide existing

Step 6 :- अब आप राइट साइड में page setting के नीचे option पर क्लिक करने के बाद Reader comments में Do not allow; hide existing को सेलेक्ट कर ले।

Step 7 :- यह देखने के लिए कि एचटीएमएल पेज कैसा दिखाई देता है, राइट साइड में Preview के बटन पर क्लिक करें।

preview and publish blogger page

Step 8 :- इसके बाद publish के बटन पर क्लिक करके page को पब्लिश कर दें।

बस हो गया, अब आपकी वेबसाइट पर एचटीएमएल पेज बन चुका है और आप इसे अपनी वेबसाइट के main menu या footer में जहां चाहे ऐड कर सकते हैं।

FAQ

एचटीएमएल sitemap पेज वर्डप्रेस वेबसाइट में कैसे ऐड करें?

एचटीएमएल sitemap पेज वर्डप्रेस वेबसाइट में ऐड करना बहुत ही आसान है क्योंकि वर्डप्रेस में ऐसे बहुत से plugins मिल जाते हैं, जिनका इस्तेमाल करके आप आसानी से wordpress site पर Html Sitemap Page बना सकते हैं। जैसे Hierarchical HTML Sitemap, Companion Sitemap Generator – HTML & XML इत्यादि। 

HTML और XML Sitemap में क्या अंतर है?

HTML Sitemap आपकी वेबसाइट पर आने वाला कोई भी user आसानी से read कर सकता है और समझ सकता है, लेकिन XML Sitemap को user के द्वारा समझना बहुत ही मुश्किल है। क्योंकि XML Sitemap को search engine robots के लिए बनाया जाता है ताकि वह हमारी वेबसाइट के कंटेंट को search engine में index कर सकें। 

ALSO READ :-   How to Move from WordPress to Blogger in Hindi?

क्या HTML साइटमैप Website SEO के लिए अच्छा हैं?

आप लोग जानते हैं कि एक HTML साइटमैप मुख्य रूप से वेबसाइट पर आने वाले user के लिए बनाया जाता है, लेकिन कुछ SEO विशेषज्ञों का मानना है कि यह Search Engine Results Pages (SERPs) में आपकी रैंकिंग में सुधार करता है।

क्योंकि एक HTML साइटमैप में आपकी वेबसाइट के सभी पोस्ट के लिंक होते हैं, जिस कारण Google द्वारा आपकी साइट के सभी pages को ढूंढना और क्रॉल करना आसान हो जाता है।

Sitemap कितने प्रकार के होते हैं?

साइटमैप मुख्य तौर पर दो प्रकार के होते हैं एक HTML साइटमैप और दूसरा XML साइटमैप।

आज के इस लेख से आपने क्या सीखा?

आज के इस लेख में हमने आपको बताया है कि आप किस प्रकार से Blogger blog में Html Sitemap Page बना सकते हैं। अगर आपको यह लेख पसंद आया हो, तो इसे अपने दोस्तों के साथ शेयर करें और उन्हें भी बताएं कि ब्लॉगर ब्लॉग में एचटीएमएल साइटमैप पेज कैसे बनाते हैं।

अगर अपना कोई सुझाव या सवाल हो तो आप हमें कमेंट बॉक्स में कमेंट कर सकते हैं हमें आपकी मदद करने में खुशी होगी।

ब्लॉगर के बारे में अधिक जानकारी के लिए नीचे दिए गए पोस्ट read करें।

Kuljinder Singh जो कि इस website का owner है haryana में एक छोटे से विलेज gledwa से है जो kurukshetra का पास पड़ता है। लाइफ मे कुछ कर गुजरने कि चाहत लेकर 2020 मे reliance jio कि job छोड़कर Blogging को ही अपना carrier बनाया।  Read More Click Here

Leave a Comment

error: Alert: Content is protected !!