Loading..

 

How To Create Stylish Sitemap Page in Blogger

Hello friends! Today in this article we are going to talk about Create a Stylish Sitemap Page in Blogger. And how to create a stylish sitemap page in Blogger. We will know all these things in this article. So stay with this article and know more details about this.


What is a Sitemap?

If you are a blogger you must know about the Sitemap. If you do not know then I will tell you that Sitemap is such a medium through which any search engine submits the content of your blog to the search engine. And your post gets indexed in the search engine and shows in the search result.

$ads={2}

Stylish Sitemap Page For Blogger

Firstly I will tell you what is this Sitemap page? First, you have to submit the sitemap search console tool. But even then many people make a page of this Sitemap in their blogger blog. People make normal pages, if you make a different type of something, then we know these as Stylish sitemap page.


How To Create Stylish Sitemap Page in Blogger

I will tell you to step by step how you can create a stylish sitemap page for your blogger blog. So follow all the things given below carefully.

Step 1: Go to your Blogger.com Dashboard

Step 2: Create a new Post or new Page

Step 3: Give a Title of your Tool

Step 4: Copy the code given below (Choice is your)

$ads={2}

Sitemap Style 1:


<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.wikitechlibrary.com/view/flipcard"></iframe>  

 </div>

</div>


Sitemap Style 2:


<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.wikitechlibrary.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>

</div>


Note: Replace with Your Domain Name!

$ads={2}

Step 5: Click on Pencil Icon

Step 6: Now click on HTML View

Step 7: Paste here the above code

Step 8: Select the label and give Search description

Step 9: Now, Publish your post

You ave to create a Stylish Sitemap Page for your Blog Successfully.


Conclusion:

How did you like this article about Create a Stylish Sitemap Page in Blogger? You must give us your feedback in the comment box below. If you have any suggestion and you should share your opinion with us in the comment box below.

close