Alert box

×

Visit premium theme zone

Visit

join telegram Channel for updates

join

Styles html sitemap page Code for blogger

Dhanjee ridee Dhanjee Rider
Follow
How to Add Sitemap Page with Post Images in Blogger

How to Add Sitemap Page with Post Images in Blogger: A Comprehensive Guide


In today's digital landscape, optimizing your website's content for search engines has become a critical aspect of online success. When it comes to driving organic traffic to your blog, Blogger is a popular platform. One effective strategy to enhance your website's visibility and user experience is by adding a sitemap page with post images. In this detailed guide, we'll walk you through the process of creating an attractive sitemap page on Blogger, complete with post images, and explain why this is beneficial for your SEO efforts.

DEMO 👀

Why Add a Sitemap Page with Post Images?


A sitemap is a structured list of all the pages, posts, and other content on your website. It helps search engines like Google understand the structure of your site, making it easier for them to index your content. Incorporating post images in your sitemap page enhances user experience by providing a visual preview of your blog posts. This visual appeal can encourage visitors to explore your content further, resulting in longer page sessions and potentially reduced bounce rates. Moreover, images can be optimized for search engines, providing an additional opportunity to rank for relevant keywords.

Creating the Sitemap Page


Follow these steps to create a sitemap page with post images on Blogger:

Step 1: Access the Blogger Dashboard


Log in to your Blogger account and navigate to the dashboard of the blog where you want to add the sitemap page.

Step 2: Create a New Page


In the dashboard, click on the "Pages" tab in the left-hand menu. Then, click the "New Page" button to create a new page.

Step 3: Design Your Sitemap Page


Give your page a relevant title, such as "Sitemap," and start designing the content. Use the HTML editor to structure the page effectively.

Step 4: Implement the Sitemap Code

<div id="sitemap-blog">
 <table>
        <tbody>
            <!--<tr>
                <td>
                    <select id="feed-order">
                        <option selected="" value="published">Latest articles</option>
                        <option value="updated">The last updated article</option>
                    </select>
                </td>
            </tr>-->
      
          
          
          <tr>
                <td>
                    <select disabled="" id="label-sorter">
                        <option selected="">Loading....</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    
                </td>
            </tr>
        </tbody>
    </table>
</div>
<br />
<header id="result-desc"></header>
<br />
<ul id="daftar-isi-blog"></ul>
<div id="feed-nav"></div>
<script type="text/javascript">
//<![CDATA[ 
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
var css = '#sitemap-blog{padding:7px 10px;margin:0 auto}#sitemap-blog table{width:auto;margin:0 auto;border:none!important}#sitemap-blog table td{border:none!important;padding:10px;}#sitemap-blog form{font:inherit}#sitemap-blog label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}#sitemap-blog select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#sitemap-blog input,#sitemap-blog select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#sitemap-blog select option{min-height:1.4em!important}#sitemap-blog input#feed-q{padding:5px 10px!important}#daftar-isi-blog{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}#daftar-isi-blog li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}#daftar-isi-blog li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}#daftar-isi-blog li a{text-decoration:none;color:#2C2C2C;font-weight:500}#daftar-isi-blog li a:hover{text-decoration:none;color:#E94141}#daftar-isi-blog li .news-text{margin-top:5px;line-height:1.3em!important}#daftar-isi-blog li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;width:140px!important}#result-desc{margin:0;padding:0}#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#result-desc div{color:inherit}#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}#feed-nav a,#feed-nav span:hover{color:#1B1B1B}#feed-nav a:active,#feed-nav a:hover{color:#555}#feed-nav span{cursor:wait}@media (max-width:600px){#sitemap-blog table{margin:0 auto;width:100%}#daftar-isi-blog,#sitemap-blog{margin:0 auto}#daftar-isi-blog li .inner{margin:5px auto;height:auto}#feedContainer li{float:none;display:block;width:auto;height:auto}#daftar-isi-blog li .news-text,#feedContainer:after,#daftar-isi-blog li img{display:table-column}}.post-body{min-height:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCI6HGZ1K9-DVnZjEzcQMCtiuAeV_tPnV3S24WTCqYIWXm0nXh9y6YhwOejfYcw1P3oEdEX9yg5M9pMf8CDDbq9ONf-JBWIMJ9HfPY8aIGcdahyphenhyphenE3kDdxmYmgMWOpoEb3ljWU8W2f4LaU/w220-h19-no/ajax-loader+%25281%2529.gif)50% 50% no-repeat!important}';
style.appendChild(document.createTextNode(css));
head.appendChild(style); 
//]]></script>

