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



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

via Blogger http://www.droidadda.org/2017/03/stylish-themed-sitemaps-for-bloggers.html https://mtkdr0id.files.wordpress.com/2017/03/0a0ec-how-to-generate-xml-sitemap-for-custom-blogger.jpg?w=300

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s