How To Create a HTML Sitemap theme | Html Theme

How To Create a HTML Sitemap
sitemap


How To Create a HTML Sitemap theme | Html Theme

How To Create a HTML Sitemap-There are some Sitemap Theme That You can apply On Your Sitemap Creative Looking Theam.How To Create a HTML Sitemap

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

How To Create a HTML Sitemap

Featerse:

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


How To Create a HTML Sitemap-Step By Step guide To Apply 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. 

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

<script type='text/javascript'>



Step 3. Paste your theme code just Below it.
How To Create a HTML Sitemap

First Theme:

How To Create a HTML Sitemap
First Theme Demo


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

        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>




How To Create a HTML Sitemap

Second Theme:

How To Create a HTML Sitemap
second Theme


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

}

  

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

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



How To Create a HTML Sitemap

Third Theme:

How To Create a HTML Sitemap
third theme


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



You have successfully applied a new theme to your Site Map page
any error please comment below






    Blogger Comment
    Facebook Comment

0 Comments:

Post a Comment

 
Copyright © 2013. My Smart New - All Rights Reserved