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

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! :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,69,Blogging tips,198,Bugs and Errors,34,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,305,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
SEO and SEM Guide For Bloggers: Themes for Blogger Sitemap Label Based (SEQL)
Themes for Blogger Sitemap Label Based (SEQL)
https://4.bp.blogspot.com/-JmA5c1EUx7Y/WLvrrJ7B5ZI/AAAAAAAAGEM/nfHgEK964HgR1PYiFvxcTKeuqp_b2L5IwCLcB/s1600/SEQL-Label-based-sitemap-theme.jpg
https://4.bp.blogspot.com/-JmA5c1EUx7Y/WLvrrJ7B5ZI/AAAAAAAAGEM/nfHgEK964HgR1PYiFvxcTKeuqp_b2L5IwCLcB/s72-c/SEQL-Label-based-sitemap-theme.jpg
SEO and SEM Guide For Bloggers
https://www.experiencelab.info/2017/03/themes-for-blogger-sitemap-label-based.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2017/03/themes-for-blogger-sitemap-label-based.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy