Stylish Themed Sitemaps for Bloggers

 

Hello Everyone ! Once again i am here to share an awesome Blogging Tips with you all. Please check this out below.

 
These are themes for HTML-based sitemap page provided by howbloggerz only and will not work for any other sitemap.

How to Add Sitemap Page in blogger - by Droidadda

• Format - Label based
• Design - SEQL
• Responsive
• Easy custom columns
• No hidden script

DEMO

<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet">
<style type="text/css">
    .post-archive {
        width: 100%;
        padding: 20px 0;
        font-family: "Lato", sans-serif;
    }
   
    .post-archive h4 {
        border-bottom: 2px solid #E3E3E3;
        color: #333333;
        font-size: 20px;
        margin: 0 0 10px 2px;
        padding: 0 0 10px;
        font-family: "Montserrat", sans-serif;
        font-weight: 700;
    }
   
    .ct-columns {
        -moz-column-count: 2;
        -moz-column-gap: 20px;
        -moz-column-rule: none;
        -webkit-column-count: 2;
        -webkit-column-gap: 20px;
        -webkit-column-rule: none;
        column-count: 2;
        column-gap: 20px;
        column-rule: none;
    }
   
    .ct-columns p {
        padding: 5px 0px;
        -moz-column-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -o-column-break-inside: avoid;
        -ms-column-break-inside: avoid;
        column-break-inside: avoid;
        display: inline-block;
        width: 100%;
    }
   
    .ct-columns p a {
        background: #242424;
        color: #fff;
        display: block;
        border: 2px solid #000;
        font-size: 14px;
        line-height: normal;
        border-radius: 5px;
        padding: 10px 15px;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
    }
   
    .ct-columns p a:hover {
        background: #fff;
        color: #000;
        text-decoration: none;
    }
   
    .ct-columns p a span {
        color: rgb(255, 0, 0);
    }
   
    @media screen and (max-width: 768px) {
        .ct-columns {
            -moz-column-count: 2;
            -moz-column-gap: 10px;
            -moz-column-rule: none;
            -webkit-column-count: 2;
            -webkit-column-gap: 10px;
            -webkit-column-rule: none;
            column-count: 2;
            column-gap: 10px;
            column-rule: none;
        }
    }
   
    @media screen and (max-width: 550px) {
        .ct-columns {
            -moz-column-count: 1;
            -moz-column-gap: 0px;
            -moz-column-rule: none;
            -webkit-column-count: 1;
            -webkit-column-gap: 0px;
            -webkit-column-rule: none;
            column-count: 1;
            column-gap: 0px;
            column-rule: none;
        }
    }
</style>

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style type="text/css">
    .post-archive {
        width: 100%;
        padding: 20px 0;
        font-family: "Lato", sans-serif;
    }
   
    .post-archive h4 {
        border-bottom: 1px solid #EAEAEA;
        color: #333333;
        font-size: 20px;
        margin: 0 0 10px 2px;
        padding: 0px 10px 10px;
    }
   
    .ct-columns {
        -moz-column-count: 2;
        -moz-column-gap: 20px;
        -moz-column-rule: none;
        -webkit-column-count: 2;
        -webkit-column-gap: 20px;
        -webkit-column-rule: none;
        column-count: 2;
        column-gap: 20px;
        column-rule: none;
    }
   
    .ct-columns p {
        padding: 0px;
        -moz-column-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -o-column-break-inside: avoid;
        -ms-column-break-inside: avoid;
        column-break-inside: avoid;
        display: inline-block;
        width: 100%;
    }
   
    .ct-columns p a {
        color: #0A12CE;
        display: block;
        font-size: 14px;
        line-height: normal;
        padding: 0px 15px;
    }
   
    .ct-columns p a:hover {
        color: #888CDD;
    }
   
    .ct-columns p a span {
        color: rgb(255, 0, 0);
    }
   
    @media screen and (max-width: 768px) {
        .ct-columns {
            -moz-column-count: 2;
            -moz-column-gap: 10px;
            -moz-column-rule: none;
            -webkit-column-count: 2;
            -webkit-column-gap: 10px;
            -webkit-column-rule: none;
            column-count: 2;
            column-gap: 10px;
            column-rule: none;
        }
    }
   
    @media screen and (max-width: 550px) {
        .ct-columns {
            -moz-column-count: 1;
            -moz-column-gap: 0px;
            -moz-column-rule: none;
            -webkit-column-count: 1;
            -webkit-column-gap: 0px;
            -webkit-column-rule: none;
            column-count: 1;
            column-gap: 0px;
            column-rule: none;
        }
    }
