How to Apply Theme to Blogger Sitemap Page

Today, we're talking about a sitemap decorating.It's easier to do this by Theme.In the previous article we discussed how to generate a HTML Sitemap Page On Blogger Blog.So before you add this theme today, you should look at that article and make a sitemap page.Just adding the theme is not enough.

Apply Theme to Blogger Sitemap Page
Today, we're talking about a sitemap decorating.It's easier to do this by Theme.In the previous article we discussed how to generate a HTML Sitemap Page On Blogger Blog.So before you add this theme today, you should look at that article and make a sitemap page.Just adding the theme is not enough.

Advantages of a sitemap page theme.


There are several benefits.
  • Depending on the label on your site, the post will be set up accordingly.
  • Design - SEQL
  • This sitemap page is responsive to suit any one of your devices.
  • The sitemap is also available in several columns, making it easy to select.
  • And this does not contain hidden script.
So there are various benefits.And if you like, you can change this theme to suit your needs.However, we will provide code below.It's your sitemap page theme code.Copy it and go to the next steps.



Theme code


[<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: #000000;
        color: #fff;
        display: block;
        border: 2px solid #e91e1e;
        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>]

How to Apply Theme to Blogger Sitemap Page


1. First go to blogger dashboard Pages >> Edit.

2. Then go to HTML mode

3. Now search below code with use ctrl+f

[<script type='text/javascript'>]

4. Now paste your Theme code just above it (at the top).

5. Finally click the Update button.

Now you have applied the theme for the sitemap page.As we mentioned earlier, this theme can be changed accordingly.It's easy to change columns, colors, etc.

READ: How to Create Dynamic View Sitemap Page on Blogger Blog

Customize Theme code.


You can find out about two parts here.That is, we say how to change colors and columns.

Change Columns


In the code above, you can see Red, Yellow, and Blue text lines.They can set the number of columns displayed by your device.
  • For laptop / PC    -moz-column-count: 2, -webkit-column-count: 2, column-count: 2
  • For Tablet            -moz-column-count: 2, -webkit-column-count: 2, column-count: 2
  • For Smartphone   -moz-column-count: 1, -webkit-column-count: 1, column-count: 1


Change Colors


In the above code you will see three color codes.It has a Black highlighted color code, which can give the background color, text color and border color code respectively.

So you know about How to Apply Theme to Blogger Sitemap Page, Hope you like the post, don’t forget to share it with your friends and leave a comment below if you are facing any problem at any step in the method discussed above.Thank you

COMMENTS

Name

Apple,4,Apps,8,Blogger,48,Emoney,8,Facebook,10,Graphics,20,Health,3,News,8,Product,2,Science,4,SEO,36,Software,6,Sponsored,4,Technology,114,
ltr
item
SBmade | New Data Of Technology: How to Apply Theme to Blogger Sitemap Page
How to Apply Theme to Blogger Sitemap Page
Today, we're talking about a sitemap decorating.It's easier to do this by Theme.In the previous article we discussed how to generate a HTML Sitemap Page On Blogger Blog.So before you add this theme today, you should look at that article and make a sitemap page.Just adding the theme is not enough.
https://2.bp.blogspot.com/-_4C-bDKnE2s/WziqGQorCiI/AAAAAAAAFo0/ciqOJGruhwIwh6n5HSGeTVFTd_JJYD9GACLcBGAs/s640/How-to-Apply-Theme-to-Blogger-Sitemap-Page.jpg
https://2.bp.blogspot.com/-_4C-bDKnE2s/WziqGQorCiI/AAAAAAAAFo0/ciqOJGruhwIwh6n5HSGeTVFTd_JJYD9GACLcBGAs/s72-c/How-to-Apply-Theme-to-Blogger-Sitemap-Page.jpg
SBmade | New Data Of Technology
https://www.sbmade.com/2018/07/apply-theme-to-blogger-sitemap-page.html
https://www.sbmade.com/
https://www.sbmade.com/
https://www.sbmade.com/2018/07/apply-theme-to-blogger-sitemap-page.html
true
5296011179804877962
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