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
- 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! :)
Post a Comment