How To Create Stylish Sitemap Page in Blogger

नमस्कार दोस्तो! स्वागत है आपका Techly360 ब्लॉग में।तो आज के इस आर्टिकल में हम बात करने वाले है 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 एक ऐसा Madhyam है जिसके जरिये कोई भी Search Engine आपके ब्लॉग के Content को Crawl करके Search इंजन में सबमिट करता है| और आपका पोस्ट सर्च इंजन में Index होता है और Show करता है|

➤ Sitemap Generator for Blogger

Stylish Sitemap Page For Blogger

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

Stylish Sitemap Full Video Tutorial

How To Create Stylish Sitemap Page in Blogger

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

➤ Add Breaking News Ticker in Blogger

1. Login into Blogger Dashboard.
2. Now Go to Pages & Click on new Pages.
3. Copy Code Below from Box & Paste into HTML Section.

<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.indroid.in/view/flipcard"></iframe>  
 </div>
</div>

Note:- Replace with Your Domain Name!

2nd Stylish Sitemap Code

<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.Indroid.in',
 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>
</div>

4. Create Your Page Title & Click on Publish.

That’s It! Now Your Stylish Sitemap Page for Blogger has Been Successfully Created.

निष्कर्ष – आपको यह Stylish Sitemap Page in Blogger का आर्टिकल कैसा लगा।आप नीचे कमेंट बॉक्स में कमेंट करके जरूर बताएं।या किसी प्रकार का Suggestion देना भी चाहते है तो आप नीचे Comment Box में अपनी राय हमारे साथ Share कर सकते है।

लेटेस्ट अपडेट्स पाने के लिए Techly360 को Facebook, Twitter और Instagram पर फॉलो करे. और वीडियोज देखने के लिए YouTube पर सब्सक्राइब करे.