How to Make Stylish Sitemap Page For Blogger.

Stay Safe Wear Mask, Protect Your Self from COVID-19 Thanks For Visit My Website

How To Create Stylish Sitemap Page in Blogger

नमस्कार दोस्तो! स्वागत है आपका PariDigitalMarketing ब्लॉग में।तो आज के इस आर्टिकल में हम बात करने वाले है How To Create Stylish Sitemap Page in Blogger के बारे में। and ये Stylish Sitemap Page Blogger me Kaise Banaye सकते है। तो इन सभी बातों को हम इस Article में जानेंगे। तो बने रहिये इस Article में और जानिए पूरे Details में।

What is Sitemap in Hindi?
साइटमैप क्या होता है ?
So दोस्तों अगर आप एक ब्लॉगर है और ब्लॉग्गिंग करते है| तो आपको इस Sitemap के बारे में जरुर पता होगा| अगर नही पता तो मैं आपको बता दूँ की Sitemap एक ऐसा माध्यम है जिसके जरिये कोई भी Search Engine आपके ब्लॉग के Content को Crawl करके Search इंजन में सबमिट करता है| और आपका पोस्ट सर्च इंजन में Index होता है और Show करता है|

How to Make Stylish Sitemap Page For Blogger?
दोस्तों अब मैं आपको बता दूँ की ये Sitemap page क्या है? तो सबसे पहले आपको sitemap search console/webmaster tool में सबमिट करना होता है| लेकिन उसके बाद भी बहुत से लोग अपने ब्लॉगर ब्लॉग में भी इस Sitemap का एक पेज बनाते है| तो लोग नार्मल पेज बनाते है तो अगर आप एक कुछ अलग प्रकार का बनाते है\ तो इन्हें हम Stylish sitemap page के नाम से जानते है|

How To Create Stylish Sitemap Page in Blogger
So दोस्तों निचे हम Step by Step जानेंगे की कैसे हम अपने ब्लॉगर ब्लॉग के लिए स्टाइलिश साईटमैप पेज बना सकते है| तो निचे बताये गये सभी बातो को ध्यानपूर्वक Follow करे|

Step To Create Stylish Sitemap Page in Blogger
1 . सबसे पहले अपने ब्लॉगर डैशबोर्ड में जाये।
2. अब Pages ऑप्शन पर क्लिक करें और New Pages पर क्लिक करे , नया Page खुल जाएगा
3. निचे दिए गए Code को Copy करे और HTML Section में जाकर Paste करें
4. अब पेज को Publish कर दे आपका साइट मैप क्रिएट हो जायेगा
5. दिए गए Code में Yellow कलर में अपने वेबसाइट का URL डालना न भूले

<style type="text/css">
.tb-sitemap {
    background-color: #222;
    color: #ddd;
    font-family: Verdana,Geneva,Tahoma,Arial,Sans-serif;
    font-size: 14px;
    font-weight: 410;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 9px rgba(0,0,0,.1);
}
.tb-sitemap .toc-header {
    color: #fff;
    font-family: inherit;
    font-weight: 410;
    font-size: 14px;
    background-color: #1A1B1E;
    margin: 0;
    padding: 13px;
    overflow: hidden;
    cursor: pointer;
    border-top: 1px solid #5c5c5c;
    border-bottom: 1px solid #5c5c5c;
    transition: initial;
}
.tb-sitemap .toc-header:hover {
    background: rgb(0,52,52);
    background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(3,106,30,1) 38%, rgba(0,182,182,1) 100%);
}
.tb-sitemap .toc-header:before {
    content: '';
    width: 0;
    height: 0;
    position: relative;
    float:right;
    top: 10px;
    right: 10px;
    border: 5px solid transparent;
    border-color: #aaa transparent transparent;
    transition: all .3s ease;
}
.tb-sitemap .toc-header.active {
    background: #1a1b1e;
    color: #fff;
}
.tb-sitemap .toc-header.active:before {
    border-color: #fff transparent transparent;
    top: 5px;
    -webkit-transform: rotateundefined-180deg);
    -moz-transform: rotateundefined-180deg);
    -ms-transform: rotateundefined-180deg);
    -o-transform: rotateundefined-180deg);
    transform: rotateundefined-180deg);
}
.tb-sitemap .loading {
    display: block;
    padding: 14px;
    text-decoration: blink;
}
.tb-sitemap ol {
    margin: 0;
    padding: 0;
    list-style: none;
    transition: initial;
}
.tb-sitemap li {
    counter-increment: step-counter;
    line-height: normal!important;
    margin: 0!important;
    padding: 7px 7px 7px 16px!important;
    white-space: nowrap;
    text-align: left;
    overflow: hidden;
    transition: initial;
}
.tb-sitemap li:first-child {
    background: rgb(0,52,52);
    background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 100%);}