</style>

 

<link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Exo" rel="stylesheet">
<style type="text/css">
    .post-archive {
        width: 100%;
        padding: 20px 0;
        font-family: 'Didact Gothic', sans-serif
    }
   
    .post-archive h4 {
        border-left: 5px solid #D342DD;
        color: #333333;
        font-size: 20px;
        margin: 0 0 10px 2px;
        padding: 5px 10px;
        font-family: 'Exo', sans-serif;
        font-weight: 700;
        box-shadow: 0 0 5px #64446666;
        border-radius: 5px;
    }
   
    .ct-columns {
        -moz-column-count: 2;
        -moz-column-gap: 20px;
        -moz-column-rule: none;
        -webkit-column-count: 2;
        -webkit-column-gap: 20px;
        -webkit-column-rule: none;
        column-count: 2;
        column-gap: 20px;
        column-rule: none;
    }
   
    .ct-columns p {
        padding: 5px 0px;
        -moz-column-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -o-column-break-inside: avoid;
        -ms-column-break-inside: avoid;
        column-break-inside: avoid;
        display: inline-block;
        width: 100%;
    }
   
    .ct-columns p a {
        background: #fff;
        color: #F568AD;
        display: block;
        border: 1px solid #C9AFCB;
        font-size: 15px;
        line-height: normal;
        border-radius: 0 3px 0;
        padding: 10px 15px;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
        box-shadow: 5px 5px #F0EAED;
    }
   
    .ct-columns p a:hover {
        background: #fff;
        color: #D034E7;
        text-decoration: none;
    }
   
    .ct-columns p a span {
        color: rgb(231, 0, 255);
    }
   
    @media screen and (max-width: 768px) {
        .ct-columns {
            -moz-column-count: 2;
            -moz-column-gap: 10px;
            -moz-column-rule: none;
            -webkit-column-count: 2;
            -webkit-column-gap: 10px;
            -webkit-column-rule: none;
            column-count: 2;
            column-gap: 10px;
            column-rule: none;
        }
    }
   
    @media screen and (max-width: 550px) {
        .ct-columns {
            -moz-column-count: 1;
            -moz-column-gap: 0px;
            -moz-column-rule: none;
            -webkit-column-count: 1;
            -webkit-column-gap: 0px;
            -webkit-column-rule: none;
            column-count: 1;
            column-gap: 0px;
            column-rule: none;
        }
    }
</style>

 

<link href="https://fonts.googleapis.com/css?family=Lato|Roboto" rel="stylesheet">
<style type="text/css">
    .post-archive {
        width: 100%;
        padding: 20px 0;
        font-family: "Lato", sans-serif;
    }
   
    .post-archive h4 {
        box-shadow: 0px -10px #ab494d inset, 0 0 120px #000 inset;
        color: #fff;
        font-size: 20px;
        margin: 0 0 10px 2px;
        padding: 5px 2px 15px 8px;
        font-family: "Roboto", sans-serif;
        font-weight: 700;
        border-radius: 5px 5px 0 0;
    }
   
    .ct-columns {
        -moz-column-count: 2;
        -moz-column-gap: 20px;
        -moz-column-rule: none;
        -webkit-column-count: 2;
        -webkit-column-gap: 20px;
        -webkit-column-rule: none;
        column-count: 2;
        column-gap: 20px;
        column-rule: none;
    }
   
    .ct-columns p {
        padding: 5px 0px;
        -moz-column-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -o-column-break-inside: avoid;
        -ms-column-break-inside: avoid;
        column-break-inside: avoid;
        display: inline-block;
        width: 100%;
    }
   
    .ct-columns p a {
        background: #AB494D;
        color: #fff;
        display: block;
        border: 2px solid #3A3A3A;
        font-size: 14px;
        line-height: normal;
        border-radius: 4px;
        padding: 10px 15px;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
        box-shadow: -1px -3px 2px #8f8c8c;
    }
   
    .ct-columns p a:hover {
        background: #27292E;
        color: #fefefe;
        text-decoration: none;
    }
   
    .ct-columns p a span {
        color: rgb(221, 233, 45);
    }
   
    @media screen and (max-width: 768px) {
        .ct-columns {
            -moz-column-count: 2;
            -moz-column-gap: 10px;
            -moz-column-rule: none;
            -webkit-column-count: 2;
            -webkit-column-gap: 10px;
            -webkit-column-rule: none;
            column-count: 2;
            column-gap: 10px;
            column-rule: none;
        }
    }
   
    @media screen and (max-width: 550px) {
        .ct-columns {
            -moz-column-count: 1;
            -moz-column-gap: 0px;
            -moz-column-rule: none;
            -webkit-column-count: 1;
            -webkit-column-gap: 0px;
            -webkit-column-rule: none;
            column-count: 1;
            column-gap: 0px;
            column-rule: none;
        }
    }