<script type='text/javaScript'>
//<![CDATA[ 
document.write;
var loadToc, loadCategories, _toc = {
    init: function () {
        var cfg = {  homePage: window.location.origin,
                maxResults: 400,
                numChars: 270,
                thumbWidth: 140,
                thumbHeight: 95,
                navText: "Show next article &#9660;",
                resetToc: "Back to the Beginning",
                noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6pcNVb4uYhDegqDsq1uA79Td5VtIhrKN2SLmCrDJFeaRS_UtWb_miZJBt8Wu7ne7AhTRSY0EAykcrxn23FHwdwA4r6HVpNALc83h9CCMWguO2y8i0rChWjng1gCoXh0BPEdmLslNtTLAY/s1100/no-thumbnail.png",
                loading: "<span>Load...</span>",
                counting: "<div>Loading articles...</div>",
                searching: "<span>Look for...</span>"
            },
            w = window,
            d = document,
            el = function (id) {
                return d.getElementById(id);
            },
            o = {
  a: el('feed-order'),
                b: el('label-sorter').parentNode,
                c: el('post-searcher'),
                d: el('feed-q'),
                e: el('result-desc'),
                f: el('daftar-isi-blog'),
                g: el('feed-nav'),
                h: d.getElementsByTagName('head')[0],
                i: 0,
                j: null,
                k: 'published',
                l: 0,
                m: ""
            },
            fn = {
                a: function () {
                    old = el('temporer-script');
                    old.parentNode.removeChild(old);
                },
                b: function (param) {
                    var script = d.createElement('script');
                    script.type = "text/javascript";
                    script.id = "temporer-script"; script.src = param;
                    if (el('temporer-script')) fn.a();
                    o.h.appendChild(script);
                },
                c: function (mode, tag, order) {
                    o.i++;
                    o.e.innerHTML = cfg.counting;
                    o.g.innerHTML = cfg[mode == 1 ? "searching" : "loading"];
                    if (mode === 0) {
                        fn.b(tag !== null ? cfg.homePage + '/feeds/posts/summary/-/' + tag + '?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc' : cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc');
                    } else if (mode == 1) {
                        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&q=' + tag + '&orderby=' + order + '&callback=loadToc');
                    }
o.j = (tag !== null) ? tag : null;
                    o.l = mode;
                    o.a.disabled = true;
                    o.b.children[0].disabled = true;
                },
                d: function (json) { var _h;
                    o.g.innerHTML = "";
                    o.e.innerHTML = o.l == 1 ? '<span>Search results for keywords <b>&#8220;' + o.m + '&#8221;</b> (' + json.feed.openSearch$totalResults.$t + ' Results)</span>' : '<div>Total: ' + json.feed.openSearch$totalResults.$t + ' Article</div>';
                    if ("entry" in json.feed) {
                        var a = json.feed.entry,
                            b, c, _d, e = "0 Comment",
                            f = "",
                            g;
                        for (var i = 0; i < cfg.maxResults; i++) {
                            if (i == a.length) break;
                            b = a[i].title.$t;
                            _d = ("summary" in a[i]) ? a[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/<iframe/ig, "").substring(0, cfg.numChars) : "";
                            g = ("media$thumbnail" in a[i]) ? a[i].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "") : cfg.noImage.replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "");
                            for (var j = 0, jen = a[i].link.length; j < jen; j++) {
                                c = (a[i].link[j].rel == "alternate") ? a[i].link[j].href : "#";
                            }
                            for (var k = 0, ken = a[i].link.length; k < ken; k++) {
                                if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") {
                                    e = a[i].link[k].title;

    break;
                                }
                            }
                            _h = d.createElement('li');   _h.innerHTML = '<div class="inner"><img class="laza" style="width:' + cfg.thumbWidth + 'px;height:' + cfg.thumbHeight + 'px;" data-src="' + g + '" src="' + g + '" alt="' + b + '" title="' + b + '"><a class="toc-title" href="' + c + '" title="' + b + '">' + b + '</a><div class="news-text">' + _d + '&hellip;<br style="clear:both;"></div></div>';
                            o.f.appendChild(_h);
                        }
                        _h = d.createElement('a');
                        _h.href = '#load-more';
                        _h.innerHTML = cfg.navText;
                        _h.onclick = function () {
                            fn.c(o.l, o.j, o.k);
                            return false;
                        };
                    } else {
                        _h = d.createElement('a');
                        _h.href = '#reset-content';
                        _h.innerHTML = cfg.resetToc;
                        _h.onclick = function () {
                            o.i = -1;
                            o.e.innerHTML = cfg.counting;
                            o.f.innerHTML = "";
                            fn.c(0, null, 'published');
                            o.a.innerHTML = o.a.innerHTML;
                            o.b.children[0].innerHTML = o.b.children[0].innerHTML;
                            return false;
                        };
                    }
                    o.g.appendChild(_h);
                    o.a.disabled = false;
                    o.b.children[0].disabled = false;
                },
                e: function (json) {
                    var a = json.feed.category,   b = '<select id="label-sorter"><option value="" selected disabled>Select a Category...</option>';
                    for (var i = 0, len = a.length; i < len; i++) {
                        b += '<option value="' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '">' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '</option>';
                    }
                    b += '</select>';
                    o.b.innerHTML = b;
                    o.b.children[0].onchange = function () {
                        o.i = -1;
                        o.f.innerHTML = "";
                        o.g.innerHTML = cfg.loading;
                        fn.c(0, this.value, o.k);
                    };
                }
            };
        loadToc = fn.d;   
    loadCategories = fn.e;
        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + (o.i + 1) + '&max-results=' + cfg.maxResults + '&orderby=published&callback=loadToc');
        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');
        o.a.onchange = function () {
            o.i = -1;
            o.f.innerHTML = "";
            o.g.innerHTML = cfg.counting;
            o.b.children[0].innerHTML = o.b.children[0].innerHTML;
            fn.c(0, null, this.value);
            o.k = this.value;
        };
        o.c.onsubmit = function () {
            o.i = -1;
            o.f.innerHTML = "";
            o.m = o.d.value;
            fn.c(1, o.d.value, o.k);
            return false;
        };
    }
};
_toc.init(); 
//]]>
</script>           
<script>
        document.addEventListener("DOMContentLoaded", function() {
            const lazyImages = document.querySelectorAll('.laza');
            
            const lazyLoad = target => {
                const io = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const img = entry.target;
                            img.src = img.dataset.src;
                            img.classList.remove('laza');
                            io.unobserve(img);
                        }
                    });
                });
                io.observe(target);
            };
            
            lazyImages.forEach(lazyLoad);
        });
    </script>