.tb-sitemap li:nth-child(2n) {
    background: rgb(71,62,62);
    background: linear-gradient(90deg, rgba(71,62,62,1) 19%, rgba(0,0,0,1) 38%, rgba(0,52,52,1) 100%);}
.tb-sitemap li:nth-child(2n+3) {
    background: rgb(0,52,52);
    background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 100%);}

.tb-sitemap li::before {
    content: counter(step-counter)'.';
    margin-right: 5px;
}
.tb-sitemap a {
    color: #fff!important;
    text-decoration: none;
    font-size: 90%;
    transition: initial;
    font-weight:normal!important;
}
.tb-sitemap a:visited {
    color: #fff!important;
    transition: initial;
}
.tb-sitemap a:hover,.tb-sitemap a:visited:hover {
    color: #fff!important;
    text-decoration: underline!important;
    transition: initial;
}
</style>

<br />
<div class="tb-sitemap" id="tb-sitemap">
<span class="loading">Sitemap Loading..</span>
<script type="text/javascript">
var toc_config = {
 url: 'https://www.saranewsup.com', containerId: 'tb-sitemap',
 showNew: 12,
 newText: ' <strong style="font-weight:normal;font-style:normal;color:#000;font-size:11px;background:#fff000;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">New!</strong>',
 sortAlphabetically: {
  thePanel: true,
  theList: true
 },
 maxResults: 9999,
 slideSpeed: {
  down: 400,
  up: 400
 },
 slideEasing: {
  down: null,
  up: null
 },
 slideCallback: {
  down: function() {},
  up: function() {}
 },
 clickCallback: function() {},
 jsonCallback: '_toc',
 delayLoading: 0
};
</script>
<script src="https://docs.google.com/uc?export=download&id=1znP9zLmzL9rN_zkRHGD7JqYfl17e35Ko" type="text/javascript"></script>
</div>

2. Second Method: दूसरा मैप डिज़ाइन
Step To Create Stylish Sitemap Page in Blogger
1 . सबसे पहले अपने ब्लॉगर डैशबोर्ड में जाये।
2. अब Pages ऑप्शन पर क्लिक करें और New Pages पर क्लिक करे , नया Page खुल जाएगा
3. निचे दिए गए Code को Copy करे और HTML Section में जाकर Paste करें
4. अब पेज को Publish कर दे आपका साइट मैप क्रिएट हो जायेगा
5. दिए गए Code में Yellow कलर में अपने वेबसाइट का URL डालना न भूले

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">  
 .grid-sitemap {  
  overflow: hidden;  
  position: relative;  
  height: 565px;  
  margin: 20px 0 40px 0;  
 }  
 .grid-sitemap iframe {  
   display: block;  
   width: 100%;  
   height: 680px;  
   margin-top: -115px;  
   margin-left: -5px;  
 }  
 </style>  
 <br />
<div class="grid-sitemap">
<iframe src="https://www.saranewsup.com/view/flipcard"></iframe>  
 </div>
</div>

दिए गए दोनों code के मैप को देखे और आपको जो अच्छा लगे वह लगाए