</style>

 

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway" rel="stylesheet">
<style type="text/css">
    .post-archive {
        width: 100%;
        padding: 20px 0;
        font-family: 'Open Sans', sans-serif;
    }
   
    .post-archive h4 {
        border-bottom: 2px solid #EEEEEE;
        color: #333333;
        font-size: 20px;
        margin: 0 0 10px 2px;
        padding: 0 0 10px;
        font-family: 'Raleway', 'sans-serif';
        font-weight: 300;
    }
   
    .ct-columns {
        -moz-column-count: 2;
        -moz-column-gap: 20px;
        -moz-column-rule: none;
        -webkit-column-count: 2;
        -webkit-column-gap: 20px;
        -webkit-column-rule: none;
        column-count: 2;
        column-gap: 20px;
        column-rule: none;
    }
   
    .ct-columns p {
        padding: 5px 0px;
        -moz-column-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -o-column-break-inside: avoid;
        -ms-column-break-inside: avoid;
        column-break-inside: avoid;
        display: inline-block;
        width: 100%;
    }
   
    .ct-columns p a {
        background: #fafafa;
        color: #333;
        display: block;
        border: 2px solid #FFFFFF;
        font-size: 14px;
        line-height: normal;
        outline: 1px solid #EEEEEE;
        padding: 10px 15px;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
    }
   
    .ct-columns p a:hover {
        background: #fff;
        color: #000;
        text-decoration: none;
    }
   
    .ct-columns p a span {
        color: rgb(255, 0, 0);
    }
   
    @media screen and (max-width: 768px) {
        .ct-columns {
            -moz-column-count: 2;
            -moz-column-gap: 10px;
            -moz-column-rule: none;
            -webkit-column-count: 2;
            -webkit-column-gap: 10px;
            -webkit-column-rule: none;
            column-count: 2;
            column-gap: 10px;
            column-rule: none;
        }
    }
   
    @media screen and (max-width: 550px) {
        .ct-columns {
            -moz-column-count: 1;
            -moz-column-gap: 0px;
            -moz-column-rule: none;
            -webkit-column-count: 1;
            -webkit-column-gap: 0px;
            -webkit-column-rule: none;
            column-count: 1;
            column-gap: 0px;
            column-rule: none;
        }
    }
</style>

Steps to Apply Sitemap Theme

Step 1. Login to your Blogger account, then go to Pages > Click edit under Site Map page.

Note: Make sure that HTML mode is on. if not, then toggle it on > click close button without saving the page and then open it again by clicking edit.

Step 2. Click anywhere inside the input field and search the following code (use Ctrl + F):

 
<script type='text/javascript'> 

Step 3. Paste your theme code just above it (at the top).

Note: If you have applied any theme code before then remove it before applying new theme code.

Step 4. Configuration.

- To change the number of columns replace numeric value inside:

• For laptop    -moz-column-count: 2, -webkit-column-count: 2, column-count: 2
• For ipad        -moz-column-count: 2, -webkit-column-count: 2, column-count: 2
• For iphone   -moz-column-count: 1, -webkit-column-count: 1, column-count: 1

Step 5. Click Update.

Note: Dismiss any HTTPS error and Click on Update again.

Not found any theme for your blog design? Send me your blog address via Contact Us page and i will try to add one for you in upcoming sitemap themes.

hurray!

You have successfully applied a new theme to your Site Map page. For any issues related to above Tutorial Please Comment Below. Stay Updated, Browse Howbloggerz! :)

Like this post? Please share.