Copy and paste the provided sitemap code into the HTML editor. This code generates a user-friendly sitemap layout with post images and links.

Step 5: Publish the Page


After implementing the code and designing the page, click the "Publish" button to make your sitemap page live.

The Benefits of Adding Images


Incorporating images into your sitemap page offers several benefits:

1. Enhanced User Engagement


Images attract the attention of visitors, making your sitemap page more visually appealing. Users are more likely to explore your content when they have a preview of what each post entails.

2. Improved SEO


By optimizing the alt text and filenames of your post images, you can improve the chances of your images appearing in image search results. This can lead to increased visibility and organic traffic.

3. Reduced Bounce Rates


When visitors are greeted with engaging visuals and relevant links, they are less likely to leave your site immediately. This can help lower bounce rates, a metric that search engines consider when ranking websites.

4. Internal Linking


Images on your sitemap page can serve as an effective way to internally link to your blog posts. Internal linking helps distribute authority throughout your site and boosts the ranking potential of individual posts.

Conclusion


A sitemap page with post images can significantly enhance your Blogger blog's SEO and user experience. By providing a visual preview of your content, you can entice visitors to explore further, potentially leading to higher engagement and improved search engine rankings. With the detailed steps outlined in this guide, you can easily create an appealing sitemap page that sets you on the path to online success.


Remember, optimizing your blog doesn't stop at creating a sitemap page. Consistently producing high-quality, keyword-rich content, optimizing images, and staying up-to-date with the latest SEO trends are all essential components of a successful online presence. So, go ahead and make the most of this guide to create a captivating sitemap page that not only impresses your visitors but also ranks high on Google's search results.

Last word

In this post we will provided information about Styles html sitemap page Code for blogger , If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.

Dhanjee Rider

Dhanjee Rider

Dk Technozone An Editor,Programmer, grafix Designer Website Designer,Android Geek, Instagram Filter Seller,Blloger, Seo Expert, Wordpress Geek etc. Telegram

Next Post Previous Post
No Comment
Add Comment
comment url