Wednesday

Themes for Blogger Sitemap Label Based (SEQL)


Updated on: March 05, 2017


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 howbloggerz



Themes for Blogger Sitemap Label Based (SEQL)

  • 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 find 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! 🙂