Once you’ve created your simple and classic HTML sitemap page for blogger by following the guide to creating an HTML blogger page., you still need to give it a great look for your visitor’s to stay for a long time on your website, and also for easily navigation plus better user experience. To give your blogger blog’s HTML Sitemap Page a better look and make it responsive, you had to paste the codes given below to your existing HTML Sitemap Page’s Code Editor. And that’s all you need to do.
Now to copy and paste these codes, first you need to
- How to Make Stylish Looking HTML Sitemap Page In Blogger – 4 Types
- How to Create 5 Different Styles Of HTML Sitemap Page In Blogger Website
- 6 Script Codes To Apply Themes For Blogger Sitemap Page.
If you need to create a simple basic HTML Sitemap Page For Blogger Cick Here.
Page Contents
Script Codes To Create Responsive HTML Sitemap Page For Blogger Website:-
Below given javascript code & CSS codes are collected from various sources for the user’s best experience. You can use or copy/paste them to your Blogger website to create your responsive and designed HTML Sitemap Page. We also give a little description of the Script code with A Unique Title.
Designed HTML Sitemap Page Script Codes For Blogger:-
Below are given two types of HTML sitemap page Script Code. When you copy any of the scripts provided below and paste it to your Blogger Sitemap Page in HTML Editor, it will start working automatically. You Can see the guide to Implement or Guide to Create An HTML Sitemap Page For Blogger.
Note: In this method you need to replace the whole script with new one.
1. Thumbnail Grid View Sitemap Script:-
Grid view sitemap Script shows your blog’s latest posts first with a format of the grid, when you copy the provided script to your Blogger Sitemap Page it will start working automatically. You Just Need to Copy and replace the provided javascript with your old sitemap page. You can see an example of a Grid View Sitemap Page Example.
<style type="text/css"> .grid-sitemap { overflow: hidden; position: relative; height: 565px; margin: 20px 0 40px 0; } .grid-sitemap iframe { display: block; width: 100%; height: 680px; margin-top: -115px; margin-left: -5px; } </style> <div class="grid-sitemap"> <iframe src="https://www.yourblog.blogspot.com/view/flipcard"></iframe> </div>2. Bulleted Recent Post Wise Sitemap Script:-
When you copied and paste the provided script to your blogger sitemap page, it will start showing your recent posts on top with a format of a bulleted list. You Just Need to Copy and replace the provided javascript with your old sitemap page. You can see an example of a Bullet List Recent Posts Sitemap Page Example
<script type="text/javascript"> var numposts = 500; var standardstyling = true; function showrecentposts(json) { for (var i = 0; i < numposts; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } posttitle = posttitle.link(posturl); if (standardstyling) document.write('<li>'); document.write(posttitle); } if (standardstyling) document.write('</li>'); }</script> <br /><ul> <script src="https://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ul>Themes For Blogger Sitemap Page:-
Themes for blogger sitemap page is basically a snippet of JavaScript Code, After the Three Steps Of Creating HTML Sitemap Page In Blogger, you still need to give it a dashing and attractive look. To do this you need to paste the CSS Codes given below to make your Blogger Sitemap Page Awesome, and this is Themes for blogger Sitemap Page.
How to Apply Themes on Blogger Sitemap Page?
To Implement Themes On Your Existing Sitemap Page you need to paste that code just above the <script type=’text/javascript’> or see a below-given step-by-step guide below to implement and applying the method of a new blogger sitemap page theme.
Steps To Apply Designed Themes On Blogger Sitemap Page:-
Step 1. Login to your Blogger account, then go to Pages > Click edit under Site Map page.
Steps To Apply Themes On Blogger Sitemap Page
Total Time: 4 minutes
Step 1. Log in to your Blogger account, then go to Pages > Click edit under the 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. Press “CTRL + F” And Find <script type=’text/javascript’> Tag
Paste the Script Code Just above the Highlighted Line
Step 3. Paste your theme code just above it.
Paste the code at the top of Script Tag
Step 4. Click Update
Note: Dismiss any HTTPS error and Click on Update again.
Supply:
- javascript
Tools:
- Blogger account
- javascript
- Desktop
Materials: javascript CSS codes Google Search Console
You have successfully applied a new theme to your Site Map page. Now you can view your updated sitemap page b clicking on Preview or by visiting with link to your Sitemap Page. You will see a different Look on your Blogger Sitemap Page.
3. Black & White Grid Boxed Label Sitemap:-
Copy and paste the code to make changes to your blogger sitemap page from classic to Black & White Grid Boxed syle like shown below in the image.
<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>4. Simple Text Blue Link Grid Sitemap Theme:-
In this theme of blogger sitemap page, when you implement this will look like below shown in the image.
<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>5. Pink Grid Boxed Sitemap Page:-
Pink colour text with white background plus white & pink labeld designed sitemap page for blogger theme. As you can see in the image below:
<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>6. Brown Black Grid Boxed Sitemap Theme:-
Brown background and white text grid boxed black labeled designed sitemap page theme for blogger. As you can see in the image below:
<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>7. Simple Grid-Boxed Sitemap Theme:-
Simple grid boxed with the black color of text and black background designed sitemap page for blogger. As you can see in the image below:
<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>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
That’s all for now copy paste and enjoy. Drop comments on which theme you like, or also comment on which theme CSS codes not working. We’ll be here for you, you will get an instant reply from our customer care team. Check below-listed stuff related to this you may like more.
You May Also Like Related To This:
- How To Remove Date & HTML From Blogger URL With Script.
- How To Add Light Table Of Contents For Blogger Website With CSS & HTML.
- Stop Adsense Invalid Click Protector Script For Blogger.
- How To Share Blog Post On Facebook Page Automatically.
- 6 Steps To Start Free Blog Website Earn Money In 2020